# Lint [TOC] ## 介紹 使用 lint 的好處 具備基本工程素養的同學都會注重編碼規范，而代碼風格檢查（Code Linting，簡稱 Lint）是保障代碼規范一致性的重要手段。 遵循相應的代碼規范有以下好處 * 較少 bug 錯誤率 * 高效的開發效率 * 更高的可讀性 項目內集成了以下幾種代碼校驗方式 1. eslint 用于校驗代碼格式規范 2. commitlint 用于校驗 git 提交信息規范 3. stylelint 用于校驗 css/less 規范 4. prettier 代碼格式化 WARNING lint 不是必須的，但是很有必要，一個項目做大了以后或者參與人員過多后，就會出現各種風格迥異的代碼，對后續的維護造成了一定的麻煩 ## ESLint ESLint 是一個代碼規范和錯誤檢查工具，有以下幾個特性 * 所有東西都是可以插拔的。你可以調用任意的 rule api 或者 formatter api 去打包或者定義 rule or formatter。 * 任意的 rule 都是獨立的 * 沒有特定的 coding style，你可以自己配置 ### 手動校驗代碼 ~~~ # 執行下面代碼.能修復的會自動修復，不能修復的需要手動修改 yarn run lint:eslint ~~~ ### 配置項 項目的 eslint 配置位于根目錄下**.eslintrc.js**內，可以根據團隊自行修改代碼規范 ### 編輯器配合 推薦使用 vscode 進行開發，vscode 自帶 eslint 插件，可以自動修改一些錯誤。 同時項目內也自帶了 vscode eslint 配置，具體在`.vscode/setting.json`文件夾內部。只要使用 vscode 開發不用任何設置即可使用 ## CommitLint 在一個團隊中，每個人的 git 的 commit 信息都不一樣，五花八門，沒有一個機制很難保證規范化，如何才能規范化呢？可能你想到的是 git 的 hook 機制，去寫 shell 腳本去實現。這當然可以，其實 JavaScript 有一個很好的工具可以實現這個模板，它就是 commitlint（用于校驗 git 提交信息規范）。 ### 配置 commit-lint 的配置位于項目根目錄下**commitlint.config.js** ### Git 提交規范 * 參考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 規范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)) * `feat`增加新功能 * `fix`修復問題/BUG * `style`代碼風格相關無影響運行結果的 * `perf`優化/性能提升 * `refactor`重構 * `revert`撤銷修改 * `test`測試相關 * `docs`文檔/注釋 * `chore`依賴更新/腳手架配置修改等 * `workflow`工作流改進 * `ci`持續集成 * `mod`不確定分類的修改 * `wip`開發中 * `types`類型修改 ### 如何關閉 在`.husky/commit-msg`內注釋以下代碼即可 ~~~ # npx --no-install commitlint --edit "$1" ~~~ ### 示例 ~~~ git commit -m 'feat(home): add home page' ~~~ ## Stylelint stylelint 用于校驗項目內部 css 的風格,加上編輯器的自動修復，可以很好的統一項目內部 css 風格 ### 配置 stylelint 配置位于根目錄下**stylelint.config.js** ### 編輯器配合 如果您使用的是 vscode 編輯器的話，只需要安裝下面插件，即可在保存的時候自動格式化文件內部 css 樣式 **插件** [StyleLint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) ## Prettier prettier 可以用于統一項目代碼風格，統一的縮進，單雙引號，尾逗號等等風格 ### 配置 prettier 配置文件位于項目根目錄下**prettier.config.js** ### 編輯器配合 如果您使用的是 vscode 編輯器的話，只需要安裝下面插件，即可在保存的時候自動格式化文件內部 js 格式 **插件** [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) ## Git Hook git hook 一般結合各種 lint，在 git 提交代碼的時候進行代碼風格校驗，如果校驗沒通過，則不會進行提交。需要開發者自行修改后再次進行提交 ### husky 有一個問題就是校驗會校驗全部代碼，但是我們只想校驗我們自己提交的代碼，這個時候就可以使用 husky。 最有效的解決方案就是將 Lint 校驗放到本地，常見做法是使用 husky 或者 pre-commit 在本地提交之前先做一次 Lint 校驗。 項目在`.husky`內部定義了相應的 hooks ### 如何關閉 ~~~ # 刪除husky依賴即可 yarn remove huksy ~~~ ### 如何跳過某一個檢查 ~~~ # 加上 --no-verify即可跳過git hook校驗（--no-verify 簡寫為 -n） git commit -m "xxx" --no-verify ~~~ ### lint-staged 用于自動修復提交文件風格問題 **lint-staged**配置位于項目`.husky`目錄下**lintstagedrc.js** ~~~ module.exports = { // 對指定格式文件 在提交的時候執行相應的修復命令 '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'], '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'], 'package.json': ['prettier --write'], '*.vue': ['eslint --fix', 'stylelint --fix', 'prettier --write', 'git add .'], '*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write', 'git add .'], '*.md': ['prettier --write'], }; ~~~