团队协作开发如果没有统一的代码规范,代码可读性会比较差,如果团队中每个人的vscode代码格式化插件的配置不统一时,在提交代码时会很容易产生代码冲突。因此在团队中,统一代码规范是很有必要的。统一代码规范不能只有一份文档规范靠大家自觉遵守,还需要借助于工具来强制大家统一格式,并能自动化帮助我们按规范格式代码。eslint和prettier就是比较出色的代码规范和代码检测工具。
•eslint 主要用来检查语法问题,例如:声明一个变量应该 const 还是 let ,使用的变量有没有声明等等。•eslint 也可以用来检测代码风格问题,但是没有 prettier 做的好。
•prettier 主要用来检查代码风格问题,它支持多种语言,我们这里讨论关于 JavaScript 的,例如应该使用单引号还是双引号,该不该换行,tab 键占多少个空格,结尾要不要分号 等等问题。•使用 prettier 来处理代码风格的时候,就不要再同时使用 eslint 来处理代码风格问题了,两者同时使用可能会产生冲突,造成一些不必要的麻烦。
在项目开发过程中我们经常想要及时的格式化代码,这样看起来更舒服。如果通过命令行CLI操作的话就比较麻烦。为此官方也提供了编辑器插件,我们可以通过快捷键方便的对文件进行格式化,或者设置保存时自动格式化
在vsCode的extensions中搜索Prettier-Code formater 并安装。如果有其他格式化工具(例如vetur格式化工具没有禁用),我们在settings.json文件中加入如下配置,让vue文件使用prettier作为默认的格式化工具。此时我们就可以用快捷键方便的使用prettier进行格式化
Prettier插件也会读取.prettier中的配置用于格式化。如果settings.json中也对prettier进行了配置(例如”prettier.semi”:true)将会被.prettier中的配置覆盖。
前提:vscode 安装 eslint prettier插件
1.安装eslint prettier 和相关依赖
npm i eslint prettier -D
npm i eslint-plugin-vue -D
npm i eslint-config-prettier -D
npm i eslint-plugin-prettier -D
prettier 补充知识
•eslint-config-prettier
关闭 Eslint
中与 Prettier
冲突的选项,只会关闭冲突的选项,不会启用Prettier
的规则•eslint-plugin-prettier
启用 Prettier
的规则
通过使用eslint-config-prettier配置,能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保,这个配置在extends的最后一项。
eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查,其原理是先使用prettier对你的代码进行格式化,然后与格式化之前的代码进行对比,如果过出现了不一致,这个地方就会被prettier进行标记。
2.新建.prettierrc.js
// .prettierrc.js prettier代码检查规则:
module.exports = {
// 最大长度80个字符
printWidth: 80,
// 行末分号
semi: false,
// 单引号
singleQuote: true,
// JSX双引号
jsxSingleQuote: false,
// 尽可能使用尾随逗号(包括函数参数)
trailingComma: 'none',
// 在对象文字中打印括号之间的空格。
bracketSpacing: true,
// > 标签放在最后一行的末尾,而不是单独放在下一行
jsxBracketSameLine: false,
// 箭头圆括号
arrowParens: 'avoid',
// 在文件顶部插入一个特殊的 @format 标记,指定文件格式需要被格式化。
insertPragma: false,
// 缩进
tabWidth: 2,
// 使用tab还是空格
useTabs: true,
// 行尾换行格式
endOfLine: 'auto',
HTMLWhitespaceSensitivity: 'ignore'
}
3.修改.eslintrc.js
// ESlint 检查配置
module.exports = {
root: true,
parserOptions: {
parser: 'vue-eslint-parser',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['eslint:recommended', 'plugin:prettier/recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
// 表示被prettier标记的地方抛出错误信息
"prettier/prettier": "error"
}
}
4.vscode 首选项-设置-settings.json
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // 保存时自动修复
},
"editor.fontSize": 18, // vscode编辑器字体大小
"editor.detectIndentation": false,
"editor.tabSize": 2, // 统一编辑器tab为2个空格
"javascript.validate.enable": true,
"sync.gist": "4b16271e70016a1fb3b98d85e34f874c",
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"editor.formatOnSave": true
}
项目中统一代码规范和检测代码,需要通过仓库中安装eslint prettier以及相关的npm包来实现,并通过配置文件进行规则的配置。将具体的规则放在配置文件的目的是因为这些配置在我们的项目git仓库中,配置完成之后,团队中的同学只需要拉取代码就可以统一我们的代码规则了。
当然也有一个缺点就是,如果有多个项目,可能需要配置多次。另外我们还需要借助vscode的插件来帮助我们在编辑代码保存时自动的校验修正。比如我们在设置规则时,对tab的空格长度可以通过eslint配置文件配置,但可能会和我们的vscode的tab空格长度配置有冲突。这就需要我们在settings.json中统一配置。
上面的配置方式不是固定的,找到适合自己团队的才是最重要的。不论具体的规则是配置在.eslintrc.js或.prettierrc.js中,还是统一配置在settings.json中,只要团队中达成一致就可以。
[1]
eslint+prettier规范与检测代码: https://my.samyz.cn/rat-summ/pages/e58bf8/[2]
使用ESLint+Prettier来统一前端代码风格: https://segmentfault.com/a/1190000015315545