webstorm配置ESLint(适合插件搜不出esLint的情况) + 解决this.CliEngineCtor is not a constructor的问题

最新推荐文章于 2025-06-08 23:44:25 发布
原创 最新推荐文章于 2025-06-08 23:44:25 发布 · 3.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
文章标签：

#java #list #json

本文介绍了如何在WebStorm中手动配置ESLint，特别是在插件无法找到ESLint的情况下。通过全局安装eslint v7.1.0来避免与WebStorm 2021.2版本的兼容性问题。遇到'`this.CliEngineCtor is not a constructor`'错误时，可以通过降级eslint版本解决。同时，提供了配置文件的注意事项，包括可能遇到的报错解决方案。

webstorm手动配置ESLint(适合插件搜不出esLint的情况)

说明：有时候，我们js逆向的时候，粘贴js代码到webstorm，我们希望可以看到哪些方法是未被定义而被使用的，这样能更方便我们去调试代码，所以这里配置一下全局的eslint

A、首先，打开命令控制符，输入指令

npm install -g eslint@7.1.0
(@7.1.0表示安装这个版本的eslint，-g表示全局安装)

为什么选择7.1.0版本呢，因为最新的8+版本可能会与webstorm的版本不匹配而导致eslint不起作用而一直报错

  • this.CliEngineCtor is not a constructor
  • 遇到这个问题直接输入一次npm install -g eslint@7.1.0 指令降低版本到7.1.0即可(有些可能需要管理员权限才能全局安装)

至少目前我的是2021.2版本的，使用7.1.0可以解决这个问题

B、然后开始配置webstorm
	打开设置->语言与框架->代码质量工具->ESLint

在这里插入图片描述
将下载eslint的位置复制到这个“ESLint软件包”处
在这里插入图片描述

C、在终端打开当前目录，输入指令
	npm i
