JavaScript 中 ES Modules 怎么配合 ESLint 规范导入

胖磊吖_8867

胖磊吖_8867

2026-09-19

809人浏览

原创

es modules 是 ecmascript 官方模块化标准,使用 import/export 语法;eslint 需配置 sourcetype: 'module'、ecmaversion 和对应环境才能正确解析,否则报“import is reserved”错误。

javascript 中 es modules 怎么配合 eslint 规范导入

ES Modules 的导入语法本身是语言标准,但 ESLint 能帮你在使用过程中避免常见错误、统一风格、提前发现潜在问题。关键不在于“让 ESLint 支持 import”,而在于用对规则、配好环境、避开陷阱。

确保 ESLint 正确识别 ES Module 语法

ESLint 默认按 CommonJS 解析,若项目用 import/export 却没配置好,会直接报错“Parsing error: The keyword 'import' is reserved”。必须显式声明模块类型:

  • .eslintrc.js 中设置 sourceType: 'module'
    parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }
  • 启用对应环境:比如浏览器项目加 browser: true,Node.js 项目加 node: true,否则全局变量(如 process)或内置对象(如 fetch)可能被误报未定义
  • TypeScript 项目额外注意:需使用 @typescript-eslint/parser,且 tsconfig.jsonmodule 字段应为 "ESNext""NodeNext",否则 ESLint 可能解析失败

常用导入相关规则配置

ESLint 官方和插件提供多条直接约束 import 行为的规则,建议启用并合理设级:

Alibabacloud Sdk Client Initialization For Java
Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载
  • no-unused-vars:防止 import { foo } from './utils'; 却没用到 foo —— 这类未使用导入会增加包体积,也暴露逻辑疏漏
  • import/no-unresolved(需 eslint-plugin-import):检查路径是否存在,避免拼写错误或别名配置遗漏导致运行时报错
  • import/first:强制所有 import 必须在文件顶部,禁止出现在函数内或变量声明后,保障静态分析可靠性
  • import/no-duplicates:同一模块多次导入(如分别 import a from 'x'; import { b } from 'x';)会被合并,减少冗余
  • import/order:统一导入顺序(如先内置模块 → 第三方 → 本地),提升可读性;配合 eslint-config-prettier 关闭与 Prettier 的格式冲突

处理动态 import 和特殊场景

ES Modules 支持 import('./module.js') 动态导入,ESLint 默认不校验其返回值类型或路径有效性,需针对性配置:

  • 动态导入的 Promise 返回值建议用 await.then() 处理,可用 no-async-promise-executor 避免嵌套错误
  • 若用 Webpack 别名(如 @/components),需在 settings.import/resolver 中配置别名映射,否则 no-unresolved 会误报
  • 条件导入(如 if (env === 'dev') import('./debug.js'))属于运行时行为,ESLint 无法静态分析,应尽量避免;如必须使用,可用 // eslint-disable-next-line import/no-unresolved 注释临时忽略

与构建工具协同验证

ESLint 检查的是源码层面的导入结构,但真实模块解析由打包器(如 Vite、Webpack)或浏览器完成。二者需保持一致:

  • Vite 项目默认支持 .js 后缀省略,但 ESLint 的 import/no-unresolved 默认要求写全后缀;可在规则中配置 extensions: ['.js', '.ts', '.jsx'] 统一判断标准
  • 使用 export * as ns from './x' 时,确保导出模块实际存在命名导出,否则 ESLint 不报错但运行时会失败;建议搭配 TypeScript 的 isolatedModules: true 提前拦截
  • CI 流程中建议同时运行 eslint --ext .js,.ts src/vite build,双保险覆盖静态与动态导入问题

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

javascript java

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4026

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1029

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

3904

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

820

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1696

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

2965

4

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

2023.09.12

3853

6

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

2023.09.20

2440

5

java访问控制修饰符介绍
java访问控制修饰符介绍

java访问控制修饰符有四种,分别是public、protected、private、默认访问修饰符。详细介绍:1、public,public是最宽松的访问控制修饰符,被修饰的类、方法和变量可以被任何其他类访问,当一个类、方法或变量被声明为public时,它们可以在任何地方被访问,无论是同一个包中的类还是不同包中的类;2、protected修饰符等等。

2023.09.20

808

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习