温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

VSCode中Eslint和Prettier冲突问题如何解决

发布时间:2023-02-24 09:14:11 来源:亿速云 阅读:120 作者:iii 栏目:开发技术

这篇文章主要讲解了“VSCode中Eslint和Prettier冲突问题如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“VSCode中Eslint和Prettier冲突问题如何解决”吧!

    前言

    本次环境皆为 @vue/cli默认安装带有的 eslint@7.32.0VSCode 插件版本:

    • Eslint v2.4.0

    • Prettier v9.10.4

    为什么会冲突

    首先我们需要知道为什么使用EslintPrettier,下面先介绍两者的单独用法

    Eslint

    Javascript Vue Typescript 等文件的代码规范检测工具,当代码写法不符合时,会在终端进行报错提醒,阻止你的serve服务。为了在 VSCode 中检测到我们代码不规范时,能自动修复错误写法,我们需要安装 VSCode 的插件 ESLint

    VSCode中Eslint和Prettier冲突问题如何解决


    安装后在 setting.json 中配置如下并重启编辑器:

    {
    	"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    	}
    }

    之后再编写 js等文件保存时都会自动格式化,保证 Eslint再也不会报错

    Prettier

    一种规范化的写法规则,包含各种类型文件,其中部分Javascript 等规则,会和 Eslint不一样,使用时只要在VSCode 中安装Prettier插件即可

    VSCode中Eslint和Prettier冲突问题如何解决

    安装后在 setting.json 中配置如下并重启编辑器:

    {
    	"editor.formatOnSave": true,
    	"editor.defaultFormatter": "esbenp.prettier-vscode",
    }

    表示所有类型的文件的格式化都使用 Prettier

    冲突

    如果两者都启用,则因为规则冲突,在JS等文件中,会出现保存时,先运行了ESLint,然后再运行了 Prettier,导致 @eslint检测依然报错

    解决

    既然使用 eslint规范,我的理解上当然是不能去修改eslint,因为这是共用规范,修改了就没有再使用的必要了,所以我是不推荐修改eslint的方式。

    我的做法也很简单,在eslint作用的文件类型中,继续使用eslint进行格式化,在其他类型文件中,使用prettier进行格式化

    eslint继续使用 codeActionsOnSave进行设置,把 eslint作用范围的文件类型的formatOnSave关闭

    {
      "editor.tabSize": 2,
    	// 开启eslint
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    	},
      // 开启自动格式化
      "editor.formatOnSave": true,
      // 设置所有文件默认格式化工具为prettier
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      // eslint范围内的文件类型,关闭保存时格式化
      "[javascript]": { 
        "editor.formatOnSave": false
      },
      "[typescript]": { 
        "editor.formatOnSave": false
      },
      "[vue]": {
        "editor.formatOnSave": false
      },
      "[javascriptreact]": {
        "editor.formatOnSave": false
      }
    }

    感谢各位的阅读,以上就是“VSCode中Eslint和Prettier冲突问题如何解决”的内容了,经过本文的学习后,相信大家对VSCode中Eslint和Prettier冲突问题如何解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI