lint-staged

(lint-staged) 這個插件可以只針對進入git暫存區中的代碼進行代碼格式檢查與修復，極大提升效率，避免掃描整個項目文件，代碼風格控制 eslint + prettier + stylelint 看這兩篇文章

前端項目vue3項目集成eslint@9.x跟prettier
前端項目集成stylelint做css樣式代碼格式控制

安裝

pnpm add lint-staged -D

配置文件

.lintstagedrc.json （項目根目錄）
這里針對不同的文件格式運行不同的格式化腳本，這里要保證腳本的執行順序，prettier應該放在最前面，在其修復好后，再由eslint或stylelint來查漏補缺。

{"*.{css,less}": ["stylelint --fix"],"*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"],"*.{vue,html}": ["prettier --write", "eslint --fix", "stylelint --fix"]
}

測試

可以在package.json中的scripts添加一條腳本命令

  "scripts": {"lint-staged": "lint-staged",}

準備一些錯誤

利用文本編輯器人為制造一些錯誤，目前vscode正常提示了這些錯誤。比如：

a.ts

a.less

a.vue

添加到暫存區，并執行腳本

1. 使用 git add . 將當前修改內容推送到暫存區中
2. 調用之前定義的腳本 pnpm lint-staged

成功修改：

tips1：git reset 可以清空暫存區
tips2：如果發現某些文件并沒有生效，可以重啟編輯器，可能是當前文件預覽緩存導致的，實際文件已經發生了更改。我在寫這個文章測試的時候就遇到了，發現a.ts跟a.less都可以生效，但是a.vue無法生效，后來又發現當前項目中其他vue文件修改也不生效了，最后重啟了編輯器，發現文件內容已經發生了修改，所以vscode之前還是顯示的未修改的，雖然不理解為什么只有vue文件是這樣的。😢