最近剛換了新工作，這兩天也沒有業務上的需求，做了一些前端工程化方面的東西。要在現有的專案中整合 husky+commitlint+stylelint，也不能對現有程式碼產生影響。 使用 lint 的目的： - 拒絕錯誤程式碼被提交到程式碼倉庫 - 修復、美化程式碼 # 簡單介紹一下庫： > 我們在建立 vue 專案的時候，eslint 已經整合好了，根據我們自己的需求修改 eslint 規則配置。 規則地址：https://eslint.vuejs.org/rules 檢視規則效果地址：https://mysticatea.github.io/vue-eslint-demo/ ## stylelint 官方文件：https://stylelint.io/ 可以幫助我們自動修復錯誤、格式化樣式程式碼。 ### 使用 1.安裝 `stylelint`、`stylelint-config-standard` 兩個依賴到我們的專案中 ```sh yarn add stylelint stylelint-config-standard -D ``` 2.在根目錄，建立一個 `.stylelintrc` 配置檔案 ```json { "extends": "stylelint-config-standard", "rules": { "indentation": [ 2, { "baseIndentLevel": 1 } ], "declaration-block-semicolon-newline-after": "always" } } ``` ## husky 官方文件：https://typicode.github.io/husky/#/ > Git hooks made easy. 引自官方，可以讓 git hooks 變得更簡單，在特定的重要動作觸發自定義指令碼。比如：當我們在提交或者推送程式碼的時候，可以使用它驗證提交資訊、執行測試、格式化程式碼、觸發 CI/CD 等。 ### 使用 這裡我們使用 yarn 來安裝並啟用。 1.安裝 `husky` ```sh yarn add husky -D ``` 2.啟用 git hooks ```sh yarn husky install ```  > 執行完這步後，以為可以忽略後面的步驟。把生成的 `.husky` 目錄下檔案新增在 `.gitignore`，結果其他小夥伴更新程式碼後，需要再次執行次步驟才能使用，顯然不是友好的。 3.在 `package.json` 檔案中，安裝依賴後啟用 git hooks ```json "script": { "postinstall": "husky install" } ``` ## commitlint 官方文件：https://commitlint.js.org/#/ 用來幫助我們在多人開發時，遵守 git 提交約定。 ### 使用 1.將 `@commitlint/cli`、`@commitlint/config-conventional` 兩個依賴安裝到我們的專案中 ```sh yarn add @commitlint/cli @commitlint/config-conventional -D ``` 2.在根目錄，建立一個 `commitlint.config.js` 配置檔案 ```sh echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js ``` ### 增加 commit-msg 勾子 使用下面命令增加一個 git 提交資訊的勾子，會在 `.husky `目錄下建立一個 `commit-msg` 檔案。 ```sh yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"' ``` ## lint-staged 在前面已經配置了 `stylelint`、`husk`、`commitlint`。`lint-staged` 在我們提交程式碼時，只會對修改的檔案進行檢查、修復處理，以保證提交的程式碼沒有語法錯誤，不會影響其他夥伴在更新程式碼無法執行的問題。 ### 使用 1.安裝 `lint-staged` 依賴到我們的專案中 ```sh yarn add lint-staged -D ``` 2.在根目錄，建立一個 `.lintstagedrc` 配置檔案 ```json { "*.{js,vue}": ["npm run lint"], "*.{html,vue,css,scss,sass,less}": ["stylelint --fix"] } ``` #### 增加 pre-commit 勾子 在 `.husky` 目錄建立一個 `pre-commit` 檔案。 ```sh yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1"' ``` ## 問題 整個實踐下來，遇到了兩個影響比較大的問題。 ### Windows 當我們在 Windows 的 `Git Bash` 上使用 `Yarn`，git hooks 會失敗（`stdin is not a tty`）。  解決方案： 1.在 `.husky` 目錄下建立一個 `common.sh` 檔案： ```sh #!/bin/sh command_exists () { command -v "$1" >/dev/null 2>&1 } # Windows 10, Git Bash and Yarn workaround if command_exists winpty && test -t 1; then exec < /dev/tty fi ``` 2.在對應的勾子檔案中，增加一行 `. "$(dirname "$0")/common.sh"` 程式碼 ```sh #!/bin/sh . "$(dirname "$0")/_/husky.sh" . "$(dirname "$0")/common.sh" yarn … ``` ### CI 最初沒有考慮到 CI 是不需要 git hooks 的問題，就直接將程式碼合併到測試服的分支上，通過 `Jenkins` 構建出現了 husky install 失敗。 解決方案： 使用 `is-ci`，在 ci 場景不會執行 `husky install`。 1.安裝 `is-ci` ```sh $ yarn add is-ci -D ``` 2.在 `.husky` 目錄下，建立一個 `install.js` 檔案 ```js const { spawnSync } = require('child_process') const isCI = require('is-ci') if (!isCI) { spawnSync('husky', ['install'], { stdio: 'inherit', shell: true }) } ``` 3.修改 `package.json` 檔案 ```json "script": { "postinstall": "node .husky/install.js" } ``` ## 補充 ### vue eslint 配置 ```js module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', 'eslint:recommended'], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', "indent": ["error", 2], 'vue/max-attributes-per-line': [ 'error', { multiline: { allowFirstLine: false } } ], 'vue/html-indent': [ 'error', 2, { attribute: 1, baseIndent: 1, closeBracket: 0, alignAttributesVertically: true, ignores: [] } ], 'vue/html-closing-bracket-newline': [ 'error', { singleline: 'never', multiline: 'never' } ] } } ``` > 轉載請標註來源： https://www.cnblogs.com/JasonLong/p/14520