规范化是践行前端工程化中重要的一部分
为什么要有规范化标准：
软件开发需要多人协同，不同开发人员有着不同的编码习惯，不同的习惯增加项目维护成本，每个项目或团队需要明确统一的标准。
哪里需要规范化标准：
代码，文档，甚至提交的日志，开发过程中人为编写的成果物，代码最为重要。
如何实施规范化标准：
通过工具实现Lint，（刚有C语言的时候，有一些常见的代码问题是不能被编译器捕获到的，有人就开发了一个叫Lint的工具，用于在编译之前检查问题，后续这种工具，就都被称为Lint）
ESLint
目前最为主流的JavaScript Lint工具，检测代码质量，容易统一开发者的编码风格（缩进，分号等）
初次使用
npm install eslint --save-dev
npx eslint --init
npx是npm自带的一个工具，能执行npm包，简化了之前执行包的cli命令时的步骤，之前还要进入node_modules/.bin中
init过程就选择自己想要的就行了,之后会得到.eslintrc.js的初始文件
// .eslintrc.js
module.exports = {
"env": {
"browser": true, // 运行环境是浏览器，所以包含window，document等全局变量,还有node等其他选项
"es2015": true // ES2015中的全局变量例如promise，将可用
},
"extends": [
"standard" // 初始化时的选项，表示继承standard风格
],
"parserOptions": { // 设置语法解析器的相关配置
"ecmaVersion": 6, // 支持到es6，例如es7的语法async将不支持
"sourceType": "module"
},
"rules": { // 添加规则，更多规则可去官网查看
"no-alert": "error" // 使用alert会抛出警告，有off，warning，error三种可选
}
"globals": { // 添加全局成员
"qqqq": "readonly" // 以后可在全局直接使用qqqq变量
}
};
npx eslint ./index.js //校验文件
npx eslint ./index.js --fix //修复文件
配置注释
如果不可避免的某一处代码就是要违反一下规则,我们不能因为这一个点，就去推翻校验规则的配置
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
console.log(str1)
// eslint-disable-line [no-template-curly-in-string]就可忽略此行代码中的此规则
结合webpack
首先你拥有一个webpack的项目
- 安装eslint模块
- 安装eslint-loader模块
- 初始化.eslintrc.js配置文件
eslint检查肯定要在babel-loader编译之前进行，所以
// webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.js$/,
enforce: 'pre', // 设置执行顺序，pre优先处理，post 最后处理
exclude: /node_modules/,
use: 'eslint-loader'
},
{
test: /\.css$/,
exclude: /node_modules/,
use: 'css-loader'
}
]
},
如果你的是react项目，因为它有一些jsx语法，所以需要安装一个eslint-plugin-react插件，并配置.eslintrc.js
// .eslintrc.js
module.exports = {
extends: [
'standard',
'plugin:react/recommended'
],
}
GitHooks配合ESLint
GitHook也称之为git钩子，每个钩子都对应一个任务，比如commit，push
通过shell脚本可以编写钩子任务触发时，要具体执行的操作。
我有一个test项目，从中可以看到.git=>hooks，hooks里面全都是各种时机的勾子。我们复制一份pre-commit.sample，删掉.sample
// pre-commit
#!/bin/sh
echo "YES YES"
然后执行git commit -m ""后你会发现输出了YES YES，这就简单的实现了git gook。接下来结合eslint，在提交前自动做检查。
我们前端人员大部分并不擅长写shell脚本，所以我们使用Husky来实现githooks的使用需求。
npm install husky -D
// package.json 中添加
{
"scripts": {
"lint": "eslint ."
},
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
}
}
再试一下commit，发现可以了。
后续还可以配合lint-staged，完成eslint后再自动格式化等操作。