banner.png

一、背景：

开发Vue或者React的项目的时候，我们经常用到ESLint进行代码的校验，ESLint极大的提高了团队代码的一致性和规范性，可以减少许多低级错误。
当代码出现不符合规范的格式的时候，ESLint会在控制台提示相关的异常信息，手动修复无疑带来了极大的编码成本。
但如果ESLint的配置可以自动修复代码和格式化的话，这将极大的提高我们的生产力。
ESLint 可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义，而 Prettier 作为代码格式化工具，能够统一你或者你的团队的代码风格。
使用工具去约束规范，比单纯的口头约定有更强的约束性，而且过程是无感知的。
本文将详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格，并强制加入规范到项目代码中，最后通过自动化的格式化方式来保障团队代码质量

二、IDE&插件：

三、安装与配置：

1. 使用EditorConfig配置IDE和编辑器

EditorConfig允许您为任何文件类型定义缩进样式和其他空白设置。这样您的编辑器就可以自动选择正确的设置。当开发人员使用具有不同行结尾的平台时，例如Mac和Windows，这很方便。
以下是典型的配置（.editorconfig），其中包含Markdown，JSON和YAML文件的单独规则：

.editorconfig

  1. root = true
  3. [*.{js,jsx,ts,tsx,vue}]
  4. indent_style = space
  5. end_of_line = lf
  6. charset = utf-8
  7. trim_trailing_whitespace = true
  8. insert_final_newline = true
  9. [*.{json,yml,md}]
  10. indent_style = space
  11. indent_size = 2

EditorConfig由流行的IDE和编辑器通过插件提供支持。

2. 配置prettier、eslint、vetur

vscode搜索插件 Eslint、Vetur、Prettier安装
Prettier是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制执行一致的样式，并在必要时包装代码。
如今，它已成为解决所有代码格式问题的优选方案；支持 JavaScript、 Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JSON、 Markdown 等语言，
Prettier具有以下几个有优点：

  1. 几乎不需要做决定，因为  Prettier 的配置选项很少。
  2. 团队成员不需要为规则去争论。
  3. 开源代码开发者不需要去学习项目的代码风格。
  4. 不需要去修复 ESLint 报告的风格问题。
  5. 保存文件的时候可以自动统一风格。

Prettier 可以在保存文件的时候可以自动统一风格：
ESLint 和 Prettier 输出团队统一代码风格 - 图2

For 老项目
如果你的项目中采用的是eslint默认规则并且没有添加别的规则、没有使用standard或airbnb等风格预设，你可以下载编辑器插件，
prettier 覆盖 vscode 默认格式化快捷键，但没有针对 eslint 配置进行格式化，所以需要单独配置用户设置开启。
找到 首选项->设置 菜单，在右侧 用户配置 中添加 "prettier.eslintIntegration": true 开启 eslint 支持。
以下配置是推荐配置

  2. "eslint.autoFixOnSave": true, //保存时自动修复eslint错误
  3. "eslint.validate": [  //eslint 验证文件类型
  4.   "javascript",
  5.   "javascriptreact",
  6.   "jsx",
  7.   {
  8.     "language": "html",
  9.     "autoFix": true
  10.   },
  11.   {
  12.     "language": "vue",
  13.     "autoFix": true
  14.   }
  15. ],
  19. ，对于老项目可能会导致保存时批量格式化后样式变动的问题，但你任然可以通过 option + shift + f 来使用prettier插件格式化

For 新项目
新项目可以采用更加严格的规范保障代码质量。使得代码库从刚开始编写，风格就是符合标准的, 此时，我们可以将 eslint 和 prettier 的风格配置安装到项目中

安装prettier
npm install prettier eslint-config-prettier eslint-plugin-prettier -D

安装eslint
npm install eslint eslint-plugin-vue babel-eslint -D

集成 eslint & prettier

eslint-plugin-prettier 公开了一个 “recommended” 配置，将 plugin:prettier/recommended 添加到 extends 的子属性 plugin:vue/essential 之后，以默认设置在 ESLint 中启用对 Prettier 的支持：
eslint-plugin-prettier 扩展了eslint的规则，它通过对比格式化前和用 Prettier 格式化后的代码，有不一致的地方就会报错，然后你可以手动运行 eslint —fix 来修复。

