规范化标准

1、规范化介绍

1、为什么要有规范标准

开发需要多人协同、喜好与编码习惯不一致增加项目维护成本、项目/团队需要统一标准

2、哪里需要规范标准

代码、文档、提交日志
开发过程中人为编写的内容
代码标准规范最为重要

3、实施规范化的方法

编码前人为的标准约定
通过工具实现Lint

常见的规范化实现方式
ESLint工具使用
定制ESLint校验规则
ESLint对TypeScript的支持
ESLint结合自动化工具或者Webpack
基于ESLint的衍生工具
Stylelint工具的使用

2、EsLin介绍

最主流的JavaScript Lint工具 监测 js 代码质量
EsLint 很容易统一开发者编码风格
提升编码能力

3、EsLin安装

初始化项目
安装EsLint（是一款jiNodeJS开发的npm模块）模块为开发依赖
通过CLI命令验证安装结果

npm init --yes
npm install eslint --save-dev
通过路径找到eslint的可执行文件
通过–version 查看当前安装的eslint的版本
cd ./node_modules/.bin
./eslint --version
或者 npx eslint --version
npx是npm最新版本中集成的一个工具

4、EsLin 快速上手

编写问题代码
使用EsLint执行检测
完成EsLint使用配置

npx eslint ./01-prepare.js
报错 没有找到配置文件
npx eslint --init
选择如何使用eslint
选择哪一种模块化类型
用的是哪一款框架
你有使用TS吗
选择风格
Airbnb：自家公司的具体编码规范
Standard:开源社区中的规范，最大特点语句末尾不用添加分号
Google：自家公司的具体编码规范
还会根据提示自动安装Standard的插件
项目中就会自动生成.eslintrc.js文件

然后执行npx eslint ./01-prepare.js 报出检查出来的错误。根据提示一次解决
也可以直接–fix修正
npx eslint ./01-prepare.js --fix 可以解决风格上的代码
未被使用到的代码等其它没有被自动修复的代码需要手动删除

5、EsLin 配置文件解析

browser: false没有报出document未定义的错误，这是因为在生成eslint配置的时候选择的是standard的风格，其中做了些配置，这时window和document在任何环境中都可以去使用的。alert会报错

// .eslintrc.js
// 运行在node环境中。使用commonJS规范
module.exports = {
  // 标记当前代码最终的运行环境，eslint会根据环境的信息来判断某一个全局成员是否是可用的，
  // 从而避免代码中使用到不存在的成员
  env: { 
    // 每一种环境对应着一组预定义的全局变量，一旦开启了某个环境，那么这个环境中所有的全局成员就都能够直接被允许进行使用
    browser: false, // 表示代码是否会运行在浏览器环境中
    es6: false
  },
  extends: [ // 用来继承一些共享的配置
    'standard'
  ],
  parserOptions: { // 用来设置语法解析器的相关配置。用于控制是否允许使用某一个ES版本的语法。这边只是影响语法检测不代表成员是否可用
    ecmaVersion: 2015
  },
  rules: { // 配置每个校验规则的开启和关闭
    'no-alert': "error" // off warn error
  },
  globals: { // 额外的声明在代码中可以使用的全局成员
    "jQuery": "readonly"
  }
}

// 演示代码
// document.getElementById("#abc")
// alert(11)
// const foo = 1
// let foo2 = 2
// let a = new Promise()
// alert(11) 
jQuery("#abc")

env的环境配置如下

6、EsLint 配置注释

将配置直接通过注释的方式直接写在脚本文件当中

const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string 

参考：eslint配置选注释参考

7、EsLint 结合自动化工具

集成之后，ESLint一定会工作
与项目统一，管理更加方便
克隆案例项目
完成相应的依赖安装
完成eslint模块安装
完成gulp-eslint模块安装

npx eslint --init
npx gulp script
format在控制台中打印具体的错误信息，之后使用failAfterError方法让eslint在检查到问题之后可以终止任务管道

npx gulp script

8、EsLint 结合Webpack

Webpack集成Eslint不是以插件的方式来完成的，而是通过loader机制。webpack打包模块之前会先将遇到的模块都交给对应的loader进行处理。
克隆案例项目
安装对应模块
安装eslint模块
安装eslint-loader模块
初始化.eslintrc.js配置文件

npx webpack

9、EsLint 结合Webpack后续配置

npm install eslint-plugin-react

10、现代化项目集成ESLint

npm install @vue/cli -g
vue creat syy-vue-app
npm run serve

11、ESLint检查TypeScript

安装 typescript
npx eslint --init

odule.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: [
    'standard'
  ],
  parser: '@typescript-eslint/parser', // 指定一个语法解析器
  parserOptions: {
    ecmaVersion: 11
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}

npx eslint ./index.ts

12、Stylelint认识

提供默认的代码检查规则
提供CLI工具，快速调用
通过插件支持Sass Less PostCSS
支持Gulp或Webpack集成
npm install stlelint -D
npx stylelint ./index.css 报错找不到相应文件
.stylelintrc.js
stylelint没有可用的共享配置，需要自行安装模块
npm install stylelint-config-standard

// .stylelintrc.js
module.exports={
	extends: "stylelint-config-standard" // 这边需要完整的模块
}

npx stylelint ./index.css 即可发现问题 也可以使用–fix先完成大多数问题的自动化修复

校验sass代码
需要安装 npm install stylelint-config-sass-guidelines -D

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

npx stylelint ./index.sass 即可发现错误

13、prettier 的使用

一款通用的前端代码格式化工具
npm install prettier -D
npx prettier style.css 默认会把格式化之后的代码输出在命令行中
如果想要将格式化之后的代码直接覆盖到源文件当中可以执行
npx prettier style.css --write

npx prettier . --write

14、Git Hooks介绍

代码提交到仓库之前未执行lint操作
通过Git Hooks在代码提交之前强制 lint
Git Hook也称之为git钩子，每个钩子都对应一个任务
通过shell脚本可以编写钩子任务触发时要具体执行的操作
git init .git目录下hooks子目录 .git/pre-commit-sample
复制修改名字 pre-commit
#!/bin/sh // 决定当前代码运行的环境
echo “before commit” 保存

touch demo.txt
vim demo.txt
111 :wq
git status

15、ESLint结合Git Hooks

很多前端开发者并不擅长使用shell
Husky 可以实现Git Hooks的使用需求

删除pre-commit 的文件
npm install husky -D

// package.json
"husky":{
	"hooks":{ // 里面为不同的hook定义不同的任务 
		"pre-commit": "npm run test" // 这样就可以找到scripts下test对应的代码操作
	}
}

如何执行lint

// package.json
"scripts":{
	"test":"eslint ./index.js"
}

想在检查后代码格式化或者格式化之后代码添到暂存区，这时husky就不够用了
lint-stage配合husky
npm install lint-staged -D

// package.json
"scripts":{
	"test":"eslint ./index.js",
	"precommit":"lint-staged"
},
"husky":{
	"hooks":{ // 里面为不同的hook定义不同的任务 
		"pre-commit": "npm run precommit" // 这样就可以找到scripts下test对应的代码操作
	}
},
"lint-staged":{
	"*.js":[
		"eslint",
		"git add"
	]
}

git add .
git commit -m “test”