前言
我的項(xiàng)目版本如下：
- React： V18.2.0
- Node.js: V16.14.0
- TypeScript：最新版
- 工具： VsCode
本文將采用圖文詳解的方式，手把手帶你快速完成在React項(xiàng)目中配置husky、prettier、commitLint，實(shí)現(xiàn)編碼規(guī)范的統(tǒng)一，git提交規(guī)范的統(tǒng)一。
一、使用 eslint
1.1 裝包
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
1.2 ESLint 插件安裝
1.3 創(chuàng)建命令并使用
新增命令
"lint": "eslint \"src/**/*.+(js|ts|jsx|tsx)\"",
執(zhí)行 npm run lint :
二、使用 prettier
2.1 裝包
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
2.2 創(chuàng)建配置文件
在根目錄中創(chuàng)建 .eslintrc.js 文件，寫入如下代碼
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"settings": {
"react": {
"version": '18.2.0', // 指定你的 React 版本，可以是具體版本號(hào)或 "detect" 自動(dòng)檢測(cè)
},
},
"rules": {
}
}
2.3 安裝插件
Prettier - Code formatter
安裝成功后：
2.3 創(chuàng)建命令并使用
新增命令：表示掃描文件格式，并將文件中的代碼修改為正確的格式
"format": " prettier --write \"src/**/*.+(js|ts|jsx|tsx)\"",
運(yùn)行命令：
2.4 vscode 配置
配置成功后，之前講的通過 npm run format 可以將雙引號(hào)格式化為 單引號(hào)，現(xiàn)在僅需使用 ctrl + s 保存文件，vscode 即可自行格式化
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
2.5 代碼風(fēng)格配置
根目錄下新建 .prettierrc.js 文件，并寫入如下代碼：
module.exports = {
// 箭頭函數(shù)只有一個(gè)參數(shù)的時(shí)候可以忽略括號(hào)
arrowParens: 'avoid',
// 括號(hào)內(nèi)部不要出現(xiàn)空格
bracketSpacing: true,
// 行結(jié)束符
endOfLine: 'auto',
// 行寬
printWidth: 100,
// 換行方式
proseWrap: 'preserve',
// 分號(hào)
semi: false,
// 使用單引號(hào)
singleQuote: true,
// 縮進(jìn)
tabWidth: 2,
// 使用tab縮進(jìn)
useTabs: false,
// 后置逗號(hào)，多行對(duì)象、數(shù)組在最后一行增加逗號(hào)
trailingComma: 'es5',
parser: 'typescript',
}
2.6 重啟 vscode
重啟 vscode 后，我們?cè)?.prettierrc.js 文件中配置的代碼風(fēng)格才會(huì)生效
三、將代碼提交到 git 倉庫
如何使用 vscode 將代碼推送至 git 倉庫??：http://t.csdnimg.cn/t7YT9
四、使用 husky
4.1 簡(jiǎn)介
- 一個(gè) git hook 工具
- 在 git commit 之前執(zhí)行自定義的命令
- 如執(zhí)行代碼風(fēng)格的檢查，避免提交非規(guī)范代碼
最終實(shí)現(xiàn)的是，即使多人協(xié)同開發(fā)項(xiàng)目，最終提交到遠(yuǎn)程倉庫中的，也是符合規(guī)范的、風(fēng)格統(tǒng)一的代碼。
4.2 安裝
npm install husky -D
4.3 編輯package.json >準(zhǔn)備腳本并運(yùn)行一次
npm pkg set scripts.prepare="husky install"
npm run prepare
4.4 增加鉤子函數(shù)
// 表示 git commit 之前執(zhí)行 npm run lint
npx husky add .husky/pre-commit "npm run lint"
// 表示 git commit 之前執(zhí)行 npm run format
npx husky add .husky/pre-commit "npm run format"
// 表示 git commit 之前執(zhí)行 npm run git add .
npx husky add .husky/pre-commit "git add ."
簡(jiǎn)單測(cè)試一下：
五、使用 commitlint
5.1 安裝
windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
mac:
npm install --save-dev @commitlint/{config-conventional,cli}
5.2 配置
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
5.3 安裝 husky
注：已安裝 husky 的不用重復(fù)安裝
npm:
npm install husky --save-dev
yarn
yarn add husky --dev
5.4 增加 hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
5.5 測(cè)試一下
隨便寫一個(gè)提交描述，將無法成功提交
5.6 正確且優(yōu)雅的提及
參考 git 上的開源項(xiàng)目 vue-pure-admin
參考大家熟知的 vue.js :
5.7 提交格式
前綴 + 冒號(hào) + 一個(gè)空格 + 本次提交描述
5.8 查看合法的提交前綴
六、授人以漁
6.1 以上步驟如何來的？
或許屏幕前的你，會(huì)好奇，為啥我就知道是這些命令，然后這樣配置就能成功，其實(shí)這些步驟，在 github 上都有寫, 而且比你在網(wǎng)上找的博客帖子更加準(zhǔn)確。文章來源：http://www.zghlxwxcb.cn/news/detail-713710.html
6.2 以 husky 為例
文章來源地址http://www.zghlxwxcb.cn/news/detail-713710.html
七、創(chuàng)作不易，點(diǎn)贊收藏不迷路
到了這里，關(guān)于React18入門（第二篇）——React18+Ts項(xiàng)目配置husky、eslint、pretttier、commitLint的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
