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

相关推荐
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727577 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架