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