全面搞懂ESLint与Prettier

区别

一开始接触 ESLint 总是与 Prettier 分不清应该使用哪个，他们之间到底有什么区别
那就先要了解 ESLint 与 Prettier 都分别有哪些功能和作用

ESlint

• 可以做简单的代码风格检测和限制
• 可以对 js 语法进行检测限制
  but
• 只能检测 js，ts，vue 中的 js 等 js 语言，无法检测和限制 css 的代码风格

Prettier

• 可以对代码风格进行检测和限制
• 可以检测和限制 js，ts，css 等多种类型文件和语言
  but
• 不能对代码语法进行检测和限制

小结

简单的说就是 ESlint 限制语法（对与错），Prettier 限制风格（好与坏）
这样区分就很明显，ESlint 主要解决了团队开发时，每个人写代码的严谨程度，让项目出 BUG 几率大大降低，而 Prettier 则是让张三、李四写的代码看起来风格统一，即使后来王五加入项目，也能很快上手项目，不会让项目代码看起来杂乱不堪。

应该使用哪个？

知道了两者的区别后，就是如何在项目中使用。
首先要明确一点，ESLint 也是自带一些风格检测时限制，例如缩进，结尾分号等，这些 Prettier 中也有限制，那么如果同时使用 ESLint 和 Prettier，应该听谁的呢？
事实上，如果你真的在同一个项目中分别使用了 ESLint 和 Prettier，且不做任何处理，那么在安装 IDE 插件后，格式化时两者都会介入并格式化代码，在 IDE 中的表现就是，鬼畜了一下。
因此通常的做法是：让 ESLint 去做语法检测，让 Prettier 去接管风格检测，让 Prettier 的风格检测覆盖 ESLint 的风格检测。

怎么使用？

安装 ESLint

首先在已经初始化 npm 的项目中（npm init）安装 eslint

npm i eslint -D
# or
yarn add eslint -D

然后初始化 eslint

# 安装eslint全局命令后
eslint --init
# 未安装eslint全局命令
npx eslint --init

根据项目实际情况选择选项
这里以一个 vue3 项目为例子，我们一次选择

To check syntax and find problems
JavaScript modules (import/export)
Vue.js
No
Browser
JavaScript
Yes
npm

这里 eslint 会帮我们创建好基础的 config 文件.eslintrc.js
这个文件中包含，eslint 默认使用哪套规则，使用什么插件，和自定义规则

"extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential"
],

其中extends表示你希望使用的默认规则，这里 ESLint 自带了一套推荐规则，即eslint:recommended,ESLint 的 vue 插件也提供了一套必要规则，即plugin:vue/vue3-essential，这里我还推荐两个 vue3 相关的规则'plugin:vue/vue3-strongly-recommended'和'plugin:vue/vue3-recommended',
最终的extends是这样的

'extends': [
  "eslint:recommended",
  'plugin:vue/vue3-essential',
  'plugin:vue/vue3-strongly-recommended',
  'plugin:vue/vue3-recommended',
],

值得注意的是，这里的extends是有先后顺序的，即后面的推荐规则会覆盖前面推荐规则中出现的规则。
如果你的项目是 vue2 的，那也可以将这几个推荐规则中的vue3改成vue,那么就是 vue2 的推荐规则了
配置好 eslint 后，我们首先可以在项目中尝试写一个不符合规则的文件，然后使用 eslint 命令将其更正，如果可以检测或更正，那就说明安装的没有问题。
我们可以在rules中添加一条简单的规则来验证

'rules': {
   'no-unused-vars':1
}

这条规则表示在 js 中不能出现未使用的变量，我们去项目中 const 一个变量 a，然后不要使用它。
在项目根目录执行

eslint --ext .js,.vue .

来检测项目文件是否符合规则。
如果检测出我们在 js 中设置的变量 a，那么说明安装的没有问题，可以进行下一步操作。
接下来就是配置 IDE，使它能在你编辑保存代码的时候直接检测和修改你的代码错误，这里以 vscode 举例。

在 vscode 中使用 ESLint

在 vscode 插件中搜索 ESLint，并安装
然后进入首选项，将保存时自动格式化勾选，由于你的 vscode 可能之前还安装了别的格式化工具，如Beautify，这是你需要在项目代码中右击，然后选择使用...格式化，然后再下拉菜单中选择配置默认格式化程序，在选择 ESLint，这是 eslint 插件就可以在你保存或者使用快捷键时格式化代码了。

需要在 vscode 中开启Format On Save选项才能在保存时自动格式化（使用设置的默认格式化程序）

需要注意的是，这里的 eslint 插件使用的是你项目内的依赖包和规则，也就是说，如果你的项目中没有安装 eslint 依赖，或没有规则文件，那它将无法工作。
关于在普通（非模块话开发）项目中如何使用 eslint，请点这里

小结

• 在项目中安装 eslint 依赖
• 安装项目需要的 eslint 插件，插件会默认带一些推荐规则
• 在 extends 中添加插件自带规则
• 安装 vscode 的 eslint 插件
• 设置 vscode 默认格式化程序为 eslint
• 开启保存时自动格式化

到此，eslint 的配置部分已经完成，如果你还希望格式化 css 部分，或将整个代码风格交给 Prettier 做，那么你还需要使用 Prettier。

Prettier

首选需要在项目内安装 prettier 包

npm i prettier -D

这里本来是可以直接用 prettier 自带的命令和配置文件来格式化和创建规则的，但是笔者认为，既然要和 eslint 配合使用，那么尽量把所有规则，命令都由其中一方来完成最好，eslint 显然比较适合。
因此我们需要安装 eslint 的两个插件来处理 eslint 和 prettier 中规则冲突的部分，其实就是将 eslint 的规则屏蔽，而使用 prettier。

npm i eslint-config-prettier eslint-plugin-prettier -D

这里我还添加了一个 vue 使用的 prettier 用的包

npm i vue/eslint-config-prettier -D

然后我们需要在 eslint 的配置文件中增加 prettier 的推荐规则

'extends': [
  ...
  "plugin:prettier/recommended",
],

然后开始自定义 prettier 的规则，这里其他博主都是新建一个 prettier 的 rc 文件，这样就会 eslint 和 prettier 的规则分开，笔者不建议这样，因此我们在 eslint 的配置文件中新建一条规则

'rules': {
  "prettier/prettier": [
    "error",
    {
      "printWidth": 80,
      "tabWidth": 2,
      "useTabs": false,
      "singleQuote": true,
      "semi": false,
      "trailingComma": "es5",
      "bracketSpacing": true,
      "jsxBracketSameLine": false,
      "arrowParens": "avoid"
    }
  ],
}

这里表示 prettier 的错误都是error方式处理，第二个参数里就可以填写你需要的 perttier 规则了。
此时你依然可以使用刚刚的方法用命令去验证规则是否生效

在 vscode 中使用 prettier

关于在 vscode 中使用 prettier，很多博主说要下载Prettier - Code formatter这个插件，
但是笔者试了，按照这个方法，不安装 Prettier 插件也可以，因为我们使用的是全部由 eslint 处理，没有 Prettier 配置文件，所以安装了 Prettier 插件，他也是没有规则文件让他处理的。

总结

• ESLint 处理语法，Prettier 处理风格
• 添加 eslint 插件让 ESLint 处理 Prettier 的代码风格
• 添加 vscode 插件让 eslint 能在保存时直接格式化代码