前端工程工做流規範

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

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

一、JavaScript語法檢查 - ESLint

二、JavaScript類型檢查 - Flow

三、自動化代碼檢查規範 - husky + lint-staged

四、自動化代碼提交規範 - husky + commitlint

JavaScript語法檢查 - ESLint

文檔：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
複製代碼

寫在最後

本文分享的內容都是我在平時工做中用到的，但願能對有須要的小夥伴有幫助~~~

喜歡個人文章小夥伴能夠去 個人我的博客 點star ⭐️