## 前端工程化与 CI、CD

首先明确，这个话题很大，所以文章篇幅特别长，所以拆分成多个部分进行记录。



### 用 husky 和 lint-staged

1. 什么是 lint？


    > In computer programming, lint is a Unix utility that flags some suspicious and non-portable constructs (likely to be bugs) in C language source code; generically, lint or a linter is any tool that flags suspicious usage in software written in any computer language. The term lint-like behavior is sometimes applied to the process of flagging suspicious language usage. Lint-like tools generally perform static analysis of source code.

    上面是[维基百科](https://en.wikipedia.org/wiki/Lint_%28software%29)的定义。 **Lint 就是对代码进行静态分析，并试图找出潜在问题的工具。**


2. Lint 的好处，有以下三点：

   - 可以让代码更加阅读性良好
   - 具有更高的开发效率。工程师会花 50% 时间去做问题定位和解决 bug，其中很多错误是低级的，而 lint 可以很容易定位发现这些低级错误
   - 可以让代码存在更少 Bug。


3. Lint 的反馈链条太长
   
    假如 lint 是在 ci、cd 的后续步骤则会发现整个反馈流程太长，所以应该是 commit 之前做 lint。CI 流程做 lint 的缺点：Lint 在整个开发工作流中反馈链条太长，浪费时间

4. 所以有工具可以做这个事情。
   lint-staged、husky 允许你在代码提交的时候做掉 eslint。commitlint 可以让你在提交的时候将 commit message 写的规范，
   ```json
    "dependencies": {
        "eslint": "^6.7.2",
        "lint-staged": "^9.5.0",
        "mocha": "^6.2.2"
    },
    "script": {
        "test": "NODE_ENV=development jest",
        "lint": "eslint . --fix --format codefrane"
    },
    "devDependencies": {
        "@commitlint/cli": "^8.2.0",
        "@commitlint/config-conventional": "^8.2.0",
        "husky": "^3.1.0"
    },
    "husky": {
        "hooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
    },
    "lint-staged": {
        "**/*.js": [
        "eslint --fix --cache --format=pretty",
        "git add"
        ]
    }
   ```
关键词： commitlint、lint-staged


### 前端代码风格自动化系列