vue项目中eslint+prettier规范与检测代码 - 文章详情

背景

团队协作开发如果没有统一的代码规范，代码可读性会比较差，如果团队中每个人的vscode代码格式化插件的配置不统一时，在提交代码时会很容易产生代码冲突。因此在团队中，统一代码规范是很有必要的。统一代码规范不能只有一份文档规范靠大家自觉遵守，还需要借助于工具来强制大家统一格式，并能自动化帮助我们按规范格式代码。eslint和prettier就是比较出色的代码规范和代码检测工具。

Eslint

•eslint 主要用来检查语法问题，例如：声明一个变量应该 const 还是 let ，使用的变量有没有声明等等。•eslint 也可以用来检测代码风格问题，但是没有 prettier 做的好。

Prettier

•prettier 主要用来检查代码风格问题，它支持多种语言，我们这里讨论关于 JavaScript 的，例如应该使用单引号还是双引号，该不该换行，tab 键占多少个空格，结尾要不要分号等等问题。•使用 prettier 来处理代码风格的时候，就不要再同时使用 eslint 来处理代码风格问题了，两者同时使用可能会产生冲突，造成一些不必要的麻烦。

vsCode插件

在项目开发过程中我们经常想要及时的格式化代码，这样看起来更舒服。如果通过命令行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 -Dnpm i eslint-plugin-vue -Dnpm i eslint-config-prettier -Dnpm 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