一陵究、背景
正如一千個(gè)讀者眼中有一千個(gè)哈姆雷特，在團(tuán)隊(duì)項(xiàng)目開發(fā)中摸航，不同的小伙伴也有極大概率會(huì)有不同的代碼風(fēng)格制跟。比如：末尾用不用分號(hào)？js中使用單引號(hào)or雙引號(hào)酱虎？是否換行凫岖？tab縮進(jìn)還是空格縮進(jìn)？……
單人項(xiàng)目遵循自己的習(xí)慣就好逢净，但團(tuán)隊(duì)項(xiàng)目中哥放，如果各個(gè)文件代碼風(fēng)格不一致，就十分難受了……
關(guān)于團(tuán)隊(duì)代碼規(guī)范爹土，網(wǎng)上早已有了各種解決方案甥雕。本文將默認(rèn)以 VSCode 編輯器為基礎(chǔ)，直接給出最最簡(jiǎn)單實(shí)用配置指南胀茵。
關(guān)于 Pretiier+Eslint
不同于 ESLint 這種輔助檢測(cè)代碼是否符合規(guī)范的工具社露，Pretiier只專注于格式化一件事。
預(yù)期效果
- 所有文件保存時(shí)自動(dòng)格式化
- 批量對(duì)項(xiàng)目已有文件進(jìn)行格式化處理
二琼娘、開始配置
第一步：安裝插件和npm包
安裝eslint包 npm install eslint --save-dev
安裝eslint包 npm install babel-eslint --save-dev
首先安裝 VSCode 的插件 prettier-vscode和Eslint
第二步：編輯器配置
安裝成功后峭弟，在IDE左下角找到設(shè)置按鈕附鸽，點(diǎn)擊進(jìn)入編輯器 setting.json 文件中
在這里，我們可以對(duì)編輯器做各種自定義的配置瞒瘸。
配置文件：
{
"explorer.confirmDelete": false,
"workbench.iconTheme": "vscode-icons",
"todo-tree.tree.showScanModeButton": false,
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"window.zoomLevel": 0,
// 代碼對(duì)齊：開啟保存自動(dòng)格式化坷备，調(diào)用prettier時(shí)自動(dòng)eslint-fix
"editor.formatOnSave": true,
// 代碼對(duì)齊：設(shè)置默認(rèn)格式化規(guī)則
"editor.defaultFormatter": "esbenp.prettier-vscode",
//eslint:配置項(xiàng)
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//eslint:配置項(xiàng)
"eslint.codeAction.showDocumentation": {
"enable": true
},
"explorer.confirmDragAndDrop": false,
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace"
}
}
第三步：在項(xiàng)目中添加.prettierrc.js和.eslintrc.js文件
.eslintrc.js 配置：
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
env: {
browser: true,
node: true,
es6: true,
},
globals: {
// 根據(jù)不同的項(xiàng)目環(huán)境自行配置
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
rules: {
'no-var': 2,//禁用var
semi: 2,//開啟結(jié)尾分號(hào)
'no-console': 2, //禁用console
//還有一些規(guī)則可以去https://www.cnblogs.com/wuconghui/p/11275059.html
},
};
.prettierrc.js 配置：
module.exports = {
printWidth: 120, // 超過最大值換行
semi: false, // 句尾不添加分號(hào)
singleQuote: true, // 使用單引號(hào)代替雙引號(hào)
trailingComma: 'es5', // 在ES5中有效的結(jié)尾逗號(hào)（對(duì)象，數(shù)組等）
bracketSpacing: true, // 在對(duì)象情臭，數(shù)組括號(hào)與文字之間加空格 "{ foo: bar }"
jsxBracketSameLine: true, // 在jsx中把'>' 是否單獨(dú)放一行
jsxSingleQuote: false, // 在jsx中使用單引號(hào)代替雙引號(hào)
insertPragma: false,
tabWidth: 2, // 縮進(jìn)字節(jié)數(shù)
arrowParens: 'avoid', // (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號(hào)省撑。avoid：省略括號(hào)
useTabs: false,
endOfLine: 'auto',
};
第四步：配置format命令和eslint命令
雖然完成第二、三步之后俯在，每次編輯完文件在保存時(shí)竟秫，其都會(huì)自動(dòng)做格式化處理。但對(duì)于已有項(xiàng)目跷乐，如何能快速將已有文件批量格式化呢肥败？
是的沒錯(cuò)，那就是在 package.json 中配置命令
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "eslint --fix --ext .js src/ ",
"format": "prettier --write 'src/**/*.{js,jsx,css,md}'"愕提，
"start": "npm run serve"
},
然后在控制臺(tái)中運(yùn)行 npm run format和npm run lint 即可對(duì)文件進(jìn)行批量格式化處理拙吉。
