初始化項(xiàng)目
vite構(gòu)建vue項(xiàng)目還是比較簡單的，簡單配置選擇一下就行了
- 初始化命令
npm init vue@latest
初始化最新版本vue項(xiàng)目
2. 基本選項(xiàng)含義
- Add TypeScript 是否添加TS
- ADD JSX是否支持JSX
- ADD Vue Router是否添加Vue Router路由管理工具
- ADD Pinia 是否添加pinia(狀態(tài)管理工具)
- Add ESLinit 是否添加ESLint是否添加eslint工具
- Add Prettier 是否添加Prettier（代碼格式化工具）
配置還是比較簡單的，只用選擇是否需要就行了，不管需要注意的是我們選擇過后并不會給我們一個下載好依賴的框架，給我們的是配置文件，我們需要手動下載
配置格式化工具與代碼提交規(guī)范工具
代碼格式工具
- 安裝(如果上邊已經(jīng)安裝過了就不要安裝了)
npm install --save-dev --save-exact prettier
- 創(chuàng)建配置文件
echo {}> .prettierrc.json
該文件配置的是格式化代碼的一些規(guī)范，不過需要注意的是通過該命令行生成的.prettierrc.json可能會被錯誤的解析為utf-16格式，如果是就自己手動將代碼格式轉(zhuǎn)換為utf-8格式否則會導(dǎo)致格式化是亂碼問題
3. 創(chuàng)建忽略格式化文件.prettierignore
該文件用于寫忽略的文件，因?yàn)橛行┪募遣恍枰覀兏袷交?/p>
build
coverage
- 檢測是否配置成功
執(zhí)行**npx prettier --write .**命令，查看是否格式化代碼，npx的作用是使用當(dāng)前文件夾中的prettier命令而不是全局的 - 配置文件其他信息
官網(wǎng)配置
可以根據(jù)自己習(xí)慣調(diào)整代碼格式 - 添加git鉤子函數(shù)
雖然配置好了prettier 工具但是我們還是得自己手動執(zhí)行命令格式化，比較麻煩，所以我們可以借助git hook來在我們提交代碼之前自動格式化代碼
npx mrm@2 lint-staged
另外我們需要把package.json的配置修改一下
"lint-staged": {
"*.js": "eslint --cache --fix"
}
修改為
"lint-staged": {
"*.{js,css,md,vue}": "prettier --write"
}
代碼提交規(guī)范配置
- 安裝
npm i @commitlint/config-conventional @commitlint/cli -D
安裝上述插件后我們也可以在命令行輸入npx cz來提交代碼，我們可以輸入內(nèi)容來讓我們代碼提交更加規(guī)范
2. 在根目錄創(chuàng)建commitlint.config.js文件，配置commitlint
module.exports = {
extends: ['@commitlint/config-conventional']
}
module可能會導(dǎo)致eslint報(bào)錯，所以我們需要讓eslint忽略該文件的檢測
在tsconfig.json中添加
"exclude": ["commitlint.config.js"],
- 生成鉤子函數(shù)
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
這樣如果我們提交代碼不夠規(guī)范的話，gitlint會自動把我們本次提交判定為失敗
4. 規(guī)范詳情文章來源：http://www.zghlxwxcb.cn/news/detail-657135.html
| Type | 作用 |
|---|---|
| feat | 新增特性 (feature) |
| fix | 修復(fù) Bug(bug fix) |
| docs | 修改文檔 (documentation) |
| style | 代碼格式修改(white-space, formatting, missing semi colons, etc) |
| refactor | 代碼重構(gòu)(refactor) |
| perf | 改善性能(A code change that improves performance) |
| test | 測試(when adding missing tests) |
| build | 變更項(xiàng)目構(gòu)建或外部依賴（例如 scopes: webpack、gulp、npm 等） |
| ci | 更改持續(xù)集成軟件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等 |
| chore | 變更構(gòu)建流程或輔助工具(比如更改測試環(huán)境) |
| revert | 代碼回退 |
也可以查看官網(wǎng)來獲取更多信息文章來源地址http://www.zghlxwxcb.cn/news/detail-657135.html
到了這里，關(guān)于vite初始化vue3項(xiàng)目（配置自動格式化工具與git提交規(guī)范工具）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
