团队代码规范工程化 eslint

前言

每个团队都需要一个统一的 JavaScript 代码规范，团队成员都遵守这份代码规范来编写代码

---

Prettier 也可以保证代码风格一致。是的，Prettier 确实可以按照设置的规则对代码进行统一格式化，后面的文章也会有对应的介绍。但是需要明确的一点是，Prettier 只会在格式上对代码进行格式化，一些隐藏的代码质量问题 Prettier 是无法发现的，而 ESLint 可以

一、基本使用流程

1.基本流程

1. 基于业界现有的 ESLint 规范和团队代码习惯定制一套统一的 ESLint 代码规则
2. 将统一代码规则封装成 ESLint 规则包接入
3. 将 ESLint 接入脚手架、编辑器以及研发工作流中

2.快速上手

配置文件 .eslintc.js

module.exports={
	env:{
		es2021:true,
	},
	extends:'eslint:recommended',
	parserOptions:{
		ecmaVersion:12,
	},
	rules:{}
}
// ESLint 不允许代码中出现未被使用的变量。这是一个好习惯，有利于代码的维护。

3.简单配置

以分号和引号举例，现在你作为团队代码规范的指定人，希望团队成员开发的代码，都是单引号和带分号的

打开 .eslintrc.js 配置文件，在 rules 中添加相关配置项

module.exports={
	env:{
		es2021:true,
	},
	extends:'eslint:recommended',
	parserOptions:{
		ecmaVersion:12,
	},
	rules:{
		semi:['error','always'],
		quotes:['error','single']
	}
}
// no-unused-vars 定义了变量却未使用。
// quotes 字符串必须使用单引号
// semi 缺失分号
//具体各个规则如何配置可以查看：https://eslint.org/docs/rules

4.自动修复

执行 eslint xxx --fix 可以自动修复一些代码中的问题，将无法自动修复的问题暴露出来
比如上文中提到的引号和分号的问题，就可以通过 --fix 自动修复，而 no-unused-vars 变量未使用的问题，ESLint 就无法自动修复