eslint.config.js VS .eslintrc.*

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 文件中,您可以通过envglobalsparserOptions属性配置各种语言选项。

eslint.config.js中,globalsparserOptions合并在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,需要将配置移至单独的文件中。

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui