編寫前端配置文件的正確姿式

時間 2019-11-06

標籤編寫前端配置文件正確简体版

原文原文鏈接

如今前端有很是多的工具（webpack、rollup、eslint、prettier、husky、lerna、commitlint等等），這些工具都是爲了優化提升前端的開發體驗而誕生的。可是問題來了，這些工具備很是多的配置字段，基本靠記憶是搞不定的，因此不少狀況都是前人寫好，後人拷貝。可是本着不想成爲成爲拷貝工程師的原則，我辛辛苦苦看完了各個文檔，寫的時候卻發現壓根記不住那些配置字段，個人心裏是崩潰的，說好的開發體驗呢，有個錘子體驗呀。。。javascript

編寫配置文件應該是可以智能提示字段，而且當我字段寫錯的時候是可以標紅的，就像編寫 ts 同樣css

不少前端工具都支持rc文件、.json、.yaml、.yml、.js 文件中編寫配置項目，由於其實基本上都是使用了 cosmiconfig 這個庫（或者有相似功能的庫）。html

若是配置文件是 .ts 文件的話是可以經過編寫聲明文件來約束和智能提示的，可是若是說配置文件還須要經過 tsc 來編譯過去，這樣就有點傻了。前端

所幸的其實咱們能夠經過 jsdoc 註釋來實現對 js 的類型約束。java

首先配置下 vscode 的設置，打開 setting，設置 javascript.implicitProjectConfig.checkJs 爲true，能夠經過可視化欄目，搜索 checkjs，勾選對應的選項： webpack

或者直接在 settings.json 文件中寫入：git

"javascript.implicitProjectConfig.checkJs": true
複製代碼

要約束對應的類型，使用 jsdoc 的 @type 便可，如：github

約束變量name爲數字，賦值字符串就標紅提醒了。web

那麼如今的關鍵就是須要有對應工具配置項的 interface，這樣就能約束和智能提示了。json

以 webpack 爲例，webpack 聲明文件導出了一個名爲 Configuration 的 interface，使用這個能夠約束和智能提示 webpack 的配置：

同理，我也找到了 rollup 的是 RollupOptions：

按照這個思路，若是說這些工具備相應的聲明文件而且聲明文件裏定義了配置項的類型，而且這個工具能夠支持以 .js 文件配置，那麼就能夠按照上面的思路來約束和提示。

可是很不幸的是，有些工具不支持以 .js 文件配置，好比 lerna ，一樣還有不少工具並無相應的聲明文件，好比 lerna、husky、commitlint 。

固然本身編寫聲明文件這個思路是能夠的，可是 lerna 這類只支持 .json 文件配置怎麼解決？

很明顯這須要一個 json 數據校驗器，很棒的是開源社區的巨巨們其實已經爲我等菜雞編寫好了大部分的校驗器。

巨巨們發起的項目叫 schemastore ，網站是 schemastore.org/json/ ，打開網站即是映入眼簾的滿滿的各種 json schema：

接下來的問題就是經過設置 vscode 來對特定 json 文件進行約束和智能提示。

直接在 vscode 的 settings.json 文件中編寫，如約束lerna 的：

"json.schemas": [{
       "fileMatch": [
            "lerna.json"
        ],
        "url": "http://json.schemastore.org/lerna.json"
    }
]
複製代碼

棒棒棒，這纔是能夠接受的開發體驗呀。

我挑選了經常使用的 babel、lerna、husky、eslint、prettier、travis 等，配置以下：

{
    "json.schemas": [{
        "fileMatch": [
            "/.babelrc"
        ],
        "url": "http://json.schemastore.org/babelrc"
    }, {
        "fileMatch": [
            "lerna.json"
        ],
        "url": "http://json.schemastore.org/lerna.json"
    }, {
        "fileMatch": [
            "/.huskyrc"
        ],
        "url": "http://json.schemastore.org/huskyrc"
    }, {
        "fileMatch": [
            "/.csslintrc"
        ],
        "url": "http://json.schemastore.org/csslintrc"
    }, {
        "fileMatch": [
            ".eslintrc"
        ],
        "url": "http://json.schemastore.org/eslintrc"
    }, {
        "fileMatch": [
            ".htmlhintrc"
        ],
        "url": "http://json.schemastore.org/htmlhint"
    }, {
        "fileMatch": [
            "jsconfig.json"
        ],
        "url": "http://json.schemastore.org/jsconfig"
    }, {
        "fileMatch": [
            ".prettierrc"
        ],
        "url": "http://json.schemastore.org/prettierrc"
    }, {
        "fileMatch": [
            ".travis.yml"
        ],
        "url": "http://json.schemastore.org/travis"
    }, {
        "fileMatch": [
            ".lintstagedrc"
        ],
        "url": "http://json.schemastore.org/lintstagedrc.schema"
    }]
}
複製代碼