如何解决vscode中ESLint和prettier冲突问题

2024-03-01 0 386
目录
  • 解决方案1
  • 解决方案2
  • 总结

注意:这个冲突问题一般是指在代码编辑器中出现的问题,这里使用的是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冲突解决内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • VSCode中Eslint和Prettier冲突问题最新解决方法
  • 关于eslint和prettier格式化冲突问题
  • vscode中prettier和eslint换行缩进冲突的问题

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 编程技巧 如何解决vscode中ESLint和prettier冲突问题 https://www.u-9.cn/biancheng/jiqiao/181542.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务