开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

eslint实践

背景故事

在某公司进行前端开发工作。发现公司内部代码没有统一的格式化规范。每一期开发，都可能有最多10个左右开发人员同时开发一个git项目。每次合并代码都会传来阵阵国粹。我寻思。现在eslint不已经是很普及的在使用的规范了吗？于是深入看了看。发现代码中虽然配置了eslint。但是没有格式的校验。只会校验一些error。于是，多次和项目负责人反映问题。提出加入eslint+prettier，全局代码格式化。统一配置。项目负责人接受了我的方案。于是便开始着手处理。在做eslint配置的时候，结合周围人的反应，发现有些人还是不够了解eslint配置。并且没有看过相关的配置规则。

其实最好的学习方法就是看官网。大部分官网都会简洁明了的给出介绍，使用方法。我们这里也快速简单的，先来解答一份项目配置的eslint到底包含哪些配置。有什么作用。

这里有一份eslint配置文件

先简单的看一眼。我们后面针对配置里面的项目。做一个简单的介绍。

module.exports = {
	env: {
		browser: true,
		es2021: true,
		node: true
	},
	parser: 'vue-eslint-parser',
	extends: [
		'eslint:recommended',
		'plugin:vue/vue3-essential',
		'plugin:@typescript-eslint/recommended',
		'plugin:prettier/recommended'
	],
	parserOptions: {
		ecmaVersion: 'latest',
		parser: '@typescript-eslint/parser',
		sourceType: 'module'
	},
	rules: {
		'vue/multi-word-component-names': 'off',
		'@typescript-eslint/no-explicit-any': 'off',
		'@typescript-eslint/no-unused-vars': [
			'error',
			{
				argsIgnorePattern: '^_',
				varsIgnorePattern: '^_'
			}
		],
		'no-unused-vars': [
			'error',
			{
				argsIgnorePattern: '^_',
				varsIgnorePattern: '^_'
			}
		],
		'no-prototype-builtins': 'off'
	}
}

eslint文件后缀

项目中的eslint通常会有下面的这些格式、都是生效的。如果有多个。以下列表。也是优先级。

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json

项目中也可以有多个不同的eslint配置文件。有多配置文件需求的，请参考eslint 级联和层次结构

创建eslint文件

使用vue脚手架初始化项目。可以选择eslint。项目初始化完成会有对应的配置文件生成。 vue2/vue2+ts/vue3/vue3+ts其中这些项目，大家可以本地快速初始化一下，对比生成的文件差异。

当然，eslint是支持在任意项目中使用的

npm install -D eslint
npx eslint --init

运行命令后，一步一步向下选择。就能生成eslint配置了。

env

指定环境：注入该环境的全局变量。

env: { browser: true, es2021: true, node: true },

parser解析器

Esprima 默认解析器
@babel/eslint-parser - 使 Babel 解析器与 ESLint 兼容的的包装器。
@typescript-eslint/parser - 一个将 TypeScript 转换为与 ESTree 兼容的形式的解析器，因此它可以在 ESLint 中使用。

extends

eslint:recommended 这一行将启用所有标记为“推荐”的规则。

eslint-plugin-vue
vue的官方eslint插件。它提供了三个配置集，约束依次增强：

vue3-essential
vue3-strongly-recommended
vue3-recommended

为TypeScript 代码库提供 lint 规则。需要在parserOptions中配置@typescript-eslint/parser搭配使用

@typescript-eslint/recommended

eslint-config-prettier 和 eslint-plugin-prettier

提供关闭eslint与prettier冲突的规则功能。将项目使用prettier规则校验

plugin:prettier/recommended

parserOptions

作为参数传递给 parser

ecmaVersion: 'latest' 开启es版本版本支持
parser: '@typescript-eslint/parser' 遇到ts类型文件。使用该解析器。
sourceType: 'module' 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。

rules开启或者关闭规则

"off" 或 0 - 关闭规则
"warn" 或 1 - 启用并视作警告（不影响退出）。
"error" 或 2 - 启用并视作错误（触发时退出代码为 1）

项目到底怎么配置eslint