vscode中eslint插件不生效的解决过程

 更新时间:2026年04月29日 14:51:41   作者:Astrifall  
文章描述了在VSCode中使用ESLint插件时遇到的问题,包括插件不生效、.esignore文件无效等,通过查阅文档发现配置项`configFile`和`workworkDirectory`的设置可能是问题所在文章建议设置`eslint.enable:true`或者删除相关配置,并确保ESLint正确读取配置文件和忽略文件

vscode中eslint插件不生效

case:

最近使用webpack打包js资源中使用到了VS Code中的eslint插件辅助eslint plugin对代码进行校验,在.eslintrc.js文件中以及webpack.config.js配置好后,

在控制台运行npx webpack可以读取到eslint plugin的检测结果

一、eslint插件读取项目中.eslintrc.js配置文件

1、 eslint插件却始终不生效,在代码里没有eslint插件该有的红色波浪线

查阅eslint插件官网,找到如下描述:

eslint.enable: enable/disable ESLint for the workspace folder. Is enabled by default.

如图,查找配置项找到configFile,若有,则看配置读取文件是否正确,若不正确,直接删掉吧,

configFile如果不设置,ESLint 会在当前工作目录及其父目录中查找默认的配置文件

所以在vscode配置文件中设置eslint.enable: true,或者直接在配置setting.json文件中删除此配置,(因为有提示.enable配置将被弃用)

二、eslint插件读取.eslintignore文件失效(eslintignore文件不生效)

继续查阅文档

eslint.workingDirectories - specifies how the working directories ESLint is using are computed. ESLint resolves configuration files (e.g. eslintrc, .eslintignore) relative to a working directory so it is important to configure this correctly. If executing ESLint in the terminal requires you to change the working directory in the terminal into a sub folder then it is usually necessary to tweak this setting. (see also ESLint class options#cwd). Please also keep in mind that the .eslintrc* file is resolved considering the parent directories whereas the .eslintignore file is only honored in the current working directory. The following values can be used:

[{ "mode": "location" }] (@since 2.0.0): instructs ESLint to uses the workspace folder location or the file location (if no workspace folder is open) as the working directory. This is the default and is the same strategy as used in older versions of the ESLint extension (1.9.x versions).
[{ "mode": "auto" }] (@since 2.0.0): instructs ESLint to infer a working directory based on the location of package.json, .eslintignore and .eslintrc* files. This might work in many cases but can lead to unexpected results as well.
string[]: an array of working directories to use. Consider the following directory layout:
root/
  client/
    .eslintrc.json
    client.js
  server/
    .eslintignore
    .eslintrc.json
    server.js
Then using the setting:
  "eslint.workingDirectories": [ "./client", "./server" ]
will validate files inside the server directory with the server directory as the current eslint working directory. Same for files in the client directory. The ESLint extension will also change the process's working directory to the provided directories. If this is not wanted a literal with the !cwd property can be used (e.g. { "directory": "./client", "!cwd": true }). This will use the client directory as the ESLint working directory but will not change the process`s working directory.
[{ "pattern": glob pattern }] (@since 2.0.0): Allows to specify a pattern to detect the working directory. This is basically a short cut for listing every directory. If you have a mono repository with all your projects being below a packages folder you can use { "pattern": "./packages/*/" } to make all these folders working directories.

翻译一下:

eslint.workingDirectories 此配置其实就是设置eslint工作目录,所以我们在setting.json文件中配置工目录

[{ "mode": "location" }] 默认的
[{ "mode": "auto" }] 指示ESLint根据包的位置推断工作目录。.eslintignore和.eslintrc*文件。这可能在许多情况下有效,但也可能导致意想不到的结果
[{ "pattern": glob pattern }]允许指定检测工作目录的模式。这基本上是列出每个目录的捷径。如果你有一个单一的存储库,所有的项目都在一个包文件夹下,你可以使用{"pattern": "./packages/*/"}将所有这些文件夹设置为工作目录。

很显然。

默认的配置噶了,所以剩下下面两个推断指定

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Eclipse 格式化代码时不换行与自动换行的实现方法

    Eclipse 格式化代码时不换行与自动换行的实现方法

    每次用Eclipse自带的Ctrl+shift+f格式化代码时,如果原来的一行代码大于80列,Eclipse就会自动换为多行,这点个人感觉不是很舒服,简单试了一下,通过以下方式可以修改
    2009-05-05
  • 详解VScode 配置为 LaTeX 编辑器(IDE)

    详解VScode 配置为 LaTeX 编辑器(IDE)

    这篇文章主要介绍了详解VScode 配置为 LaTeX 编辑器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • VSCode设置网页代码实时预览的实现

    VSCode设置网页代码实时预览的实现

    这篇文章主要介绍了VSCode设置网页代码实时预览的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Git版本控制从入门到精通的完全指南

    Git版本控制从入门到精通的完全指南

    作为当今最流行的分布式版本控制系统,Git 已经成为开发者必备的技能之一,本文将带你从零开始,逐步掌握 Git 的核心概念和常用操作,需要的朋友可以参考下
    2026-03-03
  • Git 教程之服务器搭建详解

    Git 教程之服务器搭建详解

    本文主要介绍Git 服务器搭建的知识,这里整理了详细的资料,和命令详解,有需要的小伙伴可以参考下
    2016-09-09
  • openlayers 模仿高德箭头导航路线图的代码详解

    openlayers 模仿高德箭头导航路线图的代码详解

    这篇文章主要介绍了openlayers 模仿高德箭头导航路线图的示例代码,主要包括原始数据、起点/终点寻找、起点和终点样式函数,结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • Visual Studio自定义项目模版

    Visual Studio自定义项目模版

    这篇文章介绍了Visual Studio自定义项目模版的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节缩放字体大小

    IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节缩放字体大小

    很多朋友不清楚IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节缩放字体大小的,下面我以idea开发工具为例给大家通过截图一步步展示操作方法,需要的朋友可以参考下
    2021-05-05
  • Git 教程之工作流程详解

    Git 教程之工作流程详解

    本文主要介绍Git 工作流程的内容,这里整理了相关资料,并附Git工作流程图,有需要的小伙伴可以参考下
    2016-09-09
  • Git推送代码的7种高效方式

    Git推送代码的7种高效方式

    在 Git 中,推送代码(即将本地提交推送到远程仓库)有多种方式,每种方式适用于不同的协作场景和需求,以下是几种常见的推送代码的方式、结合完整示例说明,并以表格形式总结对比,需要的朋友可以参考下
    2025-08-08

最新评论