1仆邓，前言
本文主要分享一個(gè)項(xiàng)目的規(guī)范約束從0到1的流程鲜滩，從通過(guò)vue-cli創(chuàng)建項(xiàng)目，到團(tuán)隊(duì)協(xié)作插件安裝（husky节值、eslint、commitlint榜聂、prettier等）搞疗。
- 本文vue-cli腳手架為5.x
- 本文webpack版本為5.x
- 本文vue版本為3.x
2，創(chuàng)建項(xiàng)目
如果你的vue-cli不是5.x版本须肆，并且不知道怎么創(chuàng)建vue-cli項(xiàng)目匿乃，請(qǐng)先查看該文章：傳送門
首先進(jìn)入一個(gè)空間足夠的磁盤，比如樓主是進(jìn)的L盤豌汇，輸入以下命令：
vue create demo
創(chuàng)建完畢后幢炸，項(xiàng)目結(jié)構(gòu)如下圖：
此時(shí)可以打開(kāi)package.json，查看項(xiàng)目當(dāng)前裝的依賴拒贱。默認(rèn)是已經(jīng)安裝了eslint宛徊、babel和vue
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
}
2，安裝vue全家桶
先安裝一些常用的vue生態(tài)逻澳，包括axios闸天，vue-router，vuex斜做，qs苞氮，element-plus等，具體使用可看下方教程鏈接：
npm install axios vue-router vuex qs element-plus --save
再安裝typescript
npm install typescript@4.7 --save -D
3瓤逼，配置prettier
-
首先在根目錄創(chuàng)建
.prettierrc.js文件笼吟，這個(gè)文件是項(xiàng)目的prettier規(guī)則库物，內(nèi)容如下：module.exports = { tabWidth: 2, // tab縮進(jìn)大小,默認(rèn)為2 useTabs: false, // 使用tab縮進(jìn)，默認(rèn)false semi: false, // 使用分號(hào), 默認(rèn)true singleQuote: true, // 使用單引號(hào), 默認(rèn)false(在jsx中配置無(wú)效, 默認(rèn)都是雙引號(hào)) jsxBracketSameLine: false, // 在jsx中把'>' 是否單獨(dú)放一行 jsxSingleQuote: false, // 在jsx中使用單引號(hào)代替雙引號(hào) proseWrap: 'preserve', // "always" - 當(dāng)超出print width（上面有這個(gè)參數(shù)）時(shí)就折行 "never" - 不折行 "perserve" - 按照文件原樣折行 trailingComma: 'none', // 對(duì)象最后一項(xiàng)默認(rèn)格式化會(huì)加逗號(hào) arrowParens: 'avoid', // 箭頭函數(shù)參數(shù)括號(hào) 默認(rèn)avoid 可選 avoid(能省略括號(hào)的時(shí)候就省略)| always(總是有括號(hào)) bracketSpacing: true, // 對(duì)象中的空格 默認(rèn)true{ foo: bar } false:{foo: bar} printWidth: 100 // 一行多長(zhǎng)贷帮，超過(guò)的會(huì)換行 } -
然后在根目錄創(chuàng)建
.prettierignore文件艳狐，這個(gè)是設(shè)置有那些文件需要忽略eslint的檢查，內(nèi)容如下：node_modules dist public .vscode -
安裝
prettier的擴(kuò)展皿桑。eslint-plugin-prettier毫目，eslint-config-prettiernpm install eslint-config-prettier eslint-plugin-prettier --save -D
4，配置eslint
-
首先在根目錄創(chuàng)建
.eslintrc.js诲侮，這個(gè)文件是項(xiàng)目的eslint規(guī)則镀虐，內(nèi)容如下：module.exports = { root: true, env: { browser: true, node: true, commonjs: true, es6: true, amd: true, }, globals: { // 允許的全局變量 TAny: true, TAnyType: true, TAnyArray: true, TAnyFunc: true, TDictArray: true, TDictObject: true }, extends: ['plugin:vue/vue3-essential', 'airbnb-base', '@vue/typescript/recommended'], // 擴(kuò)展插件 parserOptions: { ecmaVersion: 2020, sourceType: 'module', parser: '@typescript-eslint/parser', ecmaFeatures: { tsx: true, // 允許解析TSX jsx: true, } }, settings: { 'import/resolver': { node: { extensions: ['.js', '.jsx', '.ts', '.tsx', 'vue'] } } }, plugins: ['prettier'], rules: { // 0表示不不處理，1表示警告沟绪，2表示錯(cuò)誤并退出 'vue/multi-word-component-names': 'off', // 要求組件名稱始終為多字 '@typescript-eslint/no-unused-vars': [ 'error', { varsIgnorePattern: '.*', args: 'none' } ], camelcase: 1, // 駝峰命名 'prettier/prettier': 0, // 會(huì)優(yōu)先采用prettierrc.json的配置刮便，不符合規(guī)則會(huì)提示錯(cuò)誤 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'comma-dangle': 'off', 'import/prefer-default-export': 'off', // 優(yōu)先export default導(dǎo)出 'no-param-reassign': 'off', // 函數(shù)參數(shù)屬性的賦值 semi: 'off', '@typescript-eslint/no-explicit-any': 'warn', 'no-unused-expressions': 'off', // 聯(lián)式調(diào)用使用? 'import/no-cycle': 'off', // 導(dǎo)入循環(huán)引用報(bào)錯(cuò) 'arrow-parens': 'off', // 箭頭函數(shù)一個(gè)參數(shù)可以不要括號(hào) 'no-underscore-dangle': 'off', // 無(wú)下劃線 'no-plusplus': 'off', // 使用一元運(yùn)算符 'object-curly-newline': 'off', 'no-restricted-syntax': 'off', // 使用for of 'operator-linebreak': 'off', // after 'arrow-body-style': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', // ts每個(gè)函數(shù)都要顯式聲明返回值 // 暫時(shí)屏蔽檢測(cè)@別名 'import/no-useless-path-segments': 'off', 'import/no-unresolved': 'off', 'import/extensions': 'off', 'import/no-absolute-path': 'off', 'import/no-extraneous-dependencies': 'off', 'newline-per-chained-call': ['error', { ignoreChainWithDepth: 10 }], 'linebreak-style': [0, 'error', 'windows'], 'no-shadow': 'off', // 注意你必須禁用基本規(guī)則，因?yàn)樗梢詧?bào)告不正確的錯(cuò)誤 '@typescript-eslint/no-shadow': ['error'], '@typescript-eslint/member-delimiter-style': [ 'error', { multiline: { delimiter: 'none', requireLast: true, }, singleline: { delimiter: 'semi', requireLast: false, }, }, ], 'keyword-spacing': [ 2, { before: true, after: true, }, ] } } -
然后在根目錄創(chuàng)建
.eslintignore文件绽慈，這個(gè)是設(shè)置那些文件需要忽略eslint的檢查恨旱，內(nèi)容如下：node_modules dist .vscode -
安裝
eslint的擴(kuò)展。eslint-config-airbnb-base坝疼，@typescript-eslint/eslint-plugin搜贤，@vue/eslint-config-typescript，@typescript-eslint/parser钝凶，@vue/eslint-config-typescript仪芒，eslint-plugin-import。npm install eslint-config-airbnb-base @typescript-eslint/eslint-plugin @vue/eslint-config-typescript @typescript-eslint/parser @vue/eslint-config-typescript eslint-plugin-import --save -D
到這一步耕陷，就可以在package.json文件里的scripts對(duì)象里添加一行自動(dòng)修復(fù)文件的命令 lint-fix：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint-fix": "vue-cli-service lint --fix ./src --ext .vue,.js,.ts"
}
在項(xiàng)目根目錄打開(kāi)終端掂名，輸入npm run lint-fix，會(huì)按照你的eslint要求自動(dòng)進(jìn)行修復(fù)哟沫，部分修復(fù)不了的需要手動(dòng)修改饺蔑。
5，配置husky + git鉤子
husky是一個(gè)讓配置git鉤子變得更簡(jiǎn)單的工具嗜诀，支持所有的git鉤子猾警。它可以將git內(nèi)置的鉤子暴露出來(lái)，很方便地進(jìn)行鉤子命令注入裹虫，而不需要在.git/hooks目錄下自己寫(xiě)shell腳本了肿嘲。您可以使用它來(lái)lint您的提交消息、運(yùn)行測(cè)試筑公、lint代碼等雳窟。當(dāng)你commit或push的時(shí)候。husky觸發(fā)所有git鉤子腳本。
-
安裝
huskynpm install husky --save -D -
啟用
husky封救，啟用后拇涤，根目錄會(huì)出現(xiàn)一個(gè).husky的文件夾npx husky install -
編輯
package.json文件，在scripts中添加"prepare": "husky install"命令"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint-fix": "vue-cli-service lint --fix ./src --ext .vue,.js,.ts", "prepare": "husky install" }, -
在
.husky文件夾中誉结，新建pre-commit文件鹅士，寫(xiě)入以下代碼：#!/bin/sh . "$(dirname "$0")/_/husky.sh" npx lint-staged --allow-empty -
安裝
lint-staged，這是本地暫存代碼的檢查工具惩坑，當(dāng)你git提交代碼時(shí)掉盅，會(huì)自動(dòng)檢查是否符合項(xiàng)目eslint和prettier規(guī)范npm install lint-staged --save -D -
在項(xiàng)目根目錄創(chuàng)建
.lintstagedrc.json文件，寫(xiě)入以下代碼：{ "*.{ts,js,vue,tsx,jsx}": ["npm run lint-fix", "prettier --write"] }
到這一步以舒，git提交的時(shí)候趾痘，會(huì)自動(dòng)根據(jù)項(xiàng)目eslint和prettier規(guī)范修復(fù)代碼并提交，如果碰到修復(fù)不了的蔓钟，會(huì)取消提交永票。
6，配置commitlint
在git提交時(shí)滥沫，如果能找按照規(guī)范寫(xiě)好提交信息侣集，能提高可讀性以及項(xiàng)目維護(hù)效率，方便回溯兰绣。這里我們使用commitlint規(guī)范git commit提交的信息世分。
6.1，配置commitlint格式檢查
-
首先安裝
@commitlint/cli和@commitlint/config-conventional（如果要自定義提交規(guī)范狭魂，就不用安裝@commitlint/config-conventional）npm install @commitlint/cli @commitlint/config-conventional --save -D -
在項(xiàng)目根目錄的
.husky文件夾中罚攀，新建commit-msg文件，寫(xiě)入以下內(nèi)容：#!/bin/sh . "$(dirname "$0")/_/husky.sh" npx commitlint --edit $1 -
在項(xiàng)目根目錄新建
commitlint.config.js文件雌澄，寫(xiě)入以下內(nèi)容：/* "off"或者0:關(guān)閉規(guī)則 "warn"或1:開(kāi)啟規(guī)則拋出警告 "error"或2:開(kāi)啟規(guī)則拋出錯(cuò)誤 */ module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'body-leading-blank': [2, 'always'], // body上面有換行 'footer-leading-blank': [1, 'always'], // footer上面有換行 'header-max-length': [2, 'always', 108], // header上最大108字符 'type-case': [0], 'type-empty': [0], 'scope-empty': [0], 'scope-case': [0], 'subject-full-stop': [0, 'never'], 'subject-case': [0, 'never'], 'type-enum': [ 2, 'always', [ 'feat', // 新增功能、頁(yè)面 'fix', // 修補(bǔ)bug 'docs', // 修改文檔杯瞻、注釋 'style', // 格式：不影響代碼運(yùn)行的變動(dòng)镐牺、空格、格式化等等 'ui', // ui修改：布局魁莉、css樣式等等 'hotfix', // 修復(fù)線上緊急bug 'build', // 改變構(gòu)建流程睬涧，新增依賴庫(kù)、工具等（例如:修改webpack） 'refactor', // 代碼重構(gòu)旗唁，未新增任何功能和修復(fù)任何bug 'revert', // 回滾到上一個(gè)版本 'perf', // 優(yōu)化：提升性能畦浓、用戶體驗(yàn)等 'ci', // 對(duì)CI/CD配置文件和腳本的更改 'chore', // 其他不修改src或測(cè)試文件的更改 'test', // 測(cè)試用例：包括單元測(cè)試、集成測(cè)試 'update' // 更新：普通更新 ] ] } } -
在git提交時(shí)检疫，填寫(xiě)的
commit信息格式規(guī)范如下：<type>(<scope>): <subject> // 必填 // 空一行 <body> // 必填 // 空一行 <footer> // 可忽略不填例子：
git commit -m 'style(home.vue):修改樣式 修改了home.vue的樣式讶请，添加了背景色'
6.2，安裝自定義的輔助提交依賴
-
首先需要安裝
commitizen和commitlint-config-cz和cz-customizablenpm install commitizen commitlint-config-cz cz-customizable --save -D -
然后新建
.cz-config.js文件屎媳，內(nèi)容如下：'use strict' module.exports = { types: [ { value: 'feat', name: '新增：新增功能夺溢、頁(yè)面' }, { value: 'fix', name: 'bug：修復(fù)某個(gè)bug' }, { value: 'docs', name: '文檔：修改增加文檔论巍、注釋' }, { value: 'style', name: '格式：不影響代碼運(yùn)行的變動(dòng)、空格风响、格式化等等' }, { value: 'ui', name: 'ui修改：布局嘉汰、css樣式等等' }, { value: 'hotfix', name: 'bug：修復(fù)線上緊急bug' }, { value: 'build', name: '測(cè)試：添加一個(gè)測(cè)試' }, { value: 'refactor', name: '重構(gòu)：代碼重構(gòu)，未新增任何功能和修復(fù)任何bug' }, { value: 'revert', name: '回滾：代碼回退到某個(gè)版本節(jié)點(diǎn)' }, { value: 'perf', name: '優(yōu)化：提升性能状勤、用戶體驗(yàn)等' }, { value: 'ci', name: '自動(dòng)化構(gòu)建：對(duì)CI/CD配置文件和腳本的更改' }, { value: 'chore', name: '其他修改：不修改src目錄或測(cè)試文件的修改' }, { value: 'test', name: '測(cè)試：包括單元測(cè)試鞋怀、集成測(cè)試' }, { value: 'update', name: '更新：普通更新' } ], // 交互提示信息 messages: { type: '選擇一種你的提交類型：', scope: '選擇一個(gè)影響范圍（可選）:', customScope: '表示此更改的范圍：', subject: '短說(shuō)明：\n', body: '長(zhǎng)說(shuō)明，使用"|"符號(hào)換行（可選）：\n', breaking: '非兼容性說(shuō)明（可選）：\n', footer: '關(guān)閉的issue持搜，例如：#31, #34（可選）：\n', confirmCommit: '確定提交說(shuō)明?（yes/no）' }, allowCustomScopes: true, // 設(shè)置選擇了那些type密似，才詢問(wèn) breaking message allowBreakingChanges: ['feat', 'fix', 'ui', 'hotfix', 'update', 'perf'], subjectLimit: 100 } -
然后修改
commitlint.config.js文件的extends選項(xiàng)，改成['cz']module.exports = { extends: ['cz'], ...... } -
編輯
package.json文件朵诫，在scripts中添加"commit": "git-cz"命令"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint-fix": "vue-cli-service lint --fix ./src --ext .vue,.js,.ts", "prepare": "husky install", "commit": "git-cz" } -
在根目錄終端辛友，運(yùn)行以下命令初始化命令行的選項(xiàng)信息：
npx commitizen init cz-customizable --save-dev --save-exact -
運(yùn)行完成后，在
package.json中會(huì)出現(xiàn)如下選項(xiàng)："config": { "commitizen": { "path": "./node_modules/cz-customizable" } }
此時(shí)剪返，代碼提交過(guò)程就多了一個(gè)可選的規(guī)范提示废累，提交流程是先git add .，提交到暫存區(qū)脱盲，然后終端運(yùn)行npm run commit邑滨，根據(jù)提示選擇信息或者輸入即可，最后git push推送钱反，如下gif圖所示：
附幾個(gè)我個(gè)人的項(xiàng)目模板：
- Vite-H5-Template
- Vite-PC-Template
- Webpack-PC-Template
- H5-V2-Template
- Uniapp-Cli-V2-Template
- Uniapp-Cli-Ts-V3-Template
- PC-V2-Template
如果看了覺(jué)得有幫助的掖看，我是@上進(jìn)的鵬多多，歡迎 點(diǎn)贊 關(guān)注 評(píng)論面哥；
END
PS：在本頁(yè)按F12哎壳，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()，有驚喜哦
往期文章
- 超詳細(xì)的Cookie增刪改查
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 助你上手Vue3全家桶之Vue3教程
- 超詳細(xì)尚卫！Vuex手把手教程
- 使用nvm管理node.js版本以及更換npm淘寶鏡像源
- 超詳細(xì)归榕！Vue-Router手把手教程
- vue中利用.env文件存儲(chǔ)全局環(huán)境變量，以及配置vue啟動(dòng)和打包命令
- 微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮
個(gè)人主頁(yè)
