相信小伙伴們在小學時都經歷過小平頭時代，那時的教務處主任天天學校門口巡視，同學們更是一個個心驚膽戰(zhàn)。那時的我們就好比一行行代碼，如果發(fā)型不一，上來就是兩...55555不說了... 所以說統(tǒng)一樣式更有助于我們更統(tǒng)一的管理，也會使我們少犯錯誤，這時ESlint站出來了，它就是教務處主任的化身，會將我們的形形色色的發(fā)型(代碼)統(tǒng)一起來，雖然驗證過得代碼不一定完美，但是一定相對規(guī)范。
什么是 ESLint?
ESLint是一個用來識別 ECMAScript 并且按照規(guī)則給出報告的代碼檢測工具，使用它可以避免低級錯誤和統(tǒng)一代碼的風格。如果每次在代碼提交之前都進行一次eslint代碼檢查，就不會因為某個字段未定義為undefined或null這樣的錯誤而導致服務崩潰，可以有效的控制項目代碼的質量。
ESlint的主要作用
1.代碼質量問題：使用/編寫的方式有可能有問題 (problematic patterns)
2.代碼風格問題：風格不符合一定規(guī)則 (doesn’t adhere to certain style guidelines)
就好比有些同學喜歡使用tab縮進，有些喜歡空格，有些喜歡2個空格，有些喜歡4個。這就難辦了，到底聽誰的？
最后經過一番舌戰(zhàn)，選定2個空格作為標準。于是乎我們在根目錄創(chuàng)建了配置文件.eslintrc并寫入了我們的倫果
// .eslintrc
{
"indent": ["error", 2]
}
- 為了大家的提高大家的開發(fā)體檢及提交的一致性，你還‘威逼利誘’的讓大家下載了vscode插件，沒有通過 ESLint 校驗的代碼 VSCode 會給予下滑波浪線提示，提醒他好好檢查。
- 為了保證提交代碼的萬無一失，你還添加一個 pre-commit 鉤子 eslint --ext .js src，確保沒有通過 lint 的代碼不會被提交。
- 最后還要求了大家使用 eslint --fix 將之前的所有代碼，一鍵修改成了新規(guī)范下的代碼格式。
什么是 Prettier?
一個流行的代碼格式化工具的名稱,它能夠解析代碼,使用你自己設定的規(guī)則來重新打印出格式規(guī)范的代碼。
Tony老師認為發(fā)型很重要，Prettier也這么認為。 Prettier認為格式很重要，但是格式好麻煩，我來幫你們定好吧。簡單來說，不需要我們再思考究竟是用 single quote，還是 double quote 這些亂起八糟的格式問題，Prettier 幫你處理。最后的結果，可能不是你完全滿意，但是，絕對不會丑。
Prettier 接管了兩個問題其中的代碼格式的問題，而使用 Prettier + ESLint 就完完全全解決了兩個問題
當然，教務處主任和Tony老師對發(fā)型的理解‘不共戴天’，所以我們還需要對他們進行一番深入交流。下面就讓我們一起開始吧！
正文
依賴安裝
在你的項目中安裝以下依賴，這些依賴只需安裝在開發(fā)環(huán)境配置中
npm install eslint prettier --save-devnpm install eslint-config-prettier eslint-plugin-prettier --save-devvscode插件安裝
安裝 vscode 插件 ESLint 和 Prettier - Code formatter
如果希望在每次保存時自動格式化代碼可以加上以下配置
- 項目下創(chuàng)建 .vscode/settings.json 配置 (也可以配置到全局)
- 配置每次報錯自動ESLint檢查規(guī)則并格式化
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}添加配置文件
添加配置文件 .eslintrc.js
// .eslintrc
module.exports = {
root: true,
plugins: ['prettier'], // prettier 一定要是最后一個，才能確保覆蓋
rules: {
'prettier/prettier': 'error',
},
extends: ['plugin:prettier/recommended'],
};
上面配置在運行報錯時可選以下配置
// .eslintrc
module.exports = {
plugins: ['prettier'],
parser: "vue-eslint-parser",
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
parser: 'babel-eslint',
},
rules: {
'prettier/prettier': 'error',
"parser": 0
},
extends: ['plugin:prettier/recommended'],
};
以下是我的個人配置，僅供參考
創(chuàng)建配置文件 .prettierrc.js
//.prettierrc.js
module.exports = {
// 一行最多 120 字符
printWidth: 120,
// 使用 2 個空格縮進
tabWidth: 2,
// 不使用 tab 縮進，而使用空格
useTabs: false,
// 行尾需要有分號
semi: true,
// 使用單引號代替雙引號
singleQuote: true,
// 對象的 key 僅在必要時用引號
quoteProps: 'as-needed',
// jsx 不使用單引號，而使用雙引號
jsxSingleQuote: false,
// 末尾使用逗號
trailingComma: 'all',
// 大括號內的首尾需要空格 { foo: bar }
bracketSpacing: true,
// 箭頭函數(shù)，只有一個參數(shù)的時候，也需要括號
arrowParens: 'always',
// 每個文件格式化的范圍是文件的全部內容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認的折行標準
proseWrap: 'preserve',
// 根據顯示樣式決定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'lf',
};
添加命令
// package.json中scripts中加入
"lint": "eslint --ext .js,.vue src", // 檢查項目是否符合eslint規(guī)則
"prettier": "prettier --write .", // 一鍵格式化所有文件忽略文件
當然，在特殊情況下，比如某個學生是校長的兒子，女兒之類的，教務處長總會睜一只眼，閉一只眼。所以我們也需要進行一些選擇性的忽視。
eslint忽略文件
.eslintignore
prettier忽略文件
.prettierignore
忽略規(guī)則與.gitignore一致
報錯及異常情況
- Tip1: 執(zhí)行 npm run lint 報
'prettier/prettier': context.getPhysicalFilename is not a function
移除以下依賴，項目中不存在的就不用移除
npm rm @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint eslint-plugin-prettier eslint-plugin-vue prettier安裝指定版本的依賴
npm i -D @vue/[email protected] @vue/[email protected] @vue/[email protected] [email protected] [email protected] [email protected] [email protected]- Tip2: 執(zhí)行 npm run lint 報
# Vue error: Parsing error: Unexpected token <
在.eslintrc.js中加入parser: 'vue-eslint-parser'
- Tip3 執(zhí)行 npm run dev 報
Cannot find module 'core-js/modules/es.array.concat.js'
在babel.config.js文件中的presets添加userBuiltIns
module.exports = {
presets: [['@vue/app',{ useBuiltIns: "entry" }]],
};
