如何解决vscode中ESLint和prettier冲突问题
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
注意：这个冲突问题一般是指在代码编辑器中出现的问题，这里使用的是vscode。
在前端开发中，很多人使用 prettier 作为代码格式化工具，用 ESLint 控制代码风格，以及检查错误。
但是在同时使用 ESLint 和 prettier 的时候，由于代码规则不一样就会发生冲突，发生冲突的原因是：在保存文件时，**ESLint 先修复了代码符合 ESLint 的代码风格，之后 prettier 又格式化了代码，导致代码不符合 ESLint 规则了。**所以代码就会出现 ESLint 的警告或报错提示。
起初想的是把 prettier 规则配置的和 ESLint 一致，但是由于规则不一样，不可能完全兼容。
之后有一个折中的方法，在 vscode 中，如果把保存文件时不格式化文件开启，就不会自定调用 prettier 规则格式化代码了，这样就能符合 ESLint 规范了。
但是还有一个问题是 ESLint 修复主要针对的是 js 和 ts 的代码，对于其他的代码如 html、css 等文件还是得用 prittier，所以这种方法也有局限性。
解决方案1
在 vscode 中安装插件 prettier-eslint 插件，这个插件的工作原理是先使用 prettier 格式化，然后再使用 ESLint 检查和修复，这样就能符合 ESLint 代码风格了。
插件介绍链接：https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint
插件安装完成后，将此插件设置为工作区或用户中文件类型的默认格式化程序，在 vscode 配置文件中添加以下代码：
{
// 保存时使用 ESLint 修复可修复错误
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
// "editor.formatOnPaste": false, // required
// "editor.formatOnType": false, // required
// "editor.formatOnSave": true, // optional
// "editor.formatOnSaveMode": "file", // required to format on save
// "files.autoSave": "onFocusChange" // optional but recommended
}
配置完成后，重启 vscode 后生效。
解决方案2
在 vscode 中安装插件 PEF: Prettier & Eslint Formatter 插件，这个插件的工作原理是先使用 prettier 格式化，然后再使用 ESLint 检查和修复，这样就能符合 ESLint 代码风格了。
插件介绍链接：https://marketplace.visualstudio.com/items?itemName=jonwolfe.prettier-eslint-formatter
插件安装完成后，将此插件设置为工作区或用户中文件类型的默认格式化程序，在 vscode 配置文件中添加以下代码：
{
"[javascript]": {
"editor.defaultFormatter": "jonwolfe.prettier-eslint-formatter",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
},
"[javascriptreact]": {
"editor.defaultFormatter": "jonwolfe.prettier-eslint-formatter",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
},
"[typescript]": {
"editor.defaultFormatter": "jonwolfe.prettier-eslint-formatter",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
},
"[typescriptreact]": {
"editor.defaultFormatter": "jonwolfe.prettier-eslint-formatter",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
}
}总结
到此这篇关于如何解决vscode中ESLint和prettier冲突问题的文章就介绍到这了,更多相关vscode ESLint和prettier冲突解决内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要为大家介绍了Jenkins定时构建时间设置，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要为大家介绍了Spark处理trick总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了windows下Git安装教程(图文)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了VSCode 远程登录开发(带免密)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家介绍了ChatGPT如何写好Prompt编程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
Git?Commitizen提交规范化自动生成changelog文件
这篇文章主要为大家介绍了Git?Commitizen提交规范化自动生成changelog文件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了Spark?GraphX?分布式图处理框架图算法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本文给大家汇总介绍了一些vscode开始使用的过程中需要用到的基础的操作教程,非常简单实用,希望对大家熟练掌握vscode能够有所帮助2020-01-01
这篇文章主要介绍了在VScode中配置ROS环境,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
本文给大家分享的2个简单而且实用的小功能代码，分别是日历控件和天气预报接口，推荐给大家，需要的小伙伴快来参考下吧2015-03-03
最新评论