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.
  1. 如图,查找配置项找到configFile,若有,则看配置读取文件是否正确,若不正确,直接删掉吧,

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

在这里插入图片描述

  1. 所以在vscode配置文件中设置eslint.enable: true,或者直接在配置setting.json文件中删除此配置,(因为有提示.enable配置将被弃用
二、 eslint插件读取.eslintignore文件失效(eslintignore文件不生效)
  1. 继续查阅文档
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/*/"}将所有这些文件夹设置为工作目录。

很显然。默认的配置噶了,所以剩下下面两个推断指定
在这里插入图片描述

  • 9
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!对于VS Code配置ESLint不生效问题,我可以提供一些建议。请按照以下步骤进行排查: 1. 确保已在项目安装了ESLint,并且在项目的根目录下存在配置文件(一般为`.eslintrc`或`.eslintrc.js`)。 2. 确认您的VS Code已安装了ESLint插件。在扩展面板搜索并安装ESLint插件。 3. 在VS Code的设置,找到ESLint的配置项。您可以通过按下`Ctrl + ,`(Windows/Linux)或`Cmd + ,`(Mac)打开设置面板,然后搜索"eslint"来找到相关配置。 4. 在ESLint配置项,确保已选"自动修复"(autoFix)选项。这将使VS Code自动应用ESLint规则并修复一些常见问题。 5. 如果您的项目使用了特定的ESLint规则集(如Airbnb或Standard等),请确保已在VS Code的设置指定正确的规则集。在`.eslintrc`文件,您可以配置"extends"属性来指定所使用的规则集。 6. 如果您的项目有多个工作区文件夹,请确保在VS Code的设置已正确配置ESLint的工作区设置。您可以在工作区文件夹的`.vscode/settings.json`文件配置ESLint相关设置。 7. 尝试重启VS Code,然后打开您的项目,看看ESLint是否开始生效。 如果上述步骤都没有解决问题,您可以进一步检查以下可能的原因: - 您的项目可能存在ESLint配置错误。请确保`.eslintrc`文件的规则和插件设置正确,并符合您项目的需求。 - 如果您的项目使用了多个ESLint配置文件,请确保这些配置文件之间没有冲突,并且在VS Code的设置正确指定了配置文件路径。 - 某些其他VS Code插件可能会干扰ESLint的工作。您可以尝试禁用其他插件,然后逐个启用以确定是否与其他插件冲突。 希望这些提示能够帮助您解决问题!如有更多疑问,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值