ESLint 生态中存在两种配置文件格式:
.eslintrc.*
,在 Eslint 9 之前的配置文件eslint.config.js
,eslint 9 之后推出的新的扁平化 的配置文件(flat-config)
两种配置文件 在配置规则、配置处理器(processor) 的语法方面相同,但在很多方面有一些不同。
配置文件的位置和格式不同:
eslintrc
允许在多个位置使用多个配置文件、使用多种配置文件格式,而新的 flat config 限制一个位置、一种格式(eslint.config.js)
,减少混乱。
两者的一个重要的区别还在于**eslintrc**
是配置一个对象,而 **eslint.config.js**
是配置一个对象数组。
新的配置使用对象数组可以带来更灵活、更精细的处理方式,比如我们想对不同的文件采用不同的规则配置:
javascript
export default [
{
files: ["**/*.js", "**/*.cjs"],
rules: {
"semi": "error",
"no-unused-vars": "error"
}
},
{
files: ["**/*.js"],
rules: {
"no-undef": "error",
"semi": "warn"
}
}
];
此配置有两个具有重叠files
模式的配置对象。第一个配置对象适用于所有.js
和.cjs
文件,而第二个配置对象仅适用于.js
文件。
导入插件、解析器、处理器的方式不同
对于导入插件、解析器、处理器,在eslintrc
采用的是基于字符串的导入解析系统,而在eslint.config.js
中这些就是一个 js 对象,所以可以用 js 模块导入语法加载(esm 或 commonjs)。
以下是一个导入 jsdoc
插件的示例:
javascript
// .eslintrc.js
module.exports = {
// ...other config
plugins: ["jsdoc"],
rules: {
"jsdoc/require-description": "error",
"jsdoc/check-values": "error"
}
// ...other config
};
// eslint.config.js
import jsdoc from "eslint-plugin-jsdoc";
export default [
{
files: ["**/*.js"],
plugins: {
jsdoc: jsdoc
},
rules: {
"jsdoc/require-description": "error",
"jsdoc/check-values": "error"
}
}
];
配置语言选项
在 eslintrc
文件中,您可以通过env
、globals
和parserOptions
属性配置各种语言选项。
在eslint.config.js
中,globals
和parserOptions
合并在languageOptions
键下,env
属性不存在。
示例:
javascript
// .eslintrc.js
module.exports = {
env: {
browser: true,
},
globals: {
myCustomGlobal: "readonly",
},
parserOptions: {
ecmaVersion: 2022,
sourceType: "module"
}
// ...other config
}
// eslint.config.js
import globals from "globals";
export default [
{
languageOptions: {
ecmaVersion: 2022,
sourceType: "module",
globals: {
...globals.browser,
myCustomGlobal: "readonly"
}
}
// ...other config
}
];
使用预定义配置的不同
在 eslintrc
中,使用extends
属性来使用预定义的配置。ESLint 附带两个可以作为字符串访问的预定义配置:
"eslint:recommended"
:ESLint 推荐的规则"eslint:all"
:ESLint 附带的所有规则
在eslint.config.js
中,预定义的配置以模块的存在,需导入使用。
javascript
// .eslintrc.js
module.exports = {
extends: "eslint:recommended",
rules: {
semi: ["warn", "always"]
}
}
// eslint.config.js
import js from "@eslint/js";
import customConfig from "./custom-config.js";//本地的预定义配置
export default [
js.configs.recommended,
customConfig,
{
rules: {
semi: ["warn", "always"]
}
}
];
配置忽略检查文件的方式不同
eslintrc
使用单独的.eslintignore
文件或在ignorePatterns
中配置。
eslint.config.js
配置不再支持.eslintignore
文件,而使用ignores
属性配置
package.json 支持
使用 eslintrc,可以使用package.json
文件通过配置 ESLint 。
使用eslint.config.js
后,不再可能使用文件package.json
来配置 ESLint,需要将配置移至单独的文件中。