ESLint 在 VS Code 中无法工作的问题及其解决方案

在前端开发中，我们经常使用 ESLint 来检查代码的规范性和错误，提高代码质量和可维护性。而在 VS Code 中使用 ESLint 可以更方便地进行代码检查和修复。但有时候我们会遇到 ESLint 在 VS Code 中无法工作的问题，本文将介绍这个问题的原因和解决方案。

问题描述

在 VS Code 中使用 ESLint 插件，但是无论是在代码编辑器中还是在终端中运行 eslint 命令都无法检查代码，也无法显示错误和警告信息。例如，我在项目中的 .eslintrc.js 文件中设置了 no-console 规则，但是在 VS Code 中却没有任何提示。

// javascriptcn.com 代码示例
module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'no-console': 'error',
  },
};

问题原因

这个问题的原因是 VS Code 中没有正确配置 ESLint 插件。在 VS Code 中，ESLint 插件默认使用项目根目录下的 .eslintrc 文件进行代码检查，但是我们的项目中的 .eslintrc.js 文件并没有被正确识别和加载，导致无法进行代码检查和显示错误和警告信息。

解决方案

解决这个问题的方法有两种：

1. 配置 VS Code 中的 ESLint 插件

第一种方法是在 VS Code 中配置 ESLint 插件，让它正确识别和加载项目中的 .eslintrc.js 文件。具体步骤如下：

1. 在 VS Code 中打开项目文件夹，并点击左侧的扩展按钮。
2. 搜索并安装 ESLint 插件。
3. 在 VS Code 的设置中搜索 eslint.validate，并点击 Edit in settings.json。
4. 在打开的 settings.json 文件中添加以下配置：

// javascriptcn.com 代码示例
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],
"eslint.options": {
  "configFile": ".eslintrc.js"
}

其中，eslint.validate 配置项指定了需要进行 ESLint 检查的文件类型，eslint.options 配置项指定了项目中的 .eslintrc.js 文件路径。

1. 保存 settings.json 文件，重新打开 VS Code，即可正常使用 ESLint 进行代码检查和显示错误和警告信息。

2. 在项目根目录下添加 .eslintignore 文件

第二种方法是在项目根目录下添加一个 .eslintignore 文件，指定不需要进行 ESLint 检查的文件或文件夹。这样，ESLint 插件就不会检查这些文件，从而减少了检查时间和提高了检查效率。具体步骤如下：

1. 在项目根目录下创建一个 .eslintignore 文件。
2. 在 .eslintignore 文件中添加需要忽略的文件或文件夹，例如：

node_modules/
dist/

其中，node_modules/ 表示忽略 node_modules 文件夹中的所有文件，dist/ 表示忽略 dist 文件夹中的所有文件。

1. 保存 .eslintignore 文件，重新打开 VS Code，即可正常使用 ESLint 进行代码检查和显示错误和警告信息。

总结

本文介绍了 ESLint 在 VS Code 中无法工作的问题及其解决方案。通过配置 VS Code 中的 ESLint 插件或在项目根目录下添加 .eslintignore 文件，可以解决这个问题，并提高代码质量和可维护性。希望本文对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fd8d195b1f8cacd889869