文章说明：本文章为拉钩大前端训练营所做笔记和心得，若有不当之处，还望各位指出与教导，谢谢 !
规范化标准
为什么要有规范化标准？
- 软件开发需要多人协同；
- 不同开发者具有不同的编码习惯和喜好；
- 不同的喜好增加项目维护成本；
- 每个项目或者团队需要明确统一的标准。
哪里需要规范化标准
- 代码、文档、甚至是提交日志；
- 开发过程中人为编写的成果物；
- 代码标准化规范最为重要
实施规范化的方法
- 编码前人为的标准约定；
- 通过工具实现 Lint (通过工具找到代码中不规范的过程)
ESLint
- 最为主流的 JavaScript Lint 工具监测 JS 代码质量；
- ESLint 很容易统一开发者的编码风格；
- ESlint 可以帮助开发者提升编码能力。
准备工作：
1.初始化项目，初始化 package.json 包管理文件
yarn init --yes # or npm init -y
2.安装 ESLint 模块为开发依赖
yarn add eslint --dev # or npm install eslint --save-dev
3.通过 cd到对应的bin命令验证安装结果
.\eslint --version
4.通过yarn或者npm运行cli命令，验证安装结果
yarn eslint --version # or npx eslint --version
快速上手
ESLint 检查步骤：
1.编写 “问题” 代码：
01-prepare.js:
const foo=123
function fn(){
console.log("hello");
console.log("eslint");
}
fn(
syy()
2.使用 eslint 执行检测
$ yarn eslint xx.js # xx.js 指要被检测的文件
可以看到，提示没有找到配置文件，需要使用 eslint 的配置文件
3.完成eslint配置
$ yarn eslint --init # 初始化 eslint 配置文件
4.使用 --fix 自动修复代码风格上的绝大多数的问题
$ yarn eslint xx.js --fix # xx.js 指要被检测的文件
总结
1.ESLint 可以检测语法错误，找到问题代码，以及检测代码风格；
2.ESLint 可以自动修复代码风格上的绝大多数的问题。
配置文件
具体配置选项，请查看ESLint官网。
.eslintrc.js 配置文件 解析：
module.exports = {
// 标记当前代码最终的运行环境
// 可以同时标记多个环境
env: {
browser: false, // 浏览器
es6: false
},
// 继承一些共享的配置，可以同时继承多个共享配置
extends: [
'standard'
],
// 设置语法解析器的版本
parserOptions: {
ecmaVersion: 2015
},
// 配置 ESlint 中每个校验规则的开启或关闭
rules: {
// 属性值：内置的规则名称
// 属性值：off 关闭 warn 警告 error 错误
// 具体的查看 ESLint 官网
'no-alert': "error"
},
// 额外声明在代码中可以全局使用的成员
globals: {
"jQuery": "readonly"
}
}
配置注释
在编写代码时，通过注释的形式，使 ESLint 在进行代码检测时，忽略注释标注的代码。
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
console.log(str1)
具体规则，请查看 相关内容
集成
优势
1，集成之后，ESLint 一定会工作；
2，与项目统一，管理更加方便
gulp中的集成
1.项目克隆https://github.com/zce/zce-gulp-demo
2.完成依赖安装：
yarn install
3，完成 eslint 模块安装；
yarn add eslint --dev
4，完成 gulp-eslint 模块安装（gulp-eslint 是 gulp 中对于 eslint 的一个插件）；
$ yarn add gulp-eslint --dev
5，初始化 eslint 配置文件
$ yarn eslint --init
基本使用
gulp-eslint 是 gulp 的一个插件，且检查的主要是 JS 编码，可以通过 pipe() 进行流的转换。
1.在 gulpfile.js 中，进行代码集成
const script = () => {
return src('src/assets/scripts/*.js', {
base: 'src' })
.pipe(plugins.eslint())
.pipe(plugins.eslint.format()) // 在控制台输出 lint 结果
.pipe(plugins.eslint.failAfterError()) // 打印错误编码
.pipe(plugins.babel({
presets: ['@babel/preset-env'] }))
.pipe(dest('temp'))
.pipe(bs.reload({
stream: true }))
}
2.运行任务，会自动检测
yarn gulp script
Webpack集成eslint
1.项目克隆，https://github.com/zce/zce-react-app
2.安装对应模块
yarn install # or npm install
3.安装eslint模块
yarn add eslint --dev # or npm i eslint --save-dev
4.安装 eslint-loader 模块
yarn add eslint-loader --dev
5.初始化 .eslintrc.js 配置文件
yarn eslint --init
基本使用：
webpack 中是通过 eslint-loader 对 JS 代码实行检测的：
1.在 webpack.config.js 中，进行 loader 的配置:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'eslint-loader'
}
]
}
}
2.安装 eslint-plugin-react 插件，用来检测 react 语法
yarn add eslint-plugin-react --dev
3.在 .eslintrc.js 中，引入 插件 和 开启 react 相关规则:
module.exports = {
rules: {
// 2 代表 error
'react/jax-uses-react': 2,
'react/jax-uses-vars': 2
},
// 指定引用的插件
plugins: [
'react'
]
}
4.优化，采用 属性继承 的形式:
.eslintrc.js:
module.exports = {
extends: [
'standard',
'plugin: react/recommended' // 属性继承
]
}
Stylelint
基本介绍：
1.提供默认的代码检查规则；
2.提供 CLI 工具，快速调用；
3.通过插件支持 Sass Less PostCSS；
4.支持 Gulp 或 Webpack 集成。
基本使用：
Stylelint 的用法 和 ESLint 类似。
1.安装 stylelint 模块
yarn add stylelint --dev
2.初始化 .stylelintrc.js 配置文件
yarn stylelint --init
3.运行命令，进行自动检测
yarn stylelint xx.css
Prettier
基本介绍：
Prettier，通用的前端代码格式化工具，落实前端项目中的规范化标准。
基本使用：
1.安装 Prettier 模块
yarn add Prettier --dev
2.格式化指定文件的代码，默认在终端打印出有问题的代码:
yarn prettier xxx # xxx 代表文件名称
3.使用 --write ，完成所有文件的自动格式化
yarn prettier . --write
Git Hooks
通过 Git Hooks 在代码提交前强制Lint
基本介绍：
1.Git Hooks ，也称之为 git 钩子，每个钩子都对应一个任务；
2.通过 shell 脚本可以编写钩子任务，触发时要具体执行的操作。
工作机制：
在 .git 仓库中，存在 hooks 文件夹，里面存放了多个钩子文件，其中 pre-commit.sample 是代码 comiit 之前的钩子，内部编写了 commit 之前执行的操作。
存放目录，如下图所示：
基本使用：
NPM 模块 Husky 可以实现 Git Hooks 的使用需求。
1.安装 Husky 模块
yarn add husky --dev
2.在 package.json 中，添加 husky 配置
{
"scripts": {
"test": "eslint ."
},
"husky": {
"hooks": {
"pre-commit": "npm run test"
}
}
}
3.安装 lint-staged 模块
yarn add lint-staged --dev
4.在 package.json 中，添加 lint-staged 配置
{
"scripts": {
"test": "eslint .",
"precommit": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "npm run precommit"
}
}
"lint-staged": {
"*.js": [
"eslint",
"git add"
]
}
}