【解决】vue项目vscode配置eslint不生效，无法自动检测

解决Vue-cli项目中ESLint配置问题

最新推荐文章于 2025-05-20 14:32:39 发布

原创最新推荐文章于 2025-05-20 14:32:39 发布 · 7.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vscode #javascript

文章讲述了作者在Vue-cli项目中遇到的ESLint配置问题，包括no-debugger规则未生效及VSCode的eslint插件不工作。作者发现并删除了package.json中的默认配置，使得自定义的.eslintrc.js配置生效，从而解决了问题。同时，这也使VSCode的eslint插件开始正常工作，实现了代码保存时的自动纠正和编码提示。

快速版

查看package.json中是否有eslint的配置信息，如有删掉即可，如不生效本文章也无需向下看啦。

说在前面

本项目基于vue-cli新建的项目，因为jpackage.json 中自带了eslint，所以install之后便可以直接使用。
我按照网上的教程，在项目根目录新建了.eslintrc.js文件，然后输入了一部分校验规则，规则如下：

module.exports = {
  // 指定脚本的运行环境， env 关键字指定你想启用的环境，并设置它们为 true
  env: {
    browser: true,
    es6: true,
    node: true
  },
  // 扩展配置文件（设置当前ESLint默认继承的规则（或者你也可以使用标准规则：standard））
  // 一个配置文件一旦扩展，就可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）、并修改所有选项
  extends: [
    'eslint:recommended', // 使用ESLint推荐的规则
    'plugin:vue/essential',
    'plugin:prettier/recommended' // 样式上eslint和prettier冲突，以prettier为准
  ],
  globals: {
    //  脚本在执行期间访问的额外的全局变量
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  // 解析器选项。sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  // 使用的插件，插件名称省略了eslint-plugin-
  plugins: ['vue'],
  // 启用的规则及其各自的错误级别(在这里配置规则)
  rules: {
    // 每一项都是一个eslint规则，off-0,warn-1,error-2等为当前规则值
    'no-console': 'warn',
    'no-debugger': 'off',
    'no-redeclare': 0,
    'no-useless-escape': 0,
    'no-mixed-spaces-and-tabs': 0,
    'valid-v-for': 0
  }
};

问题丛生

其一：理论上来说,no-debugger已经关掉了，所以代码中是可以存在debugger的，但是编译之后还是会报错。
其二：我通过vscode的插件市场安装了eslint插件(同名插件)，但是该插件却无法作用，保存不会自动纠正，编码过程中也不会提醒何处不符合规范。
网上参考了一些博客，主动配置了不少地方，但是仍旧不好用。

一阵见血

当我确认配置没有任何问题时，对于第一个问题，那就只有一种可能了，存在其他的配置，优先级高于我的配置。
找到了package.json中果然有相关的配置，这也是vue-cli脚手架提供的默认配置，把配置信息删除后，我的配置信息果然生效了。
与此同时，第二个问题也解决了，因为eslint插件和.eslintrc.js是配套工作的，此时删除掉package.json中的内容就可以正常工作了。

说到最后

以上。