2-2-4规范化标准

1.规范化标准
前端工程化

为什么要有规范标准
	软件开发需要多人协同
	不同开着具有不同的编码习惯和喜好
	不同的喜好增加项目维护成本
	每个项目或者团队需要明确统一的标准
哪里需要规范化标准
	代码 文档 甚至时提交日志
	开发过程中认为编写的成果物
	代码标准化规范最为重要
实施规范化的方法
	编码前 人为的标准约定
	通过工具实现Lint
		ESLint 工具使用
		定制ESLint校验规则
		ESLint 对TypeScript的支持
		ESLint结合自动化工具或者Webpack
		基于ESLint的衍生工具
		Stylelint工具的使用

2.ESLint介绍
最为主流的JavaScript Lint工具 坚持J是代码指令
ESLint很容易统一开发者的编码风格
ESLint可以帮助开发者提升编码能力

3.ESLint安装
1.初始化项目
2.安装ESLint模块为开发依赖 npm install eslint
3.通过CLI命令验证安装结果 npx eslint --version

4.ESLint快速上手
编写 问题 代码
使用ESLint 执行检测
完成ESLint 使用配置
init
三种功能模式选择
三种编码语法选择 ESM CJS NONE
三种框架 react vue none
有无使用ts
代码运行的环境 browser node
定义项目的代码风格 编码规范
配置文件以何种形式存在 js json
然后提示安装需要用到的插件

	生成.eslintrc.js
	
	npx eslint 文件会去检测
	有错误会提示
		并且可以 --fix自动修正
	
	没有错误正常运行

5.ESLint配置文件解析
env{ //标记代码运行的环境
browser： true， 浏览器环境 对应的全局成员就可以使用不报错
es6：true 语言特性
},
extends: [ //继承多个共享配置
‘standard’
],
parserOptions: { 设置语法解析器 于法检测
ecmaVersion: 2015 某个es版本的语法 不能用之后的语法特性
},
rules: { 校验检测的开启和关闭 off 关闭 warn 警告 error 错误
‘no-alert’: “error”
},
globals: { //新版本没有了 声明可以使用的全局成员
“jQuery”: “readonly”
}

6.配置注释 eslint-configuration-comments
将配置通过注释的方式写在脚本中
// eslint-disable-line no-template-curly-in-string
ESLint配置文件解析会对注释进行特殊关照 需要写好指定规则，否则会过滤所有错误

7.ESLint结合自动化工具的使用
集成只会 ESLint一定会工作
与项目统一 管理更加方便
与Gulp相结合
完成依赖安装
完成ESLint模块安装
完成 gulp-ESLint模块安装

	对script
		在babel进行处理前  ESLint 检测
		
		同样  需要进行ESLint init生成配置文件
		npx gulp script  因为ESLint放在了script任务中
		plugins.eslint()
		plugins.eslint.format()
		plugins.eslint.failAfterError()

7.ESLint结合自动化工具的使用 Webpack
模块交给loader处理
ESLint也作为模块给loader处理
完成对应模块
安装ESLint模块
安装ESLint-loader模块
初始化.estlintrc.js
eslint-loader 需要放在babel-loader后面 因为执行顺序是先后再前
或者设置eslint-loader的优先级设置最高 enfor ： ‘pre’

8.ESLint结合自动化工具的使用 Webpack 的后续配置
特殊的语法 react eslint-plugin-react 插件针对react的检测
.estlintrc.js里面
开启react的规则

也可以再extends继承 共享的配置

9.现代化项目继承ESLint vue项目
Lint on save 保存时的校验
不在工具的配置和使用上花费太多的时间

10.ESLint检测TypeScript
记得安装TS
初始化.estlintrc.js
安装typescript-eslint模块
新增语法解析器
parser: ‘@typescript-eslint/parser’,

11.StyleLint的认识 与ESLint基本一致 极其类似
提供默认的代码检查规则
提供CLI工具，快速调用
通过插件支持Sass Less PostCSS
支持Gulp或Webpack集成

npm install stylelint
npx stylelint 文件
添加
	.stylelintrc.js 文件 比较简单
	
	安装stylelint-config-standard 插件
	
	stylelint-config-sass-guideliness 插件

12.Prettier的使用 通用的前端代码格式化工具 适用大部分文件
规范化标准
使用操作
npm install prettier

npx prettier 文件   格式化文件 --write
npx prettier . --write  所有代码文件格式化

13.Git Hooks介绍
代码提交值仓库之前未执行lint工作 代码和格式可能有问题
通过Git Hooks在代码提交之前强制执行ESLint

Git Hooks也称为git钩子，每个钩子对应一个任务
通过shell脚本可以编写钩子任务触发时要具体执行的操作

在commit操作的时候出发ESLint操作

14.ESLint 和Git Hooks的结合
通过shell脚本可以编写钩子任务触发时要具体执行的操作
再不编写shell脚本的前提下
Husky模块

	npm install husky
	package.json里面配置以下属性
	"husky":{
		"hooks":{
			"pre-commit":"npm run test"
		}
	}
	再修改tset命令为 
		eslint 文件
		
	强行link
	npm install link-stage
	"link-stage":{
		"*.js":{
			"eslint",
			"git add"
		}
	}
	
	推荐husky 
		commit之前验证代码和其他操作