ESLint的红色波浪线不见了的解决方法

原创 已于 2022-08-15 15:25:49 修改 · 4.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #vue.js

于 2021-11-11 16:11:29 首次发布

今天新建项目以后，把改配置的都给配置了，发现ESLint 的红色波浪线不见了，是的，它不见了！要知道编写代码的时候不报错，运行的时候报错就有些废人，查了好久，最后的原因竟然是：项目不能被其他父文件包裹，也就是项目打开的时候不能有上级目录！
解决（首先排查ESLint已经安装并且配置了！！！如果vscode没有安装ESlint插件，但是在项目中有有eslint的配置信息，那肯定是会报错的）
比如我的项目文件叫manager：
这个文件在 vue-shop 目录下，如果我右键使用 vscode 直接打开 vue-shop 文件夹，那么我的 ESLint 就没办法显示波浪线！（找错真的会找疯）

解决VS Code中ESLint插件无法正常工作的问题
DpgrMl的博客
09-24 3187
检查VS Code的设置，确保ESLint插件已启用，并检查ESLint配置文件中的规则设置。如果您已经尝试了上述所有方法，但ESLint仍然无法正常工作，您可以尝试清除VS Code的缓存并重新启动它。如果您在全局安装了ESLint，可能会导致与项目中的ESLint版本冲突。在VS Code的扩展面板中搜索ESLint，并确保安装了由ESLint提供的官方插件。以下是一些可能的解决方案，您可以尝试逐一排查，以解决VS Code中ESLint插件无法正常工作的问题。请注意，这将清除所有工作区的缓存数据。
在IDEA中，项目中出现红色波浪线解决办法
猿小白的博客
06-17 4万+
今天把一个maven项目导入到idea中，项目能够正常的运行，但是代码有很多的红色波浪线，对于一个有强迫症的人来说，这样显示肯定不行的，看着很难受，经过不断摸索，最终找到了一个不错的解决方法。 将红色标注的这个地方选中，然后重启IDEA即可解决上述问题。 ...
Vs Code创建vuecli项目，run dev时控制台有警告，但vscode代码中无红色、黄色波浪号警告高亮提示
zjy9951的博客
11-02 1527
踩坑描述： 打开以前创建的vuecli项目是有eslint提示的，但在那之后新创建的项目都没有eslint语法错误提示。（说明不是配置原因） 搞了一下午都搞不明白，最后删了vscode重装发现每次重装完打开的第一个项目都有eslint波浪号提示。 最后发现每次重装vscode，第一次打开.vue文件会有此提示，且点击allow该项目就会有eslint错误高亮提示。 解决方法： 最后才知道 右下角红框有个eslint可以点击。 再选择第一个for this workspace（此步骤可能没有，我第一次的
vue项目在vscode中编译eslint报错没显示红色波浪线提示
阑珊伊人
11-19 1万+
vue项目在vscode中编译eslint报错没显示红色波浪线提示。 如下图所示： 下图是预期效果： 不符合Eslint校验规则的代码位置都能展示出来，这样一目了然。能帮助我们迅速找到报错的位置。 然后在报错的地方右键-》“快速恢复”-》“fix all auto-fixable problem” 就能迅速修复问题。 重点来了哦！解决办法奉上： oh my god! 点他！点他！点他！ 在出现的弹框中点击allow就可以了 OK！收工！ ...
VSCode 基本使用
热门推荐
huangpb的博客
12-16 5万+
一、VSCode 界面功能介绍 1. Git History，相当于 git log 3. 打开上一提交版本的更改记录 4. 显示提交注释 5. 向右分屏 6. 直接定位到第几行 7. 解析当前文件的语言 8. 切换项目（基于 Project Manager） 9. 切换分支 10. GitLens，可以查看文件和单行代码的修改记录 二、常用快捷键 1. Comman.........
【已解决】eslint只在控制台报错，不在代码中显示红色错误信息了
小鱼干儿的博客
06-11 7793
【已解决】eslint只在控制台报错，不在代码中显示红色错误信息了修改方法 今天一打开我的vscode不知道点了什么还是自己变的，当我的语法格式不符合eslint时，只在控制台报错，不在代码段中显示红色波浪线的错误信息了。 从前如果显示红色波浪线错误信息，大多数的错误是可以点击它的自动修复的，但是自从错误只在控制台报错，就只能自己先找到错误的地方，然后手动修改，很麻烦。。。 修改方法 在命令面板中搜索 settings.json (命令面板打开方法：Ctrl+Shift+P) 打开vscode的设置文件，
vscode插件eslint警告波浪线
huai42717的博客
02-14 875
2.搜索eslint，不勾选eslint:Enable。1.点击文件找到首选文件>设置。
vscode中 Eslint错误不报红
weixin_45479904的博客
01-25 1763
昨天突然eslint错误不报红，最后发现是更新了eslint插件的问题，回退到v2.4.2就可以了，我项目中eslint规则是用.eslintrc.json写的。
IDEA中vue文件出现红色波浪线问题解决.pdf
12-16
这两种方法可以解决大部分由于IDE配置导致的Vue文件中的红色波浪线问题。如果问题依然存在，可能是由于其他原因，如依赖库的版本不兼容、Vue插件未正确安装或更新等。此时，可以尝试更新IDEA及其插件，或者检查项目...
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
12-17
在使用PyCharm进行Python开发时，我们可能会遇到一种情况：在导入本地的Python模块或.py文件时，代码下方会显示红色波浪线，虽然这并不影响程序的正常执行，但这种现象通常意味着代码编辑器无法正确识别这些模块。...
WPS文档红色波浪线去除方法详解
mmoo_python的博客
04-15 4231
红色波浪线作为辅助校对工具，在提升文档质量的同时也可能带来干扰。通过本文介绍的多种方法，用户既可以永久关闭检查功能，也能实现智能忽略和自定义优化。建议根据具体使用场景选择合适方案：日常办公推荐保留基础检查并维护自定义词典，技术文档处理则可针对性关闭特定检查项。在日常办公中，许多用户在使用WPS处理文档时，常会遇到文字下方显示红色波浪线的困扰。本文将系统讲解红色波浪线的产生原因及多种去除方法，帮助用户高效解决这一常见问题。红色波浪线是WPS内置的拼写检查功能触发的提示标识。一、红色波浪线产生原理。
WebStorm EsLint报红色波浪线
caohuixue_2021的博客
10-25 1156
这个错误是由于 ESLint 和 Prettier 的配置不一致导致的。它建议你移除多余的空格。确保你的 ESLint 和 Prettier 配置是统一的，这样可以减少这类的冲突。确保你在 WebStorm 中安装了 Prettier 插件，并确保它配置正确。格式化整个文件或者项目，可以使用快捷键或者通过菜单执行。如果你希望暂时忽略这个特定的错误，可以在。在 WebStorm 中，使用。确保你使用的是最新版本的。，以及它们的相关插件。
vscode中Eslint错误不报红
Zoe_haveFun的博客
02-27 1588
最近突然发现在vscode中预发错误不报红了，当前版本是v2.4.4，安装另外一个版本v2.4.2，再重新打开vscode就有报红了。
vscode禁用了错误波形曲线(红色波浪线)的恢复方法
m0_56753665的博客
06-03 2万+
1、打开vscode的设置面板，输入c_cpp.errorSquiggles。2、点击工作区，将选项改为enabled。3、退出设置后就会显示错误提示了。
vue 项目关闭esLint 红色波浪线
抱着肩膀笑看看
03-02 2083
关闭eslint红色波浪线,在文件—首选项—设置搜索并关闭 1.eslint.enable 2.vetur.validation.templat
vscode写C++代码禁用/开启编辑错误提示（红色波浪线）
TanaStudy的博客
01-14 1万+
vscode写C++代码禁用/开启编辑错误提示（红色波浪线）
vs code 不显示红色波浪错误的修改办法
weixin_62780325的博客
11-08 9737
一大早起来发现程序不再显示错误了 错误只在终端显示，赶紧弄了个解决办法 1.打开设置 2.搜索c_cpp.errorSquiggles 3 然后点工作区 4修改为enabled 5 就可以有错误提示了。
安装和使用 Eslint 遇到没有错误提示的解决、
qq_41877474的博客
11-09 4473
安装和使用 先决条件：Node.js (^8.10.0, ^10.13.0，或>=11.10.1)使用SSL支持构建的。(如果您使用的是一个正式的Node.js发行版，SSL总是内置的。) 您可以使用NPM安装ESLint： $ npm install eslint --save-dev 然后，您应该设置一个配置文件： $ ./node_modules/.bin/eslint --init...
VSCode 的 ESLint 扩展不提示警告和错误的解决办法
小桥流水丿小溪
07-28 1万+
不记得从哪个版本的VSCode开始，ESLint就突然不提示错误了。 打开 VSCode 的 settings.json 位置在 C:\Users\你的用户名\AppData\Roaming\Code\User\settings.json 或者 命令面板(CTRL+Shift+P) > 输入Preferences: Open Settings (JSON) 也可以打开它 加一行配置 "eslint.nodePath": "C:\\Users\\你的用户名\\AppData\\Roaming\\npm\
eslint和ts 红色波浪线
最新发布
06-18
<think>我们正在解决ESLint和TypeScript在代码编辑器中不显示红色波浪线（错误提示）的问题。根据引用[2]中的描述，一个可能的原因是项目目录结构问题：项目不能被其他父文件包裹，即项目打开时不能有上级目录。例如，如果项目目录名为"manager"，它位于"vue-shop"目录下，而我们在VSCode中直接打开了"vue-shop"文件夹，那么ESLint可能不会显示波浪线。另外，引用[1]提到了使用Prettier与ESLint集成的方法，但这里的问题更可能是环境配置问题。我们首先需要确保以下几点：1.已经安装了ESLint插件，并且在VSCode中启用。2.项目根目录下有正确的ESLint配置文件（如.eslintrc.js）和TypeScript配置（tsconfig.json）。3.确保项目目录在VSCode中是以根目录打开的（即不要从上级目录打开）。此外，还有其他可能的原因：-ESLint没有正确解析TypeScript：需要安装并配置相应的解析器（@typescript-eslint/parser）和插件（@typescript-eslint/eslint-plugin）。-VSCode的设置问题：可能需要检查VSCode的设置中ESLint是否被正确配置，例如是否禁用了ESLint，或者是否设置了正确的验证语言。-依赖未安装：确保所有必要的npm包已经安装。步骤：1.检查项目打开方式：确保在VSCode中打开的是项目根目录，而不是包含该项目的上级目录。2.检查ESLint插件：在VSCode的扩展中确认ESLint插件已安装并启用。3.检查配置文件：-确保项目中有.eslintrc.js（或其他格式的配置文件）并配置了TypeScript解析器。-示例配置：```javascriptmodule.exports={parser:'@typescript-eslint/parser',plugins:['@typescript-eslint'],extends:['eslint:recommended','plugin:@typescript-eslint/recommended',],env:{browser:true,node:true,},parserOptions:{ecmaVersion:2020,sourceType:'module',},};```-确保有tsconfig.json文件，并且配置正确。4.检查VSCode设置：打开设置（JSON），查看是否有关于ESLint的覆盖设置。可以尝试在项目根目录下添加.vscode/settings.json，内容如下：```json{"eslint.validate":["javascript","javascriptreact","typescript","typescriptreact"]}```5.安装必要的npm包：确保以下包已安装（开发依赖）：@typescript-eslint/eslint-plugin@typescript-eslint/parsereslinttypescript如果以上步骤都检查了还是不行，可以尝试重启VSCode或者重启ESLint服务器（在VSCode中，按Ctrl+Shift+P，然后输入“ESLint:RestartESLintServer”）。另外，引用[2]中提到的问题是由于项目打开方式不对，所以请务必注意项目打开路径。如果问题依旧，可以检查ESLint的输出日志（在VSCode中，查看“输出”面板，选择“ESLint”），看是否有错误信息。最后，确保你的代码中有意写一个错误（比如定义一个未使用的变量），来测试ESLint是否正常工作。根据引用[1]的内容，我们还应该注意Prettier的配置是否与ESLint冲突，但这里的问题主要是波浪线不显示，所以冲突不是主要原因，除非冲突导致ESLint完全关闭。如果同时使用了Prettier，请确保按照引用[1]的方式正确集成（例如使用eslint-plugin-prettier），但要注意，这通常不会导致波浪线完全不显示，而是会在格式化时出现不一致。综上所述，我们应按照上述步骤逐一排查。</think>### ESLint + TypeScript 红色波浪线错误分析与解决 #### 错误原因分析 1. **项目目录结构问题** ESLint 要求项目必须作为根目录直接打开，若项目被包裹在上级目录中（如 `父目录/项目目录`），编辑器无法正确加载 ESLint 规则，导致波浪线消失[^2]。 2. **依赖缺失或配置错误** - 未安装必要的依赖：`@typescript-eslint/parser`, `@typescript-eslint/eslint-plugin`, `typescript` - `.eslintrc` 配置未指定 TypeScript 解析器 - `tsconfig.json` 文件缺失或路径错误 3. **编辑器插件冲突** VSCode 同时启用多个 Linter 插件（如 TSLint 与 ESLint）会导致规则冲突。 4. **文件作用域未激活** ESLint 仅对配置文件（`.eslintrc`）所在目录及子目录生效，若文件不在作用域内则无提示。 --- #### 解决方案（逐步操作） ##### 步骤 1：检查项目打开方式 - **正确方式**：在 VSCode 中直接打开**项目根目录**（包含 `package.json` 的目录） - **错误示例**： ```bash ❌ /Users/name/Documents/vue-shop (打开父目录) ✅ /Users/name/Documents/vue-shop/manager (直接打开项目) ``` ##### 步骤 2：验证基础配置 1. **安装必要依赖**： ```bash npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript ``` 2. **配置文件示例**（`.eslintrc.js`）： ```javascript module.exports = { root: true, parser: '@typescript-eslint/parser', // 指定TS解析器 plugins: ['@typescript-eslint'], extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', // TS标准规则 ], env: { node: true }, parserOptions: { project: './tsconfig.json' // 指向TS配置文件 } }; ``` 3. **确保存在 `tsconfig.json`** 可通过 `npx tsc --init` 生成基础配置。 ##### 步骤 3：检查编辑器设置 1. **VSCode 设置**（`.vscode/settings.json`）： ```json { "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } ``` 2. **禁用冲突插件**： - 在 VSCode 扩展中禁用 `TSLint` 等冗余 Linter ##### 步骤 4：验证问题是否解决 1. 在 TypeScript 文件中故意添加错误： ```typescript const unusedVar: string = "test"; // 触发 no-unused-vars 规则 ``` 2. 保存文件后应出现红色波浪线警告 --- #### 高级排查方法 1. **查看 ESLint 输出日志**： - VSCode 中打开 `输出` 面板 → 选择 `ESLint` - 检查是否有 `No ESLint configuration found` 等错误 2. **命令行验证**： ```bash npx eslint yourfile.ts --debug ``` 查看具体解析错误 3. **路径映射问题**： 若使用别名导入（如 `@/components`），需在 `eslintrc` 和 `tsconfig` 同步配置： ```json // tsconfig.json "paths": { "@/*": ["./src/*"] } ``` > **关键提示**：根据引用[2]的实践，90%的波浪线消失问题源于**项目目录打开方式错误**，请优先检查此项[^2]。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值