.eslintrc.js

  1. module.exports = {
  2.   root: true,
  3.   env: {
  4.     node: true
  5.   },
  7.   plugins: ['vue'],
  8.   rules: {},
  9.   parserOptions: {
  10.     parser: 'babel-eslint' // 增加对es6的语法支持
  11.   },
  13.   extends: [
  14.     'plugin:vue/essential',
  15.     'plugin:vue/recommended',
  16.     "plugin:prettier/recommended", //使用prettier 推荐配置
  17.     'prettier/vue' //忽略 eslint里vue 和 prettier冲突的部分，采用prettier的规则
  18.   ]

禁用eslint 起冲突规则的部分

不过 Prettier 的格式化很可能和你使用的 ESLint 配置冲突，比如你的 ESLint 设定的不使用分号，而 Prettier 默认使用分号，这时候你需要配置 Prettier 让它不使用分号。反之如果你想使用 Prettier 的规则而不是 ESLint 的，为防止 ESLint 报错。
您需要知道的是，两者混合使用时候，需要修改规则，以防止重复或冲突；eslint-config-prettier即为解决此问题的存在，可以使用它关闭所有可能引起冲突的规则，eslint-config-prettier 是一个配置包，具体使用的时候应该这样加，确保prettier相关配置总是在最后，不然规则可能被覆盖

  1. {
  2.   "extends": [
  3.     "some-other-config-you-use",
  4.     "prettier",
  5.     "prettier/@typescript-eslint",
  6.     "prettier/babel",
  7.     "prettier/flowtype",
  8.     "prettier/react",
  9.     "prettier/standard",
  10.     "prettier/unicorn",
  11.     "prettier/vue"
  12.   ]
  13. }

如果你使用了一种代码风格，比如airbnb，但是和prettier又有起冲突的部分，建议添加 "prettier/that-plugin"，假如 eslint-config-airbnb 启用了 eslint-plugin-react规则，那 prettier/react 是需要的

  1. {
  2.   "extends": [
  3.     "airbnb",
  4.     "prettier",
  5.     "prettier/react"
  6.   ]
  7. }

eslint-config-prettier还附带一个CLI工具，可帮助您检查配置是否包含任何不必要的规则或与Prettier冲突的规则。
首先，为package.json添加一个脚本：

  1. {
  2.    "scripts"：{
  3.      "eslint-check"："eslint --print-config。| eslint-config-prettier-check"
  4.   }
  5. }

然后运行 npm run eslint-check。
退出代码：

  • 0：没有发现问题。
  • 1：意外错误。
  • 2：发现冲突规则。

修改prettier规则配置

事实上，当在项目中如此配置，可能会出现些“诡异”的报错，即便采用如上修复，也无法解决；而且这也不是您预期的提示；
error: Delete ⏎ (prettier/prettier) at src/pages/xxx
此时，可以对规则进行甄别、梳理，择选出适宜的规则；对于此，您可以参考 Configuring Prettier Options & eslint-plugin-prettier#options；依据个人编码习惯，有采取如下配置：

  1. rules: {
  2.   'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  3.   'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  4.   "vue/attributes-order":'error', // vue 里属性按规律排序
  5.   "prettier/prettier": ['error',{
  6.     "singleQuote": true,
  7.     "semi":false, // 更多自定义规则 https://prettier.io/docs/en/options.html
  8.   }]
  9. }

至此，项目代码里已经配置了严格的 eslint + prettier 代码风格约定，command + s 时刻保存，就会帮你格式化代码，形成统一的团队代码风格

3. Pre-commit约束代码提交

以上探讨了如何运用 ESLint ＆ Prettier 写出优质代码，这都是针对个人的推荐性行为；为保证团队统一代码风格，则必须采取些手段以强制约束；假如您的团队使用 Git 作为代码管理工具，在 commit 行为及之前进行甄别约束，是很棒的选择；于此，可借助 husky & lint-staged 来实现之。

  1. # install husky & lint-staged
  2. npm install lint-staged husky -D
  4. # package.json config
  5. {
  6.   "lint-staged": {
  7.     "linters": {
  8.       "*.{js,vue}": [
  9.         //"eslint --fix", # 自动修复代码eslint错误和格式化，这个按需使用
  10.         "eslint",
  11.         "git add"
  12.       ]
  13.     },
  14.     "ignore": [
  15.       "**/dist/*.js"
  16.     ]
  17.   }
  18. }

值得一提的是，在实际项目中， husky 很可能由于各种原因，导致不能很好的工作；这多半是由于 .git/hooks/pre-commit 与期待目标不匹配所致，您可以手动修改，也可以采取如下办法 (备注：如果您的 husky 版本在 0.14 及以上)：

四、 写在最后

在编写高质量代码时付出的努力越多，花在调试上的时间就越少。如果为项目开发工作流程，做了足够充分而适宜的建设，这不仅可以极大提升代码编写质量与速度，同时可节省调试、解决问题时间开销，而且还能避免无端而起的坏心情，从而更进一步促进工作效率，如此造就的这份优质循环，可以使得您拥有更多时间去学习、折腾、品味人生

参考资料：