前置
本文將探究 VSCode Prettier 擴展 和 eslint 擴展在 VSCode 中的配置以及這兩者對應的在項目中的配置文件的關系， VSCode ESLint 擴展配置與 eslint-loader 的相互配合，在項目中如何將 Prettier 和 ESLint 配合使用，中間還提及了在項目間共享 VSCode 配置。
本文建立在你對 VSCode 、ESLint、Prettier、Webpack 有簡單了解的基礎下進行。希望本文對你有幫助，以后搭建項目能夠得心應手。如有錯誤，一定不吝賜教。
初始化測試項目
創建文件夾 eslint-prettier-test 和 eslint-prettier-test/index.js。
VSCode Prettier
安裝 VSCode 擴展 Prettier
配置擴展 Prettier
通過 VSCode settings.json 設置 VSCode 默認格式化工具為 Prettier。 以 JavaScript 為例。
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
我們以在 JavaScript 語句末尾添加分號為例，打開 VSCode 配置文件 settings.json 配置 Prettier 擴展：
{
"prettier.semi": true
}
此時在 VSCode 中格式化代碼會將 JavaScript 語句自動加上分號。
創建 .prettierrc
然后再我們的項目根目錄下創建 .prettierrc 配置文件。
在 .prettierrc 中寫入配置。
{
"semi": false
}
這個配置項即不為 JavaScript 語句添加分號，與上文 settings.json 中的配置相反。眼見為實，我們再次格式化 js 文件。
由於 gif 會循環播放，簡單解釋一下。當我按下 VSCode 格式化快捷鍵，分號消失了。
總結
項目根目錄下的 .prettierrc 配置文件會影響 VSCode 的 prettier 擴展，且優先級高於在 VSCode settings.json 中的 prettier 擴展配置。
我們知道這一點可以做什么？當你裝上 VSCode 的 Prettier 擴展后，你應該先將 VSCode 的默認格式化工具設為 Prettier 並在 VSCode 內部做好你期望的 Prettier 擴展配置。這對不使用 Prettier 的項目的配置有效。當你的項目中包含 .prettierrc 配置文件時，該 .prettierrc 生效，VSCode 中的 Prettier 擴展配置失效，互不沖突。
VSCode ESLint
ESLint 配置同理。但是要想獲得 ESLint 提示，不僅需要在 VSCode 中安裝 ESLint 擴展。
你還需要在項目根目錄創建一個 .eslintrc.js 文件才能使 VSCode 拋出提示信息。當你刪除 **.eslintrc.js **文件，提示將消失**。例如，我們在項目根目錄下的 .eslintrc.js 寫入如下配置。
module.exports = {
env: {
es6: true,
},
rules: {
'no-console': 'warn',
},
}
- 允許 es6 語法
- 使用 console 拋出警告
vscode 根據規則在我們使用 console 時拋出了警告。
.vscode
你可以在任意的項目根目錄創建一個 .vscode/settings.json 文件，這個 json 文件可以配置 VSCode 中 settings.json 同樣的配置。例如下面這樣。
{
"editor.formatOnSave": true
}
這項配置使 VSCode 在保存時自動格式化代碼。在 VSCode 內部的配置文件 settings.json，同樣可以配置這條選項。.vscode/settings.json 會覆蓋 VSCode 內部配置文件 settings.json 中的配置，這是合理的。
那么這么做的好處是什么呢？當一個項目需要多人協作時，可以通過配置項目根目錄下的 .vscode/settings.json 達到共享配置的目的。
我們可以將 VSCode 擴展的配置放到 .vscode/settings.json 中與他人共享擴展配置嗎？當然是可以的。不要忘了 .vscode/settings.json 可以配置 vscode 內部的 settings.json，VSCode 擴展的配置也寫在 VSCode 內部的 settings.json 中。常常不必這么做。像 Prettier 和 ESLint 為我們提供了單獨的配置文件放在項目根目錄下，VSCode 能夠自動讀取其配置並生效（前提是 VSCode 安裝了對應的擴展），這在上文已經驗證了。
我們可以打開一個大型開源項目參考他們是如何做的。例如 跨端框架 Taro。
他們將 Prettier 和 ESLint 配置放到單獨的配置文件中 （圖中的 .prettierrc 和 .eslintrc.js)。打開 .vscode/setting.json 查看一下。
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
"jest.autoEnable": false,
"typescript.tsdk": "node_modules/typescript/lib"
}
不必將校驗規則放到 .vscode/settings.json 中。配置中的 eslint.validate 規定 ESlint 擴展需要校驗的語言類型，添加上對應的語言后 VSCode 才會在代碼編輯器中正確的高亮錯誤的語法。如果你在 VSCode 中安裝了 ESLint 擴展，默認配置中包含一些常用語言，一般無需再單獨配置。
記住一點即可：.vscode/settings.json 僅作用於 VSCode 內部的 settings.json。
eslint-loader
如果你使用 webpack 構建項目，應該會使用 eslint-loader。可以在 loader 中配置校驗規則。這和上文所說的不是一會事，項目在本地跑起來時（通常在生產環境屏蔽 eslint-loader 的拋出信息）。當你的代碼不符合校驗規則時， eslint-loader 會在控制台拋出錯誤或者警告。
在本文開始已經建好的項目中安裝 eslint-loader。如果使用 eslint-loader，還需要安裝 eslint。
npm init -y && npm i webpack webpack-cli eslint eslint-loader -D
安裝完畢，我們在 package.json 中看下當前項目的依賴。
"devDependencies": {
"eslint": "^7.14.0",
"eslint-loader": "^4.0.2",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0"
}
使用 eslint-loader 還需要稍作配置。在項目根目錄下新建 webpack.config.js。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// eslint options (if necessary)
},
},
],
},
}
為了能使這個簡單的例子跑起來，我們還需要將項目中的 index.js 文件放到 src 中，因為 wepack 默認入口文件在 src/index.js，這里為了方便不做多余的 webpack 配置，直接創建 src 文件夾並將 index.js 移入。
不要忘了，在上文 .eslintrc.js 已經配置了一條校驗規則，它作用於 VSCode ESLint 擴展。此時 index.js 中的內容也沒有改變，依然在拋出警告。
接下來我們在控制台運行命令 webpack。webpack 將會把 src/index.js 打包到 dist/main.js。
如你所願，eslint-loader 在控制台為我們拋出了一條警告，即我們在 .eslintrc.js 中配置的使用 console 時拋出警告。所以， .eslintrc.js 不僅作用於 VSCode 中 eslint 擴展，還作用與 eslint-loader。
如果你仍有疑惑，接下來上文我們已經配置好的 wepack.config.js 中的 eslint-loader 注釋掉。
module.exports = {
// module: {
// rules: [
// {
// test: /\.js$/,
// exclude: /node_modules/,
// loader: 'eslint-loader',
// options: {
// // eslint options (if necessary)
// },
// },
// ],
// },
}
再次運行 webpack，即使不看結果你應該知道了，打包過程 webpack 並不會給我們拋出任何錯誤。
Prettier 配合 ESLint
通過上文已經知道，VSCode 配置包括 VSCode 擴展配置是可以在團隊成員間共享的，安裝 npm 包並不是因為因為僅使用 VSCode 無法實現 Prettier + ESLint 的效果，而是因為 npm 包用於配合構建工具在開發環境運行時以及生產構建時拋出錯誤或提示，比如 Webpack 中的 loader。
ESLint 主要用於語法檢查，但也接管了部分代碼格式化配置（並不是 ESLint 也用於格式化）。Prettier 永遠只做格式化。這就存在一個問題，有些 ESLint 規則和 Prettier 規則之間存在沖突，解決這個問題的辦法並不是簡單的將沖突的配置同步，配置沖突往往是隱蔽的，你無法簡單的通過眼睛識別所有沖突的配置，需要借助工具。Prettier 文檔中說明了這一點：
Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns ...
解決這個問題的辦法是通過 eslint-config-prettier（npm 包）關閉與 Prettier 沖突或不必要的規則。stylelint 與 tslint 也有相同功能的包用於關閉與 Prettier 沖突或不必要的規則。（tslint 已死）
可以將 Prettier 作為 ESlint 的插件使用，“eslint-plugin-prettier”（npm 包）可以實現這一點。這些插件在 Prettier 剛推出時特別有用（常常推出一個新工具都會采用這種漸進式的方式獨立起來，站在巨人的肩膀上，頗有農村包圍城市的感覺）。通過在 Linter 中運行 Prettier，你不必配置任何規則（Prettier 號稱固執己見的格式化工具，它已經集成開箱即用的規則），並且編輯器可以正確拋出信息，現在你仍然可以跑 prettier --check。
npm install --save-dev eslint-config-prettier
.eslintrc
{
"extends": ["some-other-config-you-use", "prettier"]
}
但是，使用這類插件也是有缺點的：
- 編輯器中出現很多紅色的斜線，這很煩人
- 比直接運行 Prettier 要慢
- 是一層間接性的東西，可能會被破壞，比如雙方升級帶來新的問題
在 eslint-plugin-prettier Github 倉庫中有說明：
Runs Prettier as an ESLint rule and reports differences as individual ESLint issues. If your desired formatting does not match Prettier’s output, you should use a different tool such as prettier-eslint instead.
如果所需的格式與 Prettier 的輸出不匹配，則應改用其他工具，如：prettier-eslint。
最后，有一些工具可以運行 prettier，然后立即對文件進行例如 eslint --fix 處理。
- prettier-eslint
- prettier-tslint
- prettier-stylelint
以 prettier-eslint 為例，使用 prettier 命令然后再通過 eslint --fix 命令對你的 JavaScript 進行格式化。
ESLint 可以根據你的 ESLint 配置自動格式化/修復你的大部分代碼。 Prettier 是一個更強大的自動格式化器。Prettier 的一個優點是它的意見性很強。不幸的是，它不夠有主見，而且/或者有些意見與我自己的意見不同。所以在 Prettier 格式化了代碼之后，我就開始得到 linting 錯誤。
這通過 prettier 格式化你的代碼，然后將其結果傳遞給 eslint --fix。這樣你就可以得到 Prettier 卓越的格式化能力的好處，也可以從 ESLint 的配置能力中受益。
對於擴展名為 .css、.less、.scss 或 .json 等文件，只能運行
prettier，因為 ESLint 不能處理這些文件。
如果 Prettier 的輸出的某些方面使 Prettier 對你來說完全無法使用，這些工具就很有用。那么你可以讓 eslint --fix 為你修復它。缺點是，這些工具比直接運行 Prettier 要慢得多。
說了這么多，會發現 ESLint、Prettier、VSCode 這三者流暢配合不是一件容易的事，但是我們清楚了大多數情況下應該通過什么方式解決。如果向往足夠簡單，使用 eslint-config-prettier 就好。
總結
通過 loader 和 VSCode 擴展以及擴展的配置，打通了整個開發環節的語法校驗以及格式化。