首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

  • 24-12-06 01:03
  • 2020
  • 11762
juejin.cn

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 格式:

js
代码解读
复制代码
{ "env": { "browser": true, "node": true }, "extends": "eslint:recommended", "rules": { "semi": ["error", "always"] } }

YAML 格式:

js
代码解读
复制代码
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 模块,非常适合在需要动态导入或复杂逻辑的项目中使用。

示例

js
代码解读
复制代码
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,下文我们会详细介绍。

示例

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 格式:非常简洁,便于读取和解析。
  • 静态配置:无法编写动态逻辑,只能用于定义静态规则。

示例

js
代码解读
复制代码
{ "env": { "browser": true, "node": true }, "extends": ["eslint:recommended"], "rules": { "quotes": ["error", "single"], "semi": ["error", "always"] } }

.eslintrc.yaml 或 .eslintrc.yml 文件

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

特点

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

示例

js
代码解读
复制代码
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 格式):

js
代码解读
复制代码
// 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 格式):

js
代码解读
复制代码
// .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的模块语法,在动态配置、可读性和与现代工具的兼容性方面都表现良好。

注:本文转载自juejin.cn的快乐就是哈哈哈的文章"https://juejin.cn/post/7440113256029863999"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

101
推荐
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top