Vue2/3 專案中的 ESLint + Prettier 程式碼檢測格式化風格指南
因為平時都是使用 VSCode ESLint + Prettier 檢測格式化不規範程式碼，但是隨著接手的專案越來越多，需要統一每個專案的程式碼規範，於是在此分享vue專案的幾種程式碼格式化風格(default,standard,airbnb,prettier)的基本區別以及修改為prettier風格。
對比肉眼可見的格式化風格差異，並且以字串單/雙引號，每行結尾有無分號，object物件最後一項有無尾逗號作為判斷依據
VSCode的外掛以及配置
-
ESLint , Prettier 外掛安裝
-
配置VSCode settings.json
...
// 相應檔案的格式化工具選中
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 啟用ESLint作為已驗證檔案的格式化程式，可方便快捷鍵
"eslint.format.enable": true,
// 每次儲存的時候將程式碼按eslint格式進行修復
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 關閉編輯器預設儲存格式化，不然多數情況會和上面的配置執行兩次
"editor.formatOnSave": false
...
1. 【 Default 】 vue/cli 建立預設配置專案
- 執行以下命令來建立一個新專案：
vue create hello-world- 選擇 Default ([Vue 2] babel, eslint) 回車建立
等著建立成功後,會發現 eslint 的相關配置，在package.json檔案中：
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
這裡我們刪除它，並在專案下新建.eslintrc.js檔案將其遷移進去：
module.exports = {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
}
plugin:vue/essential：啟用 vue 的基礎規則
eslint:recommended：啟用 eslint 的推薦規則
babel-eslint：可以對所有有效的babel程式碼進行lint處理。
此時我們可以根據當前專案中main.js檔案發現，最基本的風格為：字串單引號，結尾無分號；當我們結尾加分號，儲存測試會沒有任何效果，不要急，接下來新增 prettier 。
vue/cli 新增 prettier
執行以下命令：
vue add @vue/eslint提示 Still proceed 選擇 y
等待安裝完
會出現四個格式化風格選擇項，按向下鍵，選擇 Prettier 回車確認
再選擇 Lint on save 回車確認
等 @vue/cli-plugin-eslint 安裝完成後會發現 .eslintrc 配置中 extends 多出了@vue/prettier
回過頭來，再去專案的main.js或者App.vue檔案儲存測試發現格式化生效。
最後，去除一些常規的eslint 報錯警告資訊，在 rules 中新增自定義規則：
其中 "prettier/prettier" 可以新增 prettier 相關配置
.eslintrc.js 完整配置
module.exports = {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
'prettier/prettier': [
'error',
{
requireConfig: false,
endOfLine: 'auto',
quoteProps: 'as-needed',
proseWrap: 'preserve',
arrowParens: 'always',
htmlWhitespaceSensitivity: 'strict',
ignorePath: '.prettierignore',
jsxBracketSameLine: false,
jsxSingleQuote: false,
vueIndentScriptAndStyle: true,
semi: false,
trailingComma: 'none',
singleQuote: true,
printWidth: 150,
tabWidth: 2,
bracketSpacing: true,
useTabs: true
}
],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/v-on-event-hyphenation': 'off',
'vue/multi-word-component-names': ['off'],
'vue/prop-name-casing': 'off',
'vue/require-default-prop': 'off',
'vue/no-v-html': 'off',
'no-new': 'off',
'prefer-regex-literals': 'off',
'prefer-promise-reject-errors': 'off',
'no-unused-vars': [
'off',
{
caughtErrors: 'none'
}
],
'vue/no-unused-vars': [
'off',
{
caughtErrors: 'none'
}
],
'no-tabs': 'off',
'no-trailing-spaces': 'off',
'no-mixed-spaces-and-tabs': 'off',
'no-empty-function': 'off',
'space-before-function-paren': ['off', 'always'],
'no-unreachable-loop': 'off',
'no-multiple-empty-lines': 'off',
'no-loss-of-precision': 'off',
'no-useless-escape': 0,
semi: ['warn', 'never'],
eqeqeq: 0,
indent: ['off', 2],
quotes: ['error', 'single', { allowTemplateLiterals: true }]
}
}
2. 【 Manually 】 vue/cli 自定義建立 ESLint + Prettier
- 執行以下命令來建立一個新專案：
vue create hello-world- Please pick a preset: 選擇 Manually select features
- Check the features needed for your project: Choose Vue version, Babel, Linter...
- Choose a version of Vue.js that you want to start the project with 2.x
- Pick a linter / formatter config: Prettier
- Pick additional lint features: Lint on save
- Where do you prefer placing config for Babel, ESLint, etc.?: In dedicated config files
- Save this as a preset for future projects? Yes
- Save preset as: 回車確認
可見差異：字串雙引號，每行結尾有分號，object物件最後一項有尾逗號;
生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"]
跟上面 [1. 【 Default 】 vue/cli 建立預設配置專案] 建立的.eslintrc.js 配置對比發現，只是少了 rules 配置，將上面的 rules 配置copy過來。同樣測試儲存格式化效果一樣。
3. 【 Manually 】 vue/cli 自定義建立 ESLint + Standard
- 執行以下命令來建立一個新專案：
vue create hello-world
- Please pick a preset: Manually select features
- Check the features needed for your project: Choose Vue version, Babel, Linter
- Choose a version of Vue.js that you want to start the project with 2.x
- Pick a linter / formatter config: Standard
- Pick additional lint features: Lint on save
- Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
- Save this as a preset for future projects? Yes
- Save preset as:回車確認
可見差異：字串單引號，每行結尾無分號，物件最後一項沒有尾逗號;
生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "@vue/standard"]
關於.eslintrc.js配置，去掉 rules 中的 'prettier/prettier' ，rules其他配置同上，同樣測試儲存格式化效果一樣。
4. 【 Manually 】 vue/cli 自定義建立 ESLint + Airbnb
- 執行以下命令來建立一個新專案：
vue create hello-world
- Please pick a preset: Manually select features
- Check the features needed for your project: Choose Vue version, Babel, Linter
- Choose a version of Vue.js that you want to start the project with 2.x
- Pick a linter / formatter config: Airbnb
- Pick additional lint features: Lint on save
- Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
- Save this as a preset for future projects? Yes
- Save preset as:回車確認
可見差異：字串單引號，每行結尾有分號，物件最後一項有尾逗號;
生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "@vue/airbnb"]
關於.eslintrc.js配置，rules其他配置同上，同樣測試儲存格式化效果基本一致一樣。
5. vite 自定義建立預設Vue專案
1. 執行以下命令來建立一個新專案：
npm init vite@latest my-vue-app --template vue
2. 安裝 vue3 ESLint + Prettier 相關依賴
npm install eslint-config-tkb -D
然後在package.json 中新新增配置即可：
"eslintConfig": {
"extends": ["eslint-config-tkb"]
}
進入vue和js 檔案儲存，測試格式化效果基本一致一樣。
eslint-config-tkb 是個人自定義的 eslESLint + Prettier 的配置，也支援vite建立的 vue-ts建立的模板專案。