前端工程工作流規範

摘要： 在日常開發過程中，前端工程工作流程規範主要包括程式碼檢查規範以及程式碼提交規範。而程式碼檢查主要兩個部分：語法檢查及型別檢查；程式碼提交規範主要是Git Commit Log規範。 本文主要分享日常工作中，實現自動化工作流規範的幾種工具： 1、JavaScript語法檢查 - ESLi...

在日常開發過程中，前端工程工作流程規範主要包括程式碼檢查規範以及程式碼提交規範。而程式碼檢查主要兩個部分：語法檢查及型別檢查；程式碼提交規範主要是Git Commit Log規範。

本文主要分享日常工作中，實現自動化工作流規範的幾種工具：

1、JavaScript語法檢查 - ESLint

2、JavaScript型別檢查 - Flow

3、自動化程式碼檢查規範 - husky + lint-staged

4、自動化程式碼提交規範 - husky + commitlint

JavaScript語法檢查 - ESLint

文件：ofollow,noindex">cn.eslint.org/docs/user-g…

安裝

安裝ESLint

npm install eslint --dev
複製程式碼

安裝其他依賴

// babel-eslint 是對babel解析器的包裝，使其能與ESLint相容，支援對babel編譯的程式碼進行檢查
npm install babel-eslint -dev

// eslint-config-react-app 此外掛包括了使用Create React App建立的專案中預設的ESLint配置
npm install eslint-config-react-app --dev

// eslint-plugin-react 此外掛是與React語法相關的檢查規則
npm install eslint-plugin-react --dev

// eslint-plugin-jsx-a11y 此外掛是與JSX語法相關的檢查規則
npm install eslint-plugin-jsx-a11y --dev

// eslint-plugin-import 此外掛用於支援ES6的import/export語法檢查
npm install eslint-plugin-import --dev

// eslint-plugin-flowtype 此外掛是與flow相關的檢查規則，使用了flow的專案，需要引入
npm install eslint-plugin-flowtype --dev
複製程式碼

配置

.eslintrc.js

module.exports = {
parser: 'babel-eslint',
extends: ['react-app', 'plugin:flowtype/recommended'],
plugins: ['react', 'flowtype', 'jsx-a11y', 'import'],
rules: {
// 【error】使用單引號
quotes: ['error', 'single'],
// 句末不加分號
semi: ['error', 'never'],
// 【warn】禁止未使用過的變數
'no-unused-vars': [
'warn',
{
vars: 'all',
args: 'none',
},
],
...
}
}
複製程式碼

檢查

命令列

npx eslint src
複製程式碼

package.json

{
"scripts": {
"lint": "eslint src"
}
}
複製程式碼

npm run lint
複製程式碼

JavaScrip靜態型別檢查 - flow

文件：flow.org/

安裝

// 注意：對於使用react-native init建立的專案，flow-bin版本應使用 0.76.0
npm install flow-bin --dev
複製程式碼

配置

.flowconfig使用react-native init預設的配置即可

檢查

命令列

npx flow check
複製程式碼

package.json

{
"scripts": {
"staged_flow": "flow focus-check"
}
}
複製程式碼

npm run staged_flow
複製程式碼

husky + lint-staged 自動化程式碼檢查流程

上面介紹了通過eslint對JavaScript語法進行檢查，通過flow對JavaScript靜態型別檢查，而在實際開發過程中，為了提高開發效率，應該只對本次提交所修改的檔案進行檢查，而不是每次都對所有檔案進行檢查。

這就需要使用lint-staged 來實現。使用如下：

// 安裝
$ npm install --save-dev lint-staged
複製程式碼

// 配置 package.json
{
"lint-staged": {
"src/**/{*.js,*.jsx}": [
"yarn run lint",
"yarn run staged_flow"
]
},
}
複製程式碼

而我們使用husky 來更方便的使用 Git Hooks。使用如下：

// 安裝
$ npm install husky --save-dev
複製程式碼

// 配置 package.json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
複製程式碼

以上就是配置pre-commit Git Hook，支援每次提交前，執行lint-staged ，即對此次提交所修改的檔案進行程式碼檢查。從而實現了程式碼流程的自動化。

Git Commit Log 規範

開發過程中，需要規範不僅僅只有程式碼上的規範，還有很重要的一部分則是Git Commit Log規範。

Git Commit Log規範最為流行的則是Angular規範。使用commitlint 自動化規範流程，使用如下：

// 安裝
$ npm install --save-dev @commitlint/config-conventional @commitlint/cli

// 新增配置檔案
$ echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
複製程式碼

通過配合husky 配置 Git Hooks。如下：

// 配置 package.json
{
"husky": {
"hooks": {
"commit-msg": "commitlint -e $GIT_PARAMS"
}
}
}
複製程式碼

以上，就能實現 Git Commit Log 規範流程自動化，非常方便。規範了 Git Commit Log，就能直接使用 Git Commit Log 來自動生成 changelog，使用conventional-changelog-cli ，如下：

// 安裝
$ npm install --save-dev conventional-changelog-cli

// 使用
$ npx conventional-changelog -p angular -i CHANGELOG.md -s
複製程式碼