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

相关推荐
江号软件分享35 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友9 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维