解决Eslint 和 Prettier 之间的冲突

#解决Eslint 和 Prettier 之间的冲突| 来源: 网络整理| 查看: 265

前言

最近学习前端的时候，在项目中同时使用了 eslint 和 prettier，结果这两个工具相互冲突，经过一番查阅资料得以解决，仅做学习笔记记录下来。

冲突的原因

项目中使用了vscode的eslint和prettier插件，并开启了保存时自动格式化和自动修复代码的功能，配置如下：

// .vscode/setting.json { // 保存时 prettier 自动格式化 "editor.formatOnSave": true, // 保存时自动启用 eslint --fix 自动修复 "editor.codeActionsOnSave": { "source.fixAll": true } } // .eslintrc { "env": { "browser": true, "es2021": true, "node": true }, "extends": ["eslint:recommended", "standard"], "parserOptions": { "ecmaVersion": 12, "sourceType": "module" }, "plugins": ["import", "node", "promise"], "rules": {} } // .prettierrc { // 使用双引号 "singleQuote": false, // 每行末尾添加分号 "semi": true } 复制代码

结果提示以下错误:

这里显示错误的原因是我在eslint中继承了eslint-config-standard，这套规则中推荐使用单引号，行末不添加分号,这与我的prettier配置相互冲突。理想状态下，由于开启了fixAll:true，那么 eslint --fix 在保存时应该会自动启动，按道理讲这个错误应该被修复，但是屏幕一闪之后又回到了这个状态。经过查阅资料，发现是因为eslint 的规则和 prettier 相冲突了，保存时先启用了 eslint --fix 修复了，然后又运行了 prettier 格式化，所以屏幕一闪又回到了这个状态。

解决办法

冲突的本质在于 eslint既负责了代码质量检测，又负责了一部分的格式美化工作,格式化部分的部分规则和 prettier不兼容。能不能让eslint只负责代码质量检测而让prettier负责美化呢? 好在社区有了非常好的成熟方案，即 eslint-config-prettier + eslint-plugin-prettier。

eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。 eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。安装依赖并修改.eslintrc文件 // 安装依赖 yarn add eslint-config-prettier eslint-plugin-prettier -D // .eslintrc { // 其余的配置 - "extends": ["eslint:recommended", "standard"] + "extends": ["eslint:recommended", "standard", "plugin:prettier/recommended"] // 其余的配置 } 复制代码

关键在于新增加的 plugin:prettier/recommended 这个规则。让我们看看它具体做了什么

// node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js module.exports = { // plugin:prettier/recommended 就是加载这个 configs: { recommended: { extends: ['prettier'], plugins: ['prettier'], rules: { 'prettier/prettier': 'error', 'arrow-body-style': 'off', 'prefer-arrow-callback': 'off', }, }, }, // 其他的 } 复制代码

plugin:prettier/recommended 这个语法就是加载了 node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js 文件导出的 configs 中的 recommended 配置项。下面解析他们分别做了什么。

extends: ['prettier']: 通过 eslint-config-prettier 关闭eslint和prettier 相冲突的规则。 plugins: ['prettier']: 加载 eslint-plugin-prettier，赋予 eslint 用 prettier 格式化文档的功能 'prettier/prettier': 'error': 让代码文件中不符合prettier格式化规则的都标记为错误，结合vscode-eslint插件便可以看到这些错误被标记为红色，当运行eslint --fix 命令时，将自动修复这些错误。 arrow-body-style 和 prefer-arrow-callback: 这两个规则在eslint 和 prettier 中存在不可解决的冲突，所以关闭掉。

至此, prettier 和 eslint 便可以无冲突协作，保存时候也能自动修复并格式化代码了。

注意事项

如果修改了.prettierrc的配置选项，会发现 eslint 和 prettier又冲突了，这是因为vscode插件缓存没有及时更新，重启下vscode即可。

总结

eslint 既负责检测代码质量又负责格式化，导致格式化时与 prettier 冲突。正所谓术业有专攻，格式化代码这等专业的事情就应该交给prettier 来做。通过 eslint-plugin-prettier + eslint-config-prettier 可以完美地解决冲突，使得二者能相互协作。

这篇文章只是简单地描述了eslint和prettier冲突的原因和解决办法。等有时间了再写一篇 eslint + prettier + husky + lint-staged + commit-lint 的终极指南，确保项目的代码质量。

【本文地址】

公司简介

联系我们