ESLint是js代碼的質量檢查工具，同時也具備一定的代碼風格的格式化能力。
Prettier是一個代碼風格的約束工具，Prettier能約束JS、JSX、TypeScript、Vue、CSS、Less、SCSS、HTML、JSON、Markdown等代碼風格。
由于ESLint定義了一些js的代碼格式化的約束，導致其與Prettier存在一些沖突。
如：
ESLint默認語句結尾不加分號，Prettier默認語句結尾加分號；
ESLint默認強制使用單引號，Prettier默認使用雙引號；
ESLint默認句末減少不必要的逗號，Prettier默認盡可能多使用逗號等等
本文使用Vue cli創建項目，并做簡單配置，由于項目成員大多數使用webstorm和vs code開發工具，另外提供兩個工具的配置方式。
新建項目
用Vue cli新建項目，創建時選擇手動配置項目，linter / formatter 配置選擇ESLint + Prettier，選擇在保存時候進?代碼規則檢
測，不要選commit時檢測，選擇將 Babel、ESLint等配置文件保存到各自的配置文件中。
項目創建完成后可以看到package.json文件中，存在下列開發依賴
項目根目錄下存在文件ESLint的配置文件.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"plugin:prettier/recommended",
],
parserOptions: {
parser: "@babel/eslint-parser", // 解析器
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};
由于ESLint也具備一定的代碼風格的格式化能力，vue cli 用下面的兩個插件，解決ESLint和Prettier沖突問題。
- eslint-config-prettier：禁用掉了一些不必要的以及和 Prettier 相沖突的 ESLint 規則；
- eslint-plugin-prettier：將 prettier 作為 ESLint 的規則來使用，相當于代碼不符合 Prettier 的標準時，會報一個 ESLint 錯誤，同時也可以通過 eslint --fix 來進行格式化；這樣就相當于將 Prettier 整合進了 ESLint 中；
root 根目錄標識
ESLint 檢測配置文件步驟：
在要檢測的文件同一目錄里尋找 .eslintrc.* 和 package.json；
緊接著在父級目錄里尋找，一直到文件系統的根目錄；
如果在前兩步發現有 root：true 的配置，停止在父級目錄中尋找 .eslintrc；
如果以上步驟都沒有找到，則回退到用戶主目錄 ~/.eslintrc 中自定義的默認配置
env 運行環境
一個環境定義了一組預定義的全局變量
獲得了特定環境的全局定義，就不會認為是開發定義的，跳過對其的定義檢測。否則會被認為改變量未定義
前端開發常用的運行環境：
browser - 瀏覽器環境中的全局變量。
node - Node.js 全局變量和作用域。
es6：es6 中除了模塊之外的其他特性，同時將自動設置 parserOptions.ecmaVersion 參數為 6；以此類推 ES2017 是 7，而 ES2021 是 12；
es2017：parserOptions.ecmaVersion 為 8；
jquery - jQuery 全局變量。
globals 開發者自定義的全局變量
plugins 插件
插件用來擴展解析器的功能，插件是eslint-plugin-前綴的包，配置時無需加前綴
extends 規則繼承
規則的類型：
1、eslint 開頭的：是 ESLint 官方的擴展 如eslint:recommended
2、plugin 開頭的：是eslint插件類型擴展，如 plugin:vue/essential,其插件前綴是eslint-plugin，省略了eslint-
3、eslint-config 開頭的：來自 npm 包，配置時可以省略前綴 eslint-config-，比如上面的可以直接寫成 standard
4、@開頭的：擴展和 eslint-config 一樣，只是在 npm 包上面加了一層作用域 scope；
5、一個執行配置文件的相對路徑或絕對路徑；
優先級：
如果 extends 配置的是一個數組，最終會將所有規則項進行合并，出現沖突的時候，后面的會覆蓋前面的
通過 rules 單獨配置的規則優先級比 extends 高
rules 自定義規則
規則的值
‘off’ 或 0：關閉對該規則的校驗；
‘warn’ 或 1：啟用規則，不滿足時拋出警告，不會退出編譯進程；
‘error’ 或 2：啟用規則，不滿足時拋出錯誤，會退出編譯進程；
如果某項規則，有額外的選項，可以通過數組進行傳遞，數組的第一位必須是錯誤級別。
如 ‘semi’: [‘error’, ‘never’], never就是額外的配置項
這時候如果我在文件中加入代碼
console.log("HelloWorld")
編譯時將會拋出錯誤，退出編譯進程
如果希望拋出警告或關閉prettier，可在rules自定義下面規則
"prettier/prettier": "warn"
配置自己的規則
ESLint就采用推薦的規則，大多數情況下我們希望按照自己的習慣自定義一些Prettier規則。
自定義格式化文件 ,文件名可以是.prettierrc（JSON格式） .prettierrc.js/prettier.config.js（js格式，需要module.exports一個對象）
為了加入注釋讓其他成員快速了解規則，這里使用 .prettierrc.js文件進行配置
module.exports = {
printWidth: 120, // 一行最多 120 字符(默認80)
tabWidth: 2, // 每個tab相當于多少個空格（默認2）
useTabs: false, // 是否使用tab進行縮進（默認false）
semi: false, // 行尾需要有分號(默認true)
singleQuote: true, // 使用單引號（默認false）
quoteProps: 'as-needed', // 對象的 key 僅在必要時用引號
jsxSingleQuote: false, // jsx 不使用單引號，而使用雙引號
trailingComma: 'none', // 多行使用拖尾逗號（默認none）
bracketSpacing: true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }"（默認true）
jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的結尾，而不是另起一行（默認false）
htmlWhitespaceSensitivity: 'css', // 根據顯示樣式決定 html 要不要折行
arrowParens: 'avoid', // 只有一個參數的箭頭函數的參數是否帶圓括號（默認avoid:添加括號）
endOfLine: 'auto' // 行尾換行符
}
讓代碼編輯器識別規則
配置規則后，我們需要編輯器能夠給出錯誤提示，按我們的規則格式化代碼等提高工作效率，而不是手動調整代碼，在命令行中查看錯誤信息，下面再編輯器中進行配置。
Webstorm和vs code 都能夠安裝ESLint和Prettier插件
vs code
安裝插件Vetur（vue語法增強） ESLint、Prettier,Vetur 也有?套 Format 規則,VSCode 中ESlint 集成了 prettier 的校驗規則,不需要再單獨安裝 Prettier 插件
配置 Prettier 為默認代碼格式化工具
同時按下 command/ctrl + shift + p 鍵盤
輸入 format document with
選擇 Configure Default Formatter…
選擇 Prettier 為默認的工具
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創建的模板項目。
