要长脑子了,eslint的配置文件格式居然这么多!

257 阅读5分钟

ESLint配置文件简介

作为前端规范的一个重要工具,ESLint 大家一定有耳闻!

Eslint的基础知识:前端必备的eslint知识点,我终于详细的整理出来了!

我们在平时开发中,一定会发现有很多格式的Eslint配置文件,比如.eslintrc.cjs.eslintrc.js等等。还有一些不常见的格式文件,如.eslintrc.eslintrc.json.eslintrc.yaml等等。

好烦,这些不同格式的配置文件都有什么区别呢?用什么类型的配置文件合适呢?

ESLint 提供了多种格式的配置文件来满足不同项目的需求,但无形中增加了我们的学习负担!行吧,这篇文章我们就梳理一下 .eslintrc.eslintrc.cjs.eslintrc.js.eslintrc.json.eslintrc.yaml这些文件的特点及用法,并探讨在 Vite 项目中如何选择最合适的配置格式。

不同格式配置文件介绍

.eslintrc 文件

.eslintrc 是 ESLint 最基础的配置文件格式,通常是 JSON 或 YAML 格式,不带扩展名。这个格式的文件非常适合简单项目中需要静态 ESLint 配置的场景。因此,这种格式其实和.eslintrc.json或.eslintrc.yaml是完全一致的。

JSON 格式:

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"]
  }
}

YAML 格式

env:
  browser: true
  node: true
extends: "eslint:recommended"
rules:
  semi: ["error", "always"]

.eslintrc 适合简单的静态配置场景,比如不需要动态导入和逻辑控制的项目中。

.eslintrc.cjs 文件

.eslintrc.cjs 是 CommonJS 模块格式的配置文件,适合在 Node.js 项目中使用。它允许在 ESLint 配置文件中使用 JavaScript 语法,包括动态导入、条件判断、使用 require 等。

特点

  • 支持动态逻辑:可以使用 JavaScript 编写动态规则,支持 require 语法和条件判断。
  • 适用于 Node.jscjs 扩展名表明这是一个 CommonJS 模块,非常适合在需要动态导入或复杂逻辑的项目中使用。

示例

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  env: {
    browser: true,
    node: true
  },
  extends: "eslint:recommended",
  rules: {
    "semi": ["error", "always"],
    "no-console": isProduction ? "error" : "warn" // 生产环境禁止console输出,开发环境警告
  }
};

适用场景

.eslintrc.cjs 适合需要动态配置的项目,可以根据环境或其他变量调整规则。现在的前端项目都基于脚手架,脚手架是识别node环境的,因此,eslintrc.cjs就非常适合我们的vite或webpack前端项目

.eslintrc.js 文件

和.eslintrc.cjs一样,.eslintrc.js其实也用于CommonJS 模块格式的配置文件,比如你的项目没有明确模块类型,那.eslintrc.js默认就是CommonJS 模块格式。

使用 .eslintrc.cjs,我们可以明确避免模块格式混合问题,特别是在同时处理 CommonJS 和 ES 模块的混合项目中,使用 .cjs 后缀能更清晰地定义模块格式。

但是,如果我们的项目指明是ES6模块规范(package.json 文件中有 type: "module")``,那么默认情况下,Node.js 会把 .js 文件视为 ESM(ECMAScript 模块) ,而 .cjs 文件则被视为 CommonJS 模块。在这种情况下,如果你需要在 ESLint 配置中使用 CommonJS 模块,应该使用 .eslintrc.cjs 而不是 .eslintrc.js。而.eslintrc.js也应该改名为.eslintr.config.js,下文我们会详细介绍。

示例

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true
  },
  extends: "eslint:recommended",
  rules: {
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
};

适用场景

简单来说,.eslintrc.js和.eslintrc.cjs完全一致,.eslintrc.js用于一些比较老的node项目,.eslintrc.cjs基本代替了.eslintrc.js。

.eslintrc.json 文件

.eslintrc.json 是 JSON 格式的配置文件,通常用于静态配置项目。与 .eslintrc 一样,.eslintrc.json 不能包含动态逻辑,适合简单项目。

特点

  • JSON 格式:非常简洁,便于读取和解析。
  • 静态配置:无法编写动态逻辑,只能用于定义静态规则。

示例

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": ["eslint:recommended"],
  "rules": {
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

.eslintrc.yaml.eslintrc.yml 文件

YAML 格式的 ESLint 配置文件具有更清晰的结构,适合阅读较多配置内容的项目,与 JSON 类似,也仅支持静态配置。

特点

  • 易读性强:YAML 格式的缩进结构便于阅读,适合定义较多配置项。
  • 静态配置:与 .json 文件一样,无法编写动态逻辑。

示例


env:
  browser: true
  node: true
extends:
  - eslint:recommended
rules:
  quotes:
    - "error"
    - "single"
  semi:
    - "error"
    - "always"

适用场景

.eslintrc.yaml 适合希望提高配置文件可读性、但又不需要动态逻辑的项目。

在 Vite 项目中选择最佳配置文件

Vite 是一个现代化的构建工具,支持 ESM 和动态模块,因此在 Vite 项目中,.eslintrc.cjseslint.config.js 是更好的选择。具体原因如下:Vite 项目通常依赖模块化和动态导入,.eslintrc.cjseslint.config.js 提供了动态配置的能力,可以根据不同的环境调整 ESLint 配置。


果我们的package.json 文件中有 type: "module",那么我们可以选择使用ES6的模块规范,以eslint.config.js作为配置文件。

eslint.config.js(ESM 格式):

// eslint.config.js
export default [
  {
    ignores: ["node_modules/"],
  },
  {
    files: ["*.js", "*.jsx"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
    },
    rules: {
      "quotes": ["error", "single"],
      "semi": ["error", "always"]
    },
  },
];

如果你偏爱CommonJS规范,使用eslintrc.cjs即可。

.eslintrc.cjs(CommonJS 格式):

// .eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended"
  ],
  rules: {
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
};

总结:前端项目应该使用哪种格式

首先,要明确的是,无论哪种格式,配置的内容都是一样的,不同的只是文件格式,不同格式的区别如下:

  • 简单静态配置:使用 .eslintrc.eslintrc.json.eslintrc.yaml
  • 需要动态逻辑:选择 .eslintrc.cjs(.eslintrc.js同cjs),尤其是 Node.js 项目。

由于.eslintrc.cjs文件支持动态配置内容,因此,现代的各种脚手架前端项目都建议使用这个格式文件。

在vite的构建工具中,我们也可以使用eslint.config.js格式的配置文件,它与.eslintrc.cjs区别就是它使用了ES6的模块语法,在动态配置、可读性和与现代工具的兼容性方面都表现良好。