Lint和Prettier区别

lint：代码质量校验，举例：eslint —fix会格式化代码
prettier：代码质量校验
但是他们的校验规则有一些交集，需要使用某些工具

Lint和Prettier配合

方案一

运行 Prettier 之后，再使用 eslint —fix 格式化一把，这样把冲突的部分以 ESLint 的格式为标准覆盖掉
1.先分别安装eslint和prettier
2.安装 prettier-eslint

  1. npm install --save-dev prettier-eslint prettier-eslint-cli

3.运行

npm prettier-eslint "src/**/*.js"

prettier-eslint 会一次执行 prettier 和 eslint —fix 命令

方案二

在配置 ESLint 的校验规则时候把和 Prettier 冲突的规则 disable 掉，然后再使用 Prettier 的规则作为校验规则
实现 prettier 规则对 eslint 规则的覆盖
1.安装 plugin

$ npm install --save-dev eslint-config-prettier

2.在 .eslintrc.* 文件里面的 extends 字段添加：

{
  "extends": [
    ...,
    "已经配置的规则",
   "prettier",
   "prettier/@typescript-eslint"
  ]
}

disable 掉更多的规则可以是如下

{
  "extends": [
    ...,
    "已经配置的规则",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/babel",
    "prettier/flowtype",
    "prettier/react",
    "prettier/standard",
    "prettier/unicorn",
    "prettier/vue"
  ]
}

3.完成上述两步可以实现的是运行 eslint 命令会按照 prettier 的规则做相关校验，但是还是需要分别运行 prettier 和 eslint 命令。社区有一个方案整合了上述两步，在使用 eslint —fix 时候，实际使用 prettier 来替代 eslint 的格式化功能
4.安装

$ npm install --save-dev eslint-plugin-prettier

插件配置：
https://github.com/prettier/eslint-plugin-prettier
所以总结作用：
eslint-config-prettier：禁用与代码格式风格相关的 ESLint 规则
eslint-plugin-prettier：一次性配置运行eslint-config-prettier
然后修改 .eslintrc.*

{
  "extends": [
    ...,
    "已经配置的规则",
    "plugin:prettier/recommended"
  ]
}

运行 eslint —fix 实际使用的是 Prettier 去格式化文件

参考地址：
https://www.jianshu.com/p/dd07cca0a48e