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創建的模板項目。