代码规范之eslint和prettier的配合使用

孜然aa
239 阅读4分钟

前言

代码规范对每一个开发团队来说都是重中之重，它不仅能使代码变得易读，在一定程度上也能提高团队的开发效率。前端使用一般使用eslint和prettier来约束代码规范。这两者分别有啥作用呢？

-     eslint： 主要负责代码格式和代码质量的校验
-     prettier： 主要负责代码格式的校验，不会对代码质量进行校验
-     代码格式问题通常指的是：单行代码长度、tab 长度、空格、逗号表达式等问题。
-     代码质量问题指的是：未使用变量、三等号、全局变量声明等问题

所以eslint用来在代码质量出现问题时给出校验提示，而prettier则是进行代码格式进行格式化。虽然eslint也有代码格式的功能，但是它的局限性很多，比如无法检测css、html等类型的文件，而且它对代码的格式化不如prettier中的规则更加完善。所以遇到代码质量问题eslint就会排上用场，遇到代码格式问题，就由prettier来格式化。

注意：由于eslint也有代码格式的校验规则，这就会导致在代码格式上eslint会与prettier产生冲突。例如：(后面会讲述解决方案)

 // eslint中规定不需要加结尾的分号,如果有分号就报错(.eslintrc)
 {
     semi: 2
 }
 // prettier中格式化是添加分号(.prettierrc)
 {
     semi: true
 }

eslint的安装和使用

  1. 使用eslint很简单，首先npm init -y，初始化包生成package.json文件。再建一个demo.js文件可以用于测试。

  2. npm i eslint -D安装 eslint （也可以全局安装）

  3. 使用npx eslint --init生成 eslint 的配置文件.eslintrc。（执行命令后会有一些选项，参看下图）

    image.png

  4. 选完以后自动生成.eslintrc文件，执行npx eslint demo.js,检验示例文件。

    image.png

  5. 此时eslint已生效,提示a和test2定义了值但没使用。引用后提示消失。如果有样式校验类的提示可以使用npx eslint . --fix进行修复。

那么问题来了，只有当我执行eslint校验命令的时候才会检测，这样很不利于开发，我们想要的效果是我只要写出的代码不符合eslint的标准就自动可以给我检测。基于此，eslint插件诞生了。在vscode中安装eslint插件，然后修改代码，可以发现eslint已经可以实时进行检测了。 image.png

prettier的配合和使用

  1. prettier的配置和eslint类似。首先创建一个配置文件.pretterrc.js（可以是js或json，看个人喜好）在里面随便添加几条规则方便测试。
  2. npm i prettier -D下载prettier的npm包
  3. 执行指令npx prettier --write .,执行可以看到代码按照prettier的规则进行了格式化。但是prettier和eslint有同样的问题，每次都必须执行指令才能进行格式化。在此基础上，prettier的插件出现了。
  4. 在vscode中安装Prettier-CodeFormatter,在settings文件中配置自动保存。
//setting.json文件 
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 
"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }，
  1. 配置完成后修改代码进行测试，代码可以按照规则正常格式化。

eslint和prettier冲突

如上所说，prettier和eslint在样式规则上会产生冲突。这个时候一般会用prettier上的规则覆盖eslint的规则。操作也很简单，只需要安装两个npm包即可解决。

  1. 执行npm i eslint-config-prettier eslint-plugin-prettier -D安装两个npm包

  2. 添加配置如下图即可

    image.png

eslint-config-prettier 作用是如果两者规则冲突，使prettier的规则覆盖eslint

eslint-plugin-prettier 作用是使eslint按照prettier的规则来进行校验

至此，eslint和prettier的配置已经完成。当然还需要注意一点。当修改.prettierrc.js中规则时，eslint不会立即采用，需要重启vscode。

vscode插件和npm中的包有什么区别（eslint/prettier）

npm中下载的eslint/prettier只用于项目中，当执行 lint 指令时进行校验。不会实时监听代码变化去校验。而vscode中的插件启用时则开启一个服务实时监听代码变化，当代码不符合规范时从而给出提示。vscode插件只是方便我们自己开发，我们无法要求每个人都安装vscode的插件。但是npm包在一个团队中是公有的，所以才在npm中下载eslint和prettier的包可以用于团队中只需要执行指令就可以进行校验。

撰文不易，点赞鼓励

看过来 知识积累

avatar
文章
阅读
粉丝