一、背景
正如一千个读者眼中有一千个哈姆雷特，在团队项目开发中，不同的小伙伴也有极大概率会有不同的代码风格。比如：末尾用不用分号？js中使用单引号or双引号？是否换行？tab缩进还是空格缩进？……
单人项目遵循自己的习惯就好，但团队项目中，如果各个文件代码风格不一致，就十分难受了……
关于团队代码规范，网上早已有了各种解决方案。本文将默认以 VSCode 编辑器为基础，直接给出最最简单实用配置指南。
关于 Pretiier+Eslint
不同于 ESLint 这种辅助检测代码是否符合规范的工具，Pretiier只专注于格式化一件事。
预期效果
- 所有文件保存时自动格式化
- 批量对项目已有文件进行格式化处理
二、开始配置
第一步：安装插件和npm包
安装eslint包 npm install eslint --save-dev
安装eslint包 npm install babel-eslint --save-dev
首先安装 VSCode 的插件 prettier-vscode和Eslint
image.png
第二步：编辑器配置
安装成功后，在IDE左下角找到设置按钮，点击进入编辑器 setting.json 文件中
image.png
image.png
在这里，我们可以对编辑器做各种自定义的配置。
配置文件：
{
"explorer.confirmDelete": false,
"workbench.iconTheme": "vscode-icons",
"todo-tree.tree.showScanModeButton": false,
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"window.zoomLevel": 0,
// 代码对齐：开启保存自动格式化，调用prettier时自动eslint-fix
"editor.formatOnSave": true,
// 代码对齐：设置默认格式化规则
"editor.defaultFormatter": "esbenp.prettier-vscode",
//eslint:配置项
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//eslint:配置项
"eslint.codeAction.showDocumentation": {
"enable": true
},
"explorer.confirmDragAndDrop": false,
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace"
}
}
第三步：在项目中添加.prettierrc.js和.eslintrc.js文件
image.png
.eslintrc.js 配置：
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
env: {
browser: true,
node: true,
es6: true,
},
globals: {
// 根据不同的项目环境自行配置
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
rules: {
'no-var': 2,//禁用var
semi: 2,//开启结尾分号
'no-console': 2, //禁用console
//还有一些规则可以去https://www.cnblogs.com/wuconghui/p/11275059.html
},
};
.prettierrc.js 配置：
module.exports = {
printWidth: 120, // 超过最大值换行
semi: false, // 句尾不添加分号
singleQuote: true, // 使用单引号代替双引号
trailingComma: 'es5', // 在ES5中有效的结尾逗号（对象，数组等）
bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
jsxBracketSameLine: true, // 在jsx中把'>' 是否单独放一行
jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
insertPragma: false,
tabWidth: 2, // 缩进字节数
arrowParens: 'avoid', // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
useTabs: false,
endOfLine: 'auto',
};
第四步：配置format命令和eslint命令
虽然完成第二、三步之后，每次编辑完文件在保存时，其都会自动做格式化处理。但对于已有项目，如何能快速将已有文件批量格式化呢？
是的没错，那就是在 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"
},
然后在控制台中运行 npm run format和npm run lint 即可对文件进行批量格式化处理。
image.png