规范化标准

规范化是我们践行前端工程化中重要的一部分

基于以下几个方面介绍：

1、为什么要有规范化标准
2、哪里需要规范化标准
3、实施规范化的方法

为什么要有规范化标准

软件开发需要多人协同
不同开发者有不同的编码习惯和喜好
不同的喜好增加项目维护成本
每个项目或者团队需要明确统一的标准

哪里需要规范化标准

代码、文档、甚至是提交日志
开发过程中人为编写的成果物
代码标准化规范最为重要

实施规范化的方法

编码前人为的标准约定（约定、review）
通过工具实现Lint（通过工具规范的过程为lint）可靠

常见的规范化实现方法

es lint 工具使用
定制ESLint校验规则
ESLint对TypeScrit的支持
ESLint结合自动化工具或者Webpack
基于ESLint的衍生工具
Stylelint工具的使用
结合git hook在提交前对代码校验

ESLint介绍

最为主流的JavaScript Lint工具，监测JS代码的质量
ESlint很容易统一开发者的编码风格（分号、空格等，声明，相等操作等）
ESlint可以帮助开发者提升编码能力

ESLint安装

1、使用ESlint的目的是为了校验项目，前提是初始化一个项目

2、因ESLint主要对开发时编码生效，因此安装ESLint模块为开发依赖

3、通过cli命令验证安装结果

npx 是npm的一个工具，可以自动找到bin目录下的命令（与yarn类似）

ESLint快速上手

npx eslint 文件路径 --fix

✔ How would you like to use ESLint?

希望怎么使用eslint？
    
    1、语法检查
    
    2、语法检查+问题代码
    
    3、语法检查+问题代码+统一风格

✔ What type of modules does your project use?

项目中使用哪种模块化方案？
    
    1、ESM
    
    2、CommonJs
    
    3、none

✔ Which framework does your project use?

使用哪种框架？
    
    1、React
    
    2、Vue
    
    3、none

✔ Does your project use TypeScript?

项目中是否使用ts？
    
    1、是
    
    2、否

✔ Where does your code run?

代码在什么环境执行？
    
    1、浏览器
    
    2、Node

✔ How would you like to define a style for your project?

你的项目希望使用哪种风格？
    
    1、市面上主流的风格
    
    2、回答问题形成风格
    
    3、根据代码文件推断风格

✔ Which style guide do you want to follow?

希望遵循哪种风格规范？
    
    1、Airbnb
    
    2、stand（不用结尾分号）
    
    3、google

✔ What format do you want your config file to be in?

配置文件需要什么样文件存放？

    1、JavaScript
    
    2、YAML
    
    3、JSON

ESLint配置文件解析

env: 标记当前代码运行的环境，会启用一组预定义的一组全局变量，多个环境不冲突，可启用多个

具体风格文件对应：eslint-config-standard/eslintrc.json

parserOptions: 控制是否允许使用某个版本的ECMA语法,只进行语法检测，不代表成员是否可用，具体要看环境配置

rules：配置每个规则的开启和关闭

globals：额外声明可使用的全局成员

ESLint 配置注释

// eslint-disable-line 行内注释，会禁用全部规则

// eslint-disable-line rule 行内注释，禁用某个规则

不仅仅禁用某个规则，具体参考eslint.cn/docs/user-g…

ESLint 结合自动化工具

集成之后，eslint一定会工作
与项目统一，管理更加方便

gulp: eslint.foramt()和eslint.failAfterError()
webpack配置

webpack: loader方式，放入use最后一个（从后往前执行）或者添加个rule，添加enfore配置且为pre，先执行

plugins：数组形式，名称会去掉eslint-plugin

extends: plugin: react/recomoned 继承方式

Stylelint

使用与eslint类似
提供默认的代码检查规则
提供cli工具，快速调用
通过插件支持sass less postcss衍生语法检查
支持gulp或webpack集成

// -D 等价于 --dev，-S 等价于 --save
npm i stylelint -D

stylelint内不包含共享配置，因此需要手动安装stylelint-config-standard模块

npm i stylelint-config-standard -D

在.stylelintrc.js文件中，增加配置

module.exports = {
    extends: 'styleline-config-standard'
}

如果要对sass样式表进行检查，需要安装 stylelint-config-sass-guidelines

npm i stylelint-config-sass-guidelines -D

配置文件修改为：

module.exports = {
    extends: [
        "styleline-config-standard",
        "stylelint-config-sass-guidelines"
    ]
}

集成到gulp等工作流中，与eslint类似

prettier 的使用

代码格式化

安装

npm i prettier -D

默认格式化后的代码输出到控制台，如需到文件，后续跟上 --write 来覆盖源文件

格式化所有文件

npx prettier . --write

git hooks工作机制

在代码commit 或 push 前对代码进行强制lint等操作

git hook也称之为git 钩子，每个钩子都对应一个任务

通过shell脚本可以编写钩子任务触发时要具体执行的操作

在.git目录内，修改hooks内pre-commit

ESLint 结合 Git Hooks

Husky 可以实现 Git Hooks 的使用需求

package.json内增加 husky的key，内容如下

hooks: {
    "pre-commit": "npm run lint"
}

在script中增加lint命令，如下：

 lint: eslint ./index.js

再次提交时就会运行此命令检查代码，通过后才可提交

husky 安装时现阶段是7.0+的版本，使用方式和视频又较大出入，看github上官方介绍，使用如下方式：

// 第一步安装 
npm install husky --save-dev

// 第二步启用git hooks
npx husky install

// 第三步，package.json添加配置
{
  "scripts": {
    "prepare": "husky install"
  }
}

// 第四步，husky添加pre-commit
npx husky add .husky/pre-commit "npm test"

// 第五步，添加文件进行测试

多个检测步骤

lint-staged 插件

"lint-staged": {
    "*.js": [
        "eslint --fix",
        "git add"
    ]
}