一贞间、問(wèn)題闡述：為什么要使用 Eslint+prettier 自動(dòng)格式化代碼酿炸？
現(xiàn)在前端的項(xiàng)目越來(lái)越大叨叙，項(xiàng)目中每個(gè)人都有自己習(xí)慣使用的編輯器，每個(gè)人的編碼風(fēng)格也不相同船惨，導(dǎo)致后期代碼 review 和項(xiàng)目維護(hù)難度較大
1、借助 husky 在代碼 commit 的時(shí)候使用粱锐，使用prettier進(jìn)行代碼格式化疙挺，Eslint（也可以進(jìn)行代碼格式化的規(guī)范）進(jìn)行代碼自動(dòng)補(bǔ)全或修復(fù)
2、開(kāi)發(fā)者不用關(guān)心編寫(xiě)的過(guò)程怜浅，只需要在提交代碼的時(shí)候關(guān)注下commit的結(jié)果铐然，但是有些時(shí)候 Eslint 可能無(wú)法修復(fù)，我們可以根據(jù)錯(cuò)誤提示進(jìn)行手動(dòng)修復(fù)恶座，平時(shí)編寫(xiě)代碼只要注意編碼規(guī)范搀暑，一般問(wèn)題不大
三、配置及使用過(guò)程跨琳，以 vue-cli 搭建的項(xiàng)目為例
1自点、前期依賴包安裝：husky、eslint脉让、lint-staged桂敛、prettier
yarn add husky eslint lint-staged prettier --dev
或
npm install husky eslint lint-staged prettier -D
2、根據(jù) git 提交過(guò)程進(jìn)行配置的思路
提交代碼時(shí)需要借助 git 提供的鉤子對(duì)代碼進(jìn)行檢測(cè) — husky 配置
提交之前要先進(jìn)行代碼格式化 — prettier 配置
對(duì)于不規(guī)范的代碼進(jìn)行修復(fù) — Eslint 配置
對(duì)于 Eslint 修復(fù)不了的代碼 commit 會(huì)失敗并給出提示 — “git add” 配置
上述四點(diǎn)需要在 package.json 內(nèi)部進(jìn)行配置溅潜，如下：
// package.json
{
? ...
"husky": {
"hooks": {
"pre-commit":"lint-staged"
? ? }
? },
"lint-staged": {
"src/**": [
"prettier --config .prettierrc --write",
"eslint --fix",
"git add"
? ? ]
? }
}
3术唬、對(duì)應(yīng)上述 package.json 里需要的文件進(jìn)行對(duì)應(yīng)的創(chuàng)建
項(xiàng)目根目錄下創(chuàng)建 .prettierrc
prettier 文檔地址：prettier.io/docs/en/opt…
// .prettierrc
{
"printWidth":200,
"tabWidth":2,
"useTabs":true,
"semi":false,
"singleQuote":true,
"bracketSpacing":true,
"arrowParens":"avoid"
}
4、在工程項(xiàng)目根目錄 .eslintrc.js / .eslintrc.json 添加 rules 規(guī)則
項(xiàng)目根目錄下 .eslintrc.js 中添加 rules 規(guī)則
// .eslintrc.js
// extends:["@vue/prettier"] 一定要配置 prettier
module.exports= {
root:true,
? env: {
node:true
? },
extends: ["plugin:vue/essential","@vue/prettier","@vue/typescript"],
? rules: {
"no-console": process.env.NODE_ENV ==="production"?"error":"off",
"no-debugger": process.env.NODE_ENV ==="production"?"error":"off",
"no-dupe-keys":"error",
"no-duplicate-case":"error",
"no-empty": ["error", {"allowEmptyCatch":true}],
"no-ex-assign":"error",
"no-extra-boolean-cast":"error",
"no-extra-semi":"error",
"curly":"error"
? },
? parserOptions: {
parser:"@typescript-eslint/parser"
? }
};
1碴开、項(xiàng)目中配置規(guī)則要求使用單引號(hào)
git commit 之前代碼截圖如下
git commit -m "自動(dòng)修復(fù)"，命令執(zhí)行后如下圖
上圖所示配置的配置已經(jīng)生效
代碼自動(dòng)格式化及自動(dòng)修復(fù)潦牛，有效提高了項(xiàng)目的質(zhì)量和協(xié)同作戰(zhàn)的效率
后期可獨(dú)立搭建工程化項(xiàng)目眶掌，進(jìn)行更深的規(guī)則定制
原文：Eslint+Prettier 實(shí)現(xiàn)代碼 git 提交時(shí)自動(dòng)格式化及修復(fù)_dearyang-CSDN博客