最低0.47元/天 解锁文章
webstorm、vscode、HBuilder配置eslint检查
Yjx的博客
02-02 1488
你们好，我是金金金。
解决ESLint报错：“TypeError: this.cliEngine is not a constructor“
pleaseprintf的博客
07-29 2402
ESLint是前端开发中常用的代码规范检查工具。然而，有时我们可能会遇到"TypeError: this.cliEngine is not a constructor"这样的报错，影响代码规范检查的进行。本文将为你详细介绍该报错的原因，并提供解决方法，确保ESLint的正常工作。通过本文，你了解了解决"TypeError: this.cliEngine is not a constructor"报错的多种方法。遵循这些方法，你可以确保ESLint正常工作，并帮助团队维持良好的代码规范。
webstorm提示TypeError: this.cliEngine is not a constructor
热门推荐
lzc的博客
09-22 3万+
点击details在控制台显示报错的位置 TypeError: this.cliEngine is not a constructor at ESLintPlugin.invokeESLint (/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint...
webstorm中配置Eslint的两种方式及差异比较详解
10-17
在WebStorm中配置ESLint是前端开发者为了保持代码风格一致性和提高代码质量的重要步骤。本文将详细介绍两种在WebStorm中配置ESLint的方式及其差异。 ### 方式一：使用WebStorm内置ESLint WebStorm作为一款强大的...
WebStorm eslint 插件
09-27
一旦配置完成，WebStorm会自动在你编写代码时运行ESLint，显示代码问题的警告或错误。这些问题可以通过右键点击并选择`Quick Fix`来快速解决，WebStorm通常会提供自动修复建议。 除了基本的代码风格检查，ESLint还...
webstrom 搜不到eslint插件
weixin_43566573的博客
07-07 1584
webstrom 搜不到eslint插件 解决方法：本地安装eslint插件 ESlint插件下载: https://plugins.jetbrains.com/plugin/7494-eslint/versions.
Eslint报错TypeError: this.cliEngine is not a constructor 解决方案
niexier的博客
03-10 1万+
ESLint是一个用于识别和报告ECMAScript/JavaScript代码中的模式的工具，其目标是使代码更加一致并避免bug。 在许多方面，它与JSLint和JSHint相似，但有几个例外： ESLint使用Espree进行JavaScript解析 ESLint使用AST来评估代码中的模式 ESLint是完全可插入的，每个规则都是一个插件，您可以在运行时添加更多 在编辑器中，经常可以看到这样红色的提示，对于强迫症来说时非常难受的 点击 Details查看报错内容，那么如何去解决；根据报错路
webstorm 配置Eslint
最新发布
qq_19891197的博客
06-08 1259
2-2：自动生成配置文件命令 npx eslint --init，要注意有没有更改到eslint的版本，如果修改到了版本，那就是这个命令会造成eslint配置和版本很多不匹配的问题，所以还是自己手动生成eslint的配置文件，或者自己知道eslint的版本和插件一个一个安装，提示，配置eslint的版本是一个难点。3：配置的是eslint.config.js文件（使用的必须是webstorm2025版本，，使用的是命令npm init @eslint/config@latest初始化。
webstorm（2019）配置eslint规范
siyi_blog的博客
04-24 2万+
在项目中我们为了代码书写更规范，在项目中安装ESlint帮助我们检查语法，那么下面介绍下在webstorm中如何配置ESlint规范 步骤如下： 1.快捷键:ctrl+alt+s打开设置，找到Code Style，将Indents Detection和EditorConfig下的去掉勾选，具体看下图 2.在Code Style子文件下找到你想修改的文件类型，将缩进全部改为2 ...
【基于webstorm检查ESlint8版本报错】TypeError this.cliEngineCtor is not a constructor
m0_67402125的博客
03-02 1311
基于webstorm的ESlint检查错误：TypeError: this.cliEngineCtor is not a constructor 网上有很多解决办法都是【过时的】基于ESlint在不断升级,请降级ESlint版本即可 【此版本ESlint6.7.2不会报错】 选择ESlint版本最好的方式就是使用 Vue-cli脚手架创建一个Vue3的项目,内部提供的基本的编译环境,则没问题！ { "name": "vue3_01", "version": "0.1.0", "private": tr
Eslint 规则说明
u012576527的博客
12-19 3135
"no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 "no-bitwise": 0,//禁止使用按位运算符 "no-caller": 1,//禁止使用arguments.caller或arguments.callee "no-catch-shadow": 2,//禁止catch子句参数与外部作
关于webStorm的Eslint配置
n_j_q的博客
05-19 1327
编辑器webStorm中Eslint的配置方法
TypeError: this.cliEngineCtor is not a constructor，webstorm和eslint的版本纠结
江湖行骗老中医
05-02 5522
在webstorm里使用eslint的时候，会提示 TypeError: this.cliEngineCtor is not a constructor ，这样的一个错误，知道应该是版本的错误，但具体版本怎么区别，eslint的版本和webstorm的版本如何对应，需要注意。 eslint 6.x 如果使用的是eslint 6.x的版本，要保证webstorm的版本在2019.1.3 或更高的版本。如果你暂时不想使用更高的工具版本，就需要将eslint降级到 eslint 5.x。 如果你不想降级.
WebStorm配置eslint检查自动格式化(自动解决eslint问题\Vue3项目解决ESLint问题)
一方湖泊
03-12 8502
参考
this.CliEngineCtor is not a constructor
weixin_43955566的博客
10-25 2021
百度了一堆都是this.CliEngine is not a constructor,就没有一个CliEngineCtor的,逼得我去看看stack of 结果还真的有 大概意思就是ide和eslint版本不一致 (我当前版本ws 2021.2 eslint 8.1) 更新ws至2.2 问题解决 所以应该也可以回退eslint版本吧 没尝试过 mark~ 所以说某100℃真害人啊 多去外面看看 ...
TypeError: this.CliEngine is not a constructor
千里之行，始于足下！
01-06 1108
今天做关于 vue 项目的小demo时，WebStorm 编辑器中一直出现这个错误： TypeError: this.CliEngine is not a constructor 多亏万能的度娘，帮我解决这个问题，此文特此记录。 解决如下 1、点击出现红色提示的 Details ，可以看到编辑器的 Terminal 出现了提示 2、点击 Teminal 提示的第一个链接，接着打开一个文件 *3、找到文件中的 ESLintPlugin 方法，将 this.CliEngine = require(this.
TypeError: this.LegacyESLint is not a constructor
04-23
<think>嗯，用户遇到了一个ESLint的错误：“TypeError: this.LegacyESLint is not a constructor”。我需要帮他们解决这个问题。首先，我应该回想一下之前处理类似错误的经验，比如之前遇到的“cliEngine”问题。根据引用资料，之前的解决方案涉及到ESLint版本兼容性和配置文件的修改。 可能这个新错误也是由版本不匹配引起的。ESLint在v8之后可能更改了某些API，导致旧版本的插件或配置无法正确引用新的类名。例如，用户可能在升级到ESLint v8+后，使用了一个尚未适配的插件，或者WebStorm等IDE的ESLint插件没有更新。 接下来，我需要考虑常见的解决方法。首先，检查ESLint和相关插件的版本是否兼容。用户可能需要降级ESLint到v7.x，或者升级IDE插件到支持v8+的版本。此外，检查配置文件是否正确引用了新的类名，比如LegacyESLint可能被重命名或替换了。 另外，根据引用[3]和[4]中的例子，修改插件代码中的require路径，比如从“lib/cli-engine”改为明确引用.CLIEngine属性。类似的，LegacyESLint可能需要调整导入方式，或者替换为新的API。 还要考虑项目中的依赖冲突，比如通过删除node_modules和lock文件后重新安装，确保所有依赖版本一致。另外，检查IDE的设置，确保使用的ESLint版本与项目中的一致，避免路径错误。 最后，可能需要建议用户查看ESLint的官方迁移指南，确认是否有其他破坏性变更需要处理。如果所有方法无效，可能需要联系IDE支持或ESLint社区寻求帮助。</think>针对$TypeError:\ this.LegacyESLint\ is\ not\ a\ constructor$的ESLint报错，以下是分步解决方案： ### 一、错误原因分析 该错误通常由以下原因导致： 1. **ESLint版本冲突**：ESLint v8+版本弃用了旧版CLIEngine，改用新的ESLint类[^2][^5] 2. **IDE插件不兼容**：WebStorm等IDE内置的ESLint插件未适配ESLint v8+新架构 3. **依赖引用错误**：配置文件中错误引用了已被重命名的模块接口 ### 二、解决方案 #### 方法1：统一ESLint版本 ```bash # 查看当前ESLint版本 npm list eslint # 降级到v7.x版本（兼容旧配置） npm install eslint@7.32.0 --save-dev ``` 或升级所有相关依赖： ```bash npm install eslint@latest @vue/cli-plugin-eslint@latest --save-dev ``` #### 方法2：修改IDE插件配置 1. 定位WebStorm配置文件路径： $$E:\soft\webstorm\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint-plugin.js$$ 2. 修改模块引用方式： ```javascript // 修改前 this.LegacyESLint = require(this.basicPath + "lib/eslint/eslint"); // 修改后 this.LegacyESLint = require(this.basicPath + "lib/eslint").LegacyESLint; ``` #### 方法3：清理依赖缓存 ```bash rm -rf node_modules package-lock.json npm cache clean --force npm install ``` #### 方法4：配置解析器（Vue项目） 在`.eslintrc.js`中显式声明： ```javascript module.exports = { parser: '@babel/eslint-parser', parserOptions: { requireConfigFile: false, babelOptions: { presets: ['@babel/preset-env'] } } } ``` ### 三、验证流程 1. 在终端执行： ```bash npx eslint --debug yourfile.js ``` 2. 观察输出是否包含： $$ESLint configuration loaded successfully$$ ### 四、版本对照表 | ESLint版本 | 适用场景 | 关键类名 | |------------|------------------------|-------------------| | v7.x | 传统项目 | CLIEngine | | v8.x+ | 新版项目 | ESLint/LegacyESLint| | v9.x+ | 最新ECMAScript标准支持 | FlatESLint |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值