前端-Vue的开发工具VScode使用Vetur和eslint插件

最新推荐文章于 2025-11-27 16:23:16 发布

原创最新推荐文章于 2025-11-27 16:23:16 发布 · 606 阅读

1 ·

CC 4.0 BY-SA版权

大鹏展翅

文章标签：

#vue.js

前端知识专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在不同版本的VScode中如何正确配置ESLint插件，包括旧版（<1.41.0）和新版（>1.41.0）的设置方法，以实现对JavaScript、Vue和HTML文件的代码检查和自动修复功能。

由于VScode版本原因，在使用ESlint插件时，对setting.json文件的配置：

（确保vue项目也有ESlint依赖，才能使用ESlint插件）

打开VScode的setting.json文件：

旧版（版本 < 1.41.0）配置：

{
    //配置eslint
    "eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
    "eslint.validate": [
       "javascript",  //  用eslint的规则检测js文件
       {
         "language": "vue",   // 检测vue文件
         "autoFix": true   //  为vue文件开启保存自动修复的功能
       },
       {
         "language": "html",
         "autoFix": true
       }
     ]
}

新版（版本 >1.41.0）配置：

{
    //autoFixedOnSave 设置已废弃，采用如下新的设置
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,
    //autoFix默认开启，只需输入字符串数组即可
    "eslint.validate": ["javascript", "vue", "html"]
}

（我的是1.4.3版本，如图所示：）