VSCode 中使用ESLint+Prettier來統一前端程式碼風格

eslint - 校驗程式碼語法

檢查語法問題，例如：宣告一個變數應該 const 還是 let ，使用的變數有沒有宣告等等。

prettier - 統一格式化程式碼

檢查程式碼風格問題，它支援多種語言，我們這裡討論關於 JavaScript 的，例如應該使用單引號還是雙引號，該不該換行，tab 鍵佔多少個空白，結尾要不要分號等等問題。
使用 prettier 來處理程式碼風格的時候，就不要再同時使用 eslint 來處理程式碼風格問題了

eslint檔案
prettier檔案

安裝

1
2
3

npm i eslint prettier eslint-plugin-prettier -D
or
yarn eslint prettier eslint-plugin-prettier --dev

配置 eslint 使其呼叫 prettier
在專案根目錄新增.eslintrc.js檔案，並作以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//.eslintrc.js
module.exports = {
root: true,
env: {
browser: true, // 設定為所需檢查的程式碼是在瀏覽器環境執行的
node: true
},
extends: [
'plugin:vue/essential',
'@vue/prettier',
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
"prettier/prettier": "error"
}
}

安裝vscode外掛

首先，需要安裝 ESLint、Prettier - Code formatter這兩個外掛

vscode外掛配置

開啟settings.json檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

"editor.formatOnSave": true, // 每次儲存時自動格式化
"editor.tabSize": 2, // 縮進2個空白
// 新增vue支援
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"html",
"vue",
],
"eslint.options": { //指定eslint設定檔位置
"configFile": ".eslintrc.js" //指定專案根目錄中的eslint設定檔
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}