解决 WebStorm 中 ESLint 报错：'import' is not defined
在 WebStorm 开发前端工程时，我们常常使用 ESLint 工具来规范我们的 JavaScript 编写。不过，在实际操作中，我们可能会遇到如下错误：
"import" is not defined
这种情况下，我们需要针对其进行适当的解决。
一、问题原因
ESLint 报错的原因是由于在 JavaScript 的 import 和 export 语句中使用了 ES6 特有的模块化语法，而当前的环境却不支持这种语法。
而 WebStorm 的默认环境是启用了 ESLint 规范的，若当前项目环境不支持 ES6 语法或者缺少必要的支持库，则会出现 'import' is not defined 的错误提示。
二、解决方案
在 WebStorm 中解决 'import' is not defined 错误，有两种解决方案：
1.开启 ESLint 环境支持 ES6 语法：
1.1 检查项目是否支持 ES6
在 package.json 文件中，对于环境支持 ES6 语法的项目，需显示配置 "type": "module"。
"license": "MIT", "type": "module", "main": "./index.js", "dependencies": { "axios": "^0.21.1" }
1.2 安装 ESLint 插件
在和项目相关结构的目录下，执行以下命令：
npm i eslint --save-dev
1.3 安装支持语法的插件
针对需要使用的 ES6 语法，需要安装对应的插件，例如安装 eslint-plugin-import：
npm i eslint-plugin-import --save-dev
1.4 配置 .eslintrc.js 文件
在根目录下新建 .eslintrc.js 文件，代码如下：
module.exports = { "env": { "browser": true, "es2021": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": 12, "sourceType": "module" }, "plugins": [ "import" ], "rules": { "no-unused-vars": "warn", "no-undef": "warn" } };
这里的 plugins 属性中，即定义了 import 插件。
2.关闭 WebStorm 编辑器检测
在 WebStorm 编辑器中，我们可以通过如下操作来关闭编辑器的检测：
2.1 打开 WebStorm 首选项
点击 WebStorm 菜单栏中的 "WebStorm" > "Preferences"， 或使用 Command + ',' 快捷键直接打开。
2.2 关闭 ESLint 支持
在 "Languages & Frameworks" 或 "Languages & Frameworks" > "JavaScript" 中，找到 ESLint 选项，勾选 "Disable ESLint" 选项即可。
此时，我们可以通过编辑器的工具栏来查询当前项目所支持的特性，如果可以显示 ES6，其实现了我们需要的特性。
三、总结
在 WebStorm 中解决 'import' is not defined 错误，需要先检查项目与 WebStorm 的基础配置是否支持 ES6 语法，然后针对项目使用的 ES6 特性安装相对应的插件，最后在 .eslintrc.js 文件中配置规范。
祝你学习愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502e69f95b1f8cacd015c09