规范化介绍：规范化是我们践行前端工程化中重要的一部分。
- 为什么要有规范化？
（1）软件开发需要多人协同
（2）不同开发者具有不同的编码习惯和喜好
（3）不同的编码习惯增加项目维护成本
（4）每个项目或者团队需要明确统一的标准 - 哪里需要规范化标准？
（1）代码、文档、甚至是提交日志
（2）开发过程中人为编写的成果物
（3）代码标准化规范最为重要 - 实施规范化的方法？
（1）编码前人为的标准约定
（2）通过工具实现Lint
一、ESLint
1. ESLint 介绍
- 最为主流的 JavaScript Lint 工具 监测 JS 代码质量
- ESLint 很容易统一开发者的编码风格（缩进、换行、分号、空格等、找到bug,如从未使用的变量等）
- ESLint 可以帮助开发者提升编码能力 ESLint 文档
2. ESLint 安装
- 初始化项目
npm init - 安装 ESLint 模块为开发依赖
npm install eslint --save-dev(此处注意，项目名不要叫eslint不然会报错) - 通过 CLI 命令验证安装结果
npx eslint --version
3. ESLint 快速上手
ESLint 检查步骤
- 编写“问题”代码
- 使用eslint执行监测
- 完成eslint使用配置
npx eslint 1.js（1.js是文件名称）
npx eslint --init
4. ESLint 配置文件解析
- env:标记当前代码最终的运行环境，ESLint会根据环境信息来判断某一个全局成员是否是可用的，从而去避免代码中去使用不可使用的成员。如：browser:true 代码会运行在浏览器环境，可以直接使用document或者window等。可以同时使用多个环境。
- extends:继承一些共享配置。很多时候需要在多个项目之间共享一个配置，就可以定义一个公共配置模块，在这里去继承。extends可以是一个数组，可以继承多个。
- parserOptions:用来设置语法解析器的相关配置。如：ecmaVersion控制是否允许使用ecma语法。
- rules:配置eslint中每个检验规则的开启或者关闭。eslint rules
- globals:全局配置使用。
5. ESLint 配置注释
将配置直接通过注释的方式写在脚本文件当中，再去执行代码校验。开发过程中难免遇到一两个点必须要违反配置规则的情况，这种情况肯定不能因为一两个点去推翻配置，所以使用配置注释去解决这样问题。
注释内容：eslint-disable-line 【这一行禁用eslint】 但是这一行若有其他错误就也无法发现了 所以要直接指出具体禁用内容 no-template-curly-in-string 【模版字符串禁用eslint】
注释的方式不仅能禁用某个规则，还能去声明全局变量、修改某个规则的配置、临时开启某个环境等等。。
eslint 配置注释
6. ESLint 结合自动化工具
ESLint集成自动化构建项目当中优点：
- 集成之后eslint一定会工作
- 与项目统一、管理更加方便
(1)eslint+gulp
准备工作：
使用：
写了错误代码 但是没有爆出错误
能识别到错误了，解决
(2) eslint+webpack
eslint结合webpack，并不是以插件的方式集成的，而是通过loader机制。
准备工作：
(3) eslint+webpack后续配置
npm install eslint-plugin-react
1.插件配置解决上面问题：
2.共享配置解决上面问题：
eslint-plugin-react 导出了两个共享配置：recommend和all,通过集成去使用。
7.现代化项目集成 ESLint
vue-cli初始化生成项目：
安装项目，此时eslint已经集成到项目中了。
8.ESLint 检查 TypeScript
ts相比于js有很多特殊语法，所以需要给他指定一个语法解析器。
二、Stylelint 认识
1.项目中除了js代码需要被lint，css代码也需要被lint。
Stylelint的使用可以参考eslint因为两者是极其类似的。
安装：npm install stylelint -D
解决：
npm install stylelint-config-standard
发现问题：1.可以直接定位去修改 2.使用stylelint先帮我们完成大多数问题的自动化修复
2.使用stylelint检查sass代码
安装：npm install stylelint-config-sass-guidelines
less postcss和上面类似！
三、Prettier 使用
安装：npm install prettier -D
执行命令结果是
将格式化的结果直接输出到控制台当中。想要将将格式化的结果直接复制到源文件当值如何做？在命令后面加 --write。 npx prettier style.css --write
使用通配符方式将所有文件直接格式化
npx prettier . --write
四、Git Hooks
代码提交至仓库之前未执行lint工作，导致有问题的代码被提交到了仓库，后续再集成可能会出错，如何解决上述问题？通过Git Hooks在代码提交之前强制lint
1.Git Hooks工作机制
在项目的隐藏 .git 文件夹下 找到 hooks 文件夹，里面全部是git的钩子
pre-commit.sample这个文件就是当commit时执行的钩子。创建一个pre-commit文件，内容如下：
当有更新，去commit的时候可见：（写在commit 中的内容被输出了）
通过钩子对应具体配置操作，在操作发生的时候，就可以自动去执行钩子里面去定义的一些任务。
2.ESLint 结合 Git Hooks
-
由于需要写shell脚本，前端并不擅长，所以有人开发了一个npm 模块（Husky），可以实现Git Hooks的使用需求。使用Husky之前要还原git的hooks（删除上面新建的pre-commit文件），否则会影响husky的工作。
安装：npm install husky -Dcommit 输出了我们设置好的命令 scripts下的test的内容：
调整输出命令内容：
可见有对代码进行lint操作
-
若需要对代码进行其他合并操作，需要如下配置 安装：
npm install lint-staged -D依次执行lint 和 add 操作，在代码提交之前，强行lint，同时完成后续操作需求！
推荐使用husky配合eslint操作！
