当前位置: 首页>前端>正文

Prettier 和 ESLint 冲突解决方案 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# oryarn add eslint -D

然后初始化 eslint

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

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

这里 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 能在保存时直接格式化代码

https://www.xamrdz.com/web/23n1962304.html

相关文章: