前端规范化之eslint+prettier统一代码格式

一、背景&痛点

痛点：

• 在团队项目开发过程中和代码交接时，因个人编码习惯的不同往往出现代码风格不一致的情况，造成不必要的代码维护成本，有时甚至大于新功能的开发成本。
• 对于代码的版本管理（svn、git或者其他），代码格式不一致带来的问题是严重的，在代码一致的情况下，因为格式不同，文件被标记为 diff，导致无法检查代码和校验。

背景：

之前的 touch2.0 框架采用 eslint —fix 和编辑器自带的代码格式化工具来进行代码格式化，但存在以下缺点：

• 每种编辑器可能会有不一样的代码格式；
• eslint 的样式规则并不太准确，会与编辑器自带的格式化工具冲突。

二、解决办法

上述问题的原因在于 eslint 做的“太多”，最理想的情况应该是让eslint专心负责代码规则校验，而调整代码风格交给prettier来完成，各司其职，互不干扰。

prettier的优势

• 自身优势：支持多种语言、集成多数的编辑器、可配置化、规则更加准确合理。
• 其他优势：能够完美的配合 eslint 使用，减轻 eslint 的工作，因为将代码样式校验交给了 prettier，所以可以将代码校验的规则更准确地应用到代码真正的规范上面。

此外，prettier在代码风格的一些细节上做得很好，在实际体验之后，才能感受到prettier的好用。

实际效果：

三、使用 prettier

这里以vsCode编辑器为例

（一）、安装 prettier

// 使用yarn：
yarn add prettier --dev --exact
// 全局安装
yarn global add prettier

//使用npm：
npm i -D --save-exact prettier
// 全局安装
npm i --global prettier

（二）、配合 eslint 检测代码风格

前提是你的项目中已经使用了 esLint，有 eslintrc.js 配置文件，这个 touch2.0框架已经具备，不再赘述。

禁用 eslint 风格校验：

prettier 的少数代码风格与 eslint 的代码风格存在冲突，事实上，eslint 几乎与所有主流格式化工具的代码风格存在冲突，这样就会造成代码格式化之后，eslint 大量警告扑面而来。所以，首先我们要让 eslint 对代码风格“放手”，专注于代码规则。
安装插件：

npm i -D eslint-config-prettier

配置eslintrc.js：

{
  extends: ['prettier']
}

通过使用eslint-config-prettier插件，能够关闭一些不必要的或者是与 prettier 冲突的 eslint 规则。使用的时候需要注意 prettier 必须要在extends的最后一项。

使用 eslint 运行 prettier：

安装插件：

npm i -D eslint-plugin-prettier

eslint-plugin-prettier插件能调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier标记。
接下来，需要在 eslintrc.js 配置文件中添加 rules，“prettier/prettier”: “error”，表示在被prettier标记的地方抛出错误信息：

// .eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

完成第二步就可以使用命令行来格式化你的代码了：
在package.json的scripts下添加如下代码，然后使用npm run format，就能监听src目录下的文件并进行格式化，可以添加多个文件列表：

"scripts": {
  "format": "onchange 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}"
}

但是这种方式不太灵活，也不够方便。所以强烈推荐安装 prettier 插件 Prettier - Code formatter。

（三）、安装 prettier 插件 Prettier - Code formatter

在 VS Code 扩展中搜索Prettier - Code formatter进行安装即可：

安装插件后，调出系统设置 settings.json 并将 prettier 设置为默认格式化工具，可以为所有语言或特定语言设置此项：

{
  // 所有语言
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 特定语言
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  ···
}

这样，我们就可以使用shift+alt+f（vsCode默认快捷键）来格式化代码，可以对单个文件格式化。

还可以通过修改vsCode设置，实现保存既格式化
"editor.formatOnSave": true,

（四）、prettier 配置

prettier 的配置不是必须的，如果不配置，prettier 会按照 .editorconfig 配置文件的规则去校验，但不建议这样做。

prettier 的默认规则足够准确，但我们仍然可以配置我们想要的风格。一共有三种方式支持对 prettier 进行配置：

1. 根目录创建 .prettierrc 文件，能够写入YML、JSON格式的配置，带有可选扩展名：（.json/.yaml/.yml无扩展名优先）；
2. 根目录创建 .prettierrc.js 或 .prettier.config.js 文件，并对外export一个对象；
3. 在package.json中新建prettier属性。

我在项目中使用的是根目录 .prettierrc 文件配置方式：

{
  "tabWidth": 2, // 一个tab代表几个空格数，默认2
  "useTabs": false, // 是否使用tab进行缩进，默认false
  "singleQuote": true,// 字符串是否使用单引号，默认false
  "trailingComma": "es5",// 是否使用尾逗号，可选值"<none|es5|all>"，默认none
  "printWidth": 100,// 每行最大字符数，超过会换行，默认80
  "endOfLine": "auto",// 行尾换行方式，可选值"<auto|lf|crlf|cr>"，默认auto
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

以上为我的项目中使用的配置，更多配置项可参考：https://prettier.io/docs/en/options.html

（五）、提交即格式化

prettier 还可以很好的集成的项目中，利用git的hooks机制，在提交commit时自动调用 pretter 进行格式化。实现这一点，还需要 Huksy、pretty-quick 这两个工具。

Husky：可以方便的让你通过npm scripts来调用各种git hooks；
pretty-quick：在更改的文件上运行Prettier。

安装husky，pretty-quick：

npm install pretty-quick husky --save-dev

在package.json中添加：

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}

这样在进行git提交的时候代码就会自动进行格式化了。

总结

上述规范目前已在项目中实践，实际体验良好，使用 eslint+prettier 的规范代码优点总结如下：

• 几乎不需要纠结，因为  prettier 的可配置化和非常简单的配置方法；
• 团队开发，不需要开发人员学习代码风格，保存既是规范；
• 避免不符合规范的代码提交，减少代码版本维护成本；
• 不需要去修复 eslint 报告的风格问题。