eslint.config.js共和eslintrc的区别

ESLint 生态中存在两种配置文件格式：

• .eslintrc.*，在 Eslint 9 之前的配置文件
• eslint.config.js ，eslint 9 之后推出的新的扁平化的配置文件(flat-config)

两种配置文件 在配置规则、配置处理器(processor) 的语法方面相同，但在很多方面有一些不同。

两者的核心区别在于：

配置文件的位置和格式不同

eslintrc 允许在多个位置使用多个配置文件、使用多种配置文件格式，而新的 flat config 限制一个位置、一种格式（eslint.config.js），减少混乱。
两者的一个重要的区别还在于.eslintrc 是配置一个对象，而eslint.config.js是配置一个对象数组。

新的配置使用对象数组可以带来更灵活、更精细的处理方式，比如我们想对不同的文件采用不同的规则配置：

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插件的示例：

// .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属性不存在。

示例：

// .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中，预定义的配置以模块的存在，需导入使用。

// .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，需要将配置移至单独的文件中。