feat(lint-staged): 添加 lint-staged，并修改课题10文档

docs/课时10.md

@@ -1,6 +1,15 @@
 # 添加 eslint 并开启自动修复
 
-### 抽离层，职能单一化
+本章概要
+
+- <a href="#10_1">抽离 cwd 层，职能单一化</a>
+- <a href="#10_2">配置 eslint-loader</a>
+- <a href="#10_3">eslint 自动修复功能</a>
+- <a href="#10_4">添加脚手架命令</a>
+- <a href="#10_5">使用编译器自动修复</a>
+- <a href="#10_6">代码提交检查（lint-staged）</a>
+
+### <a name="10_1">抽离 cwd 层，职能单一化</a>
 
 目的：让职能更加清晰，每一层只做一件事情，使用标准化的 api 去处理同类逻辑
 
@@ -21,7 +30,7 @@
    └── ssr:server.js
 ```
 
-### 添加 eslint
+### <a name="10_2">配置 eslint-loader</a>
 
 配置 eslint-loader，在 webpack-box dev 时会检测 eslint 规则，如果有报错会显示在控制台上
 
@@ -48,7 +57,7 @@ config.module
   });
 ```
 
-### 自动修复功能
+### <a name="10_3">eslint 自动修复功能</a>
 
 当我们项目改变某一个规则时，我们项目中都会出现大量的错误，我们肯定不希望手动一个个去修改，所以我们需要使用 eslint 的自动修复的功能，它能够帮助我们修复绝大数的错误，还有一些修复不了的我们再手动修复就可以了
 
@@ -77,7 +86,7 @@ if (config.fix) {
 }
 ```
 
-### 添加脚手架命令
+### <a name="10_4">添加脚手架命令</a>
 
 我们希望通过命令行的形式去修复，`webpack-box lint eslint`，所以需要在 `cwd` 层添加命令行
 
@@ -100,7 +109,7 @@ module.exports = function(injectCommand, api) {
 
 这样我们可以使用 `webpack-box lint eslint` 去修复大部分的错误了，去试一下吧～
 
-### 使用编译器自动修复
+### <a name="10_5">使用编译器自动修复</a>
 
 当然我们执行 `webpack-box lint eslint` 命令时可以去修复一些错误，但是当我们写代码时希望编译器能够帮助我们自动修改，而不是等到代码写完了才去校验，这样会给我们带来二次麻烦，甚至会出现修复不了的问题。
 
@@ -196,6 +205,23 @@ module.exports = function(injectCommand, api) {
 }
 ```
 
-### 代码提交检查 eslint
+### <a name="10_6">代码提交检查（lint-staged）</a>
 
 上述的操作都是我们理想状态下的检测跟修复，但是有时还会遇到意外的情况，并没有 lint 代码就提交了，这样会导致可能出现问题，所以我们需要在提交代码前进行一次代码检验
+
+在 package.json 中添加 lint-staged，在代码提交时会先执行 lint，lint 通过之后才能提交成功
+
+package.json
+
+```json
+{
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": ["webpack-box lint eslint", "git add"]
+  }
+}
+```