在开发中,我们很难自己一个人独立开发一个完整的项目,大多数都是和同事共同合作开发。在合作开发中,代码规范和习惯就显得非常重要。大家一致的时候就会提高合作开发的效率,所以我们主要工具登场了。团队关于代码风格必须遵循两个基本原则:

  1. 少数服从多数;
  2. 用工具统一风格。

如何使用ESLint + Prettier来统一我们的前端代码风格。

Prettier

Prettier是一个能够完全统一你和同事代码风格的利器,假如你前端的同事,你发现你们代码风格完全不一样,你难道要一行行去修改他的代码吗,就算你真的去改,你的需求怎么办,所以没有人真的愿意在保持代码风格统一上面浪费时间。选择Prettier能够让你节省出时间来写更多的bug(不对,是修更多的bug),并且统一的代码风格能保证代码的可读性。

ESLint

代码规则检查工具,检查出代码有不符合规则的,报错。

ESLint+Prettier

首先肯定是需要安装prettier,并且你的项目中已经使用了ESLint,有eslintrc.js配置文件。

  1. npm i -D prettier

配合ESLint检测代码风格

安装插件:

  1. npm i -D eslint-plugin-prettier

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

  1. //.eslintrc.js
  2. {
  3. "plugins": ["prettier"],
  4. "rules": {
  5. "prettier/prettier": "error"
  6. }
  7. }

.
借助ESLintautofix功能,在保存代码的时候,自动将抛出error的地方进行fix

如果与已存在的插件冲突怎么办

  1. npm i -D eslint-config-prettier

通过使用eslint-config-prettier配置,能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保,这个配置在extends的最后一项。

  1. //.eslintrc.js
  2. {
  3. extends: [
  4. 'standard', //使用standard做代码规范
  5. "prettier",
  6. ],
  7. }

这里有个文档,列出了会与prettier冲突的配置项。

同时使用上面两项配置

如果你同时使用了上述的两种配置,那么你可以通过如下方式,简化你的配置。

  1. //.eslintrc.js
  2. {
  3. "extends": ["plugin:prettier/recommended"]
  4. }

如何对Prettier进行配置

一共有三种方式支持对Prettier进行配置:

  1. 根目录创建.prettierrc文件,能够写入YML、JSON的配置格式,并且支持.yaml/.yml/.json/.js后缀;
  2. 根目录创建.prettier.config.js文件,并对外export一个对象;
  3. package.json中新建prettier属性。

下面我们使用prettierrc.js的方式对prettier进行配置,同时讲解下各个配置的作用。

  1. module.exports = {
  2. "printWidth": 80, //一行的字符数,如果超过会进行换行,默认为80
  3. "tabWidth": 2, //一个tab代表几个空格数,默认为80
  4. "useTabs": false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减
  5. "singleQuote": false, //字符串是否使用单引号,默认为false,使用双引号
  6. "semi": true, //行位是否使用分号,默认为true
  7. "trailingComma": "none", //是否使用尾逗号,有三个可选值"<none|es5|all>"
  8. "bracketSpacing": true, //对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
  9. "parser": "babylon" //代码的解析引擎,默认为babylon,与babel相同。
  10. }

总结

有了prettier保存后就能自动format,也不用为了项目代码不统一和同事争论得面红耳赤,因为我们统一使用prettier的风格。可能刚开始有些地方你看不惯,不过不要紧,想想这么做都是为了团队和睦,世界和平,我们做出的牺牲都是必要的。而且prettier的样式风格已经在很多大型开源项目中被采用,比如reactwebpackbabel