ESLint配置文件简介
作为前端规范的一个重要工具,ESLint 大家一定有耳闻!
Eslint的基础知识:前端必备的eslint知识点,我终于详细的整理出来了!
我们在平时开发中,一定会发现有很多格式的Eslint配置文件,比如.eslintrc.cjs
、.eslintrc.js
等等。还有一些不常见的格式文件,如.eslintrc
、.eslintrc.json
和 .eslintrc.yaml
等等。
好烦,这些不同格式的配置文件都有什么区别呢?用什么类型的配置文件合适呢?
ESLint 提供了多种格式的配置文件来满足不同项目的需求,但无形中增加了我们的学习负担!行吧,这篇文章我们就梳理一下 .eslintrc
、.eslintrc.cjs
、.eslintrc.js
、.eslintrc.json
和 .eslintrc.yaml
这些文件的特点及用法,并探讨在 Vite 项目中如何选择最合适的配置格式。
不同格式配置文件介绍
.eslintrc
文件
.eslintrc
是 ESLint 最基础的配置文件格式,通常是 JSON 或 YAML 格式,不带扩展名。这个格式的文件非常适合简单项目中需要静态 ESLint 配置的场景。因此,这种格式其实和.eslintrc.json或.eslintrc.yaml是完全一致的。
JSON 格式:
{
"env": {
"browser": true,
"node": true
},
"extends": "eslint:recommended",
"rules": {
"semi": ["error", "always"]
}
}
YAML 格式:
env:
browser: true
node: true
extends: "eslint:recommended"
rules:
semi: ["error", "always"]
.eslintrc
适合简单的静态配置场景,比如不需要动态导入和逻辑控制的项目中。
.eslintrc.cjs
文件
.eslintrc.cjs
是 CommonJS 模块格式的配置文件,适合在 Node.js 项目中使用。它允许在 ESLint 配置文件中使用 JavaScript 语法,包括动态导入、条件判断、使用 require
等。
特点
- 支持动态逻辑:可以使用 JavaScript 编写动态规则,支持
require
语法和条件判断。 - 适用于 Node.js:
cjs
扩展名表明这是一个 CommonJS 模块,非常适合在需要动态导入或复杂逻辑的项目中使用。
示例
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
env: {
browser: true,
node: true
},
extends: "eslint:recommended",
rules: {
"semi": ["error", "always"],
"no-console": isProduction ? "error" : "warn" // 生产环境禁止console输出,开发环境警告
}
};
适用场景
.eslintrc.cjs
适合需要动态配置的项目,可以根据环境或其他变量调整规则。现在的前端项目都基于脚手架,脚手架是识别node环境的,因此,eslintrc.cjs就非常适合我们的vite或webpack前端项目
.eslintrc.js
文件
和.eslintrc.cjs一样,.eslintrc.js其实也用于CommonJS 模块格式的配置文件,比如你的项目没有明确模块类型,那.eslintrc.js默认就是CommonJS 模块格式。
使用 .eslintrc.cjs
,我们可以明确避免模块格式混合问题,特别是在同时处理 CommonJS 和 ES 模块的混合项目中,使用 .cjs
后缀能更清晰地定义模块格式。
但是,如果我们的项目指明是ES6模块规范(package.json
文件中有 type: "module"
)``,那么默认情况下,Node.js 会把 .js
文件视为 ESM(ECMAScript 模块) ,而 .cjs
文件则被视为 CommonJS 模块。在这种情况下,如果你需要在 ESLint 配置中使用 CommonJS 模块,应该使用 .eslintrc.cjs
而不是 .eslintrc.js
。而.eslintrc.js也应该改名为.eslintr.config.js,下文我们会详细介绍。
示例
// .eslintrc.js
module.exports = {
env: {
browser: true,
node: true
},
extends: "eslint:recommended",
rules: {
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
};
适用场景
简单来说,.eslintrc.js和.eslintrc.cjs完全一致,.eslintrc.js用于一些比较老的node项目,.eslintrc.cjs基本代替了.eslintrc.js。
.eslintrc.json
文件
.eslintrc.json
是 JSON 格式的配置文件,通常用于静态配置项目。与 .eslintrc
一样,.eslintrc.json
不能包含动态逻辑,适合简单项目。
特点
- JSON 格式:非常简洁,便于读取和解析。
- 静态配置:无法编写动态逻辑,只能用于定义静态规则。
示例
{
"env": {
"browser": true,
"node": true
},
"extends": ["eslint:recommended"],
"rules": {
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}
.eslintrc.yaml
或 .eslintrc.yml
文件
YAML 格式的 ESLint 配置文件具有更清晰的结构,适合阅读较多配置内容的项目,与 JSON 类似,也仅支持静态配置。
特点
- 易读性强:YAML 格式的缩进结构便于阅读,适合定义较多配置项。
- 静态配置:与
.json
文件一样,无法编写动态逻辑。
示例
env:
browser: true
node: true
extends:
- eslint:recommended
rules:
quotes:
- "error"
- "single"
semi:
- "error"
- "always"
适用场景
.eslintrc.yaml
适合希望提高配置文件可读性、但又不需要动态逻辑的项目。
在 Vite 项目中选择最佳配置文件
Vite 是一个现代化的构建工具,支持 ESM 和动态模块,因此在 Vite 项目中,.eslintrc.cjs
或 eslint.config.js
是更好的选择。具体原因如下:Vite 项目通常依赖模块化和动态导入,.eslintrc.cjs
和 eslint.config.js
提供了动态配置的能力,可以根据不同的环境调整 ESLint 配置。
如果我们的package.json
文件中有 type: "module",那么我们可以选择
使用ES6的模块规范,以eslint.config.js作为配置文件。
eslint.config.js(ESM 格式):
// eslint.config.js
export default [
{
ignores: ["node_modules/"],
},
{
files: ["*.js", "*.jsx"],
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
rules: {
"quotes": ["error", "single"],
"semi": ["error", "always"]
},
},
];
如果你偏爱CommonJS规范,使用eslintrc.cjs即可。
.eslintrc.cjs(CommonJS 格式):
// .eslintrc.cjs
module.exports = {
env: {
browser: true,
node: true,
es2021: true
},
extends: [
"eslint:recommended",
"plugin:vue/vue3-recommended"
],
rules: {
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
};
总结:前端项目应该使用哪种格式
首先,要明确的是,无论哪种格式,配置的内容都是一样的,不同的只是文件格式,不同格式的区别如下:
- 简单静态配置:使用
.eslintrc
、.eslintrc.json
或.eslintrc.yaml
。 - 需要动态逻辑:选择
.eslintrc.cjs(.eslintrc.js同cjs)
,尤其是 Node.js 项目。
由于.eslintrc.cjs文件支持动态配置内容,因此,现代的各种脚手架前端项目都建议使用这个格式文件。
在vite的构建工具中,我们也可以使用eslint.config.js格式的配置文件,它与.eslintrc.cjs区别就是它使用了ES6的模块语法,在动态配置、可读性和与现代工具的兼容性方面都表现良好。