要长脑子了，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.js：cjs 扩展名表明这是一个 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.cjs 或 eslint.config.js 是更好的选择。具体原因如下：Vite 项目通常依赖模块化和动态导入，.eslintrc.cjs 和 eslint.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的模块语法，在动态配置、可读性和与现代工具的兼容性方面都表现良好。

avatar
文章
阅读
粉丝