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

 更新时间:2023年11月23日 08:54:32   作者:m0_61989957  
这篇文章主要给大家介绍了关于如何解决vscode中ESLint和prettier冲突问题的相关资料,ESLint和Prettier之间可能会发生冲突,因为它们都是用于代码规范化的工具,但它们的规则和格式化方式可能不同,需要的朋友可以参考下

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

相关文章

  • Azkaban报错-azkaban.executor.ExecutorManagerException: No active executors found

    Azkaban报错-azkaban.executor.ExecutorManagerException: No acti

    这篇文章主要介绍了Azkaban报错-azkaban.executor.ExecutorManagerException: No active executors found,本文给大家介绍的非常详细,需要的朋友可以参考下
    2020-05-05
  • 真伪静态区别方法分析

    真伪静态区别方法分析

    有些用户觉得,伪静态和真静态实际被收录量会相差非常大,其实不然,从你个人角度,你去判断一下一个帖子到底是真静态还是伪静态?
    2010-01-01
  • Web通信 分析工具 [推荐]

    Web通信 分析工具 [推荐]

    在抓虾上看到一篇Web开发分析工具的文章(链接就免了),怎么远没有我用的东西好用呢? 还是介绍介绍我用的吧。由于平常开发只用FireFox,完成后再去调试IE, 所以这些工具绝大部分是针对FireFox的。
    2009-04-04
  • 游戏开发Unity2D图片任意形状破碎裂片效果展示

    游戏开发Unity2D图片任意形状破碎裂片效果展示

    本篇文章属于游戏开发Unity进阶篇,主要介绍了游戏开发Unity2D图片任意形状破碎裂片效果展示,有需要的朋友可以借鉴参考下,希望可以有所帮助
    2021-09-09
  • Git基本概述

    Git基本概述

    本文主要介绍了Git的基础知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 分享几道和「滑动窗口」有关的算法面试题

    分享几道和「滑动窗口」有关的算法面试题

    本文是小编和大家分享的几道和「滑动窗口」有关的算法面试题,需要的朋友可以参考下
    2019-08-08
  • VSCode 安装 Copilot 详细过程和实例代码(最新推荐)

    VSCode 安装 Copilot 详细过程和实例代码(最新推荐)

    Copilot 作为一款 AI 辅助编程工具,可以极大地提高开发效率,让编程变得更加轻松愉快,在实际开发过程中,我们要注意审查和测试生成的代码,确保其符合项目需求和标准,这篇文章主要介绍了VSCode 安装 Copilot 详细过程和实例,需要的朋友可以参考下
    2024-05-05
  • git pull和git clone的区别详解

    git pull和git clone的区别详解

    本文主要介绍了git pull和git clone的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • git分支的创建、切换、合并及删除操作小结

    git分支的创建、切换、合并及删除操作小结

    这篇文章给大家详细的介绍了关于git分支的操作,其中包括查看现存分支、创建分支、切换分支、提交分支、分支合并以及删除分支,文中给出了详细示例代码,相信对大家的学习和理解很有帮助,有需要的朋友们下面来一起学习学习吧。
    2016-11-11
  • firefox 扩展开发技巧

    firefox 扩展开发技巧

    firefox 扩展开发
    2009-06-06

最新评论