本篇文章將從 0 開始搭建一個企業可用的項目骨架,這裏我使用的包管理工具時 pnpm(跟 npm、yarn 差不多)
通過 Vite 安裝 Vue3 項目
pnpm create vite
然後依次輸入項目名稱(可選)、選擇 Vue + Typescript
代碼規範
ESlint+Prettier
兩個工具一個是進行代碼風格檢查,另一個是格式化工具。
第一步,安裝相關依賴:
pnpm add eslint eslint-plugin-vue eslint-define-config -D # eslink
pnpm add prettier eslint-plugin-prettier @vue/eslint-config-prettier -D # prettire
pnpm add @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D # 對ts的支持
第二步,編寫對應配置文件:
.eslintrc.js
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
root: true,
/* 指定如何解析語法。*/
parser: 'vue-eslint-parser',
/* 優先級低於parse的語法解析配置 */
parserOptions: {
parser: '@typescript-eslint/parser',
//模塊化方案
sourceType: 'module',
},
env: {
browser: true,
es2021: true,
node: true,
// 解決 defineProps and defineEmits generate no-undef warnings
'vue/setup-compiler-macros': true,
},
// https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
globals: {},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:@typescript-eslint/recommended', // typescript-eslint推薦規則,
'prettier',
'plugin:prettier/recommended',
],
// https://cn.eslint.org/docs/rules/
rules: {
// 禁止使用 var
'no-var': 'error',
semi: 'off',
// 優先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
'@typescript-eslint/no-explicit-any': 'off', // 可以使用 any 類型
'@typescript-eslint/explicit-module-boundary-types': 'off',
// 解決使用 require() Require statement not part of import statement. 的問題
'@typescript-eslint/no-var-requires': 0,
// https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-types.md
'@typescript-eslint/ban-types': [
'error',
{
types: {
// add a custom message to help explain why not to use it
Foo: "Don't use Foo because it is unsafe",
// add a custom message, AND tell the plugin how to fix it
String: {
message: 'Use string instead',
fixWith: 'string',
},
'{}': {
message: 'Use object instead',
fixWith: 'object',
},
},
},
],
// 禁止出現未使用的變量
'@typescript-eslint/no-unused-vars': [
'error',
{ vars: 'all', args: 'after-used', ignoreRestSiblings: false },
],
'vue/html-indent': 'off',
// 關閉此規則 使用 prettier 的格式化規則,
'vue/max-attributes-per-line': ['off'],
// 優先使用駝峯,element 組件除外
'vue/component-name-in-template-casing': [
'error',
'PascalCase',
{
ignores: ['/^el-/', '/^router-/'],
registeredComponentsOnly: false,
},
],
// 強制使用駝峯
camelcase: ['error', { properties: 'always' }],
// 優先使用 const
'prefer-const': [
'error',
{
destructuring: 'any',
ignoreReadBeforeAssign: false,
},
],
},
})
.eslintignore
/node_modules/
/public/
.vscode
.idea
.prettierrc
{
"semi": false,
"singleQuote": true,
"printWidth": 80,
"trailingComma": "all",
"arrowParens": "avoid",
"endOfLine": "lf"
}
husky
husky 是一個 Git Hook,可以幫助我們對 commit 前,push 前以及 commit 提交的信息進行驗證,現在我們就來安裝並配置一下這個工具,首先通過自動配置命令安裝,命令如下:
pnpm dlx husky-init # pnpm
npx husky-init && npm install # npm
npx husky-init && yarn # Yarn 1
npx husky-init --yarn2 && yarn # Yarn 2+
執行完畢之後會在項目的根目錄出現一個.husky的目錄,目錄下有一個pre-commit文件,我們將npm test修改爲我們需要執行的命令,示例代碼如下:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test
我們配置一下 package.json
,示例代碼如下:
"scripts": {
"lint": "eslint src --fix --ext .js,.ts,.jsx,.tsx,.vue && prettier --write --ignore-unknown"
},
- src:要驗證的目標文件夾;
- --fix:自動修復命令;
- --ext:指定檢測文件的後綴。
現在我們進行commit之前會對代碼進行檢測並進行格式化。
lint-staged
我們配置好了 husky 後,會出現一個問題,就是我們不管是改動一行還是兩行都會對整個項目進行代碼檢查和格式化,我們可以通過 lint-staged 這個工具來實現只對 git 暫存區中的內容進行檢查和格式化,配置步驟如下:
第一步,安裝 lint-staged:
pnpm add lint-staged -D
第二步,配置package.json:
{
"scripts": {},
// 新增
"lint-staged": {
"*.{vue,js,ts,tsx,jsx}": [
"eslint --fix",
"prettier --write --ignore-unknown"
]
},
}
第三步,修改 .husky/pre-commit,修改內容如下:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
over!
commit message 規範
優秀項目中 commit message 都是統一風格的,這樣做的好處就是可以快速定位每次提交的內容,方便之後對版本進行控制。現在我們就來配置一下 commit message 規範。
- 安裝 commitizen
pnpm add commitizen -D
- 配置項目提交說明,這裏我們使用 cz-conventional-changelog,或者選擇 cz-customizable,我們先進行安裝:
pnpm add cz-conventional-changelog -D
- 修改 package.json,代碼如下:
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
- 進行 commit,通過 cz 這個 cli 工具:
pnpm cz # 或者 npx cz
第一步,選擇本次更新的類型,每個類型的作用如下表所示:
Type | 作用 |
---|---|
feat | 新增特性 |
fix | 修復 bug |
docs | 修改文檔 |
style | 代碼格式修改 |
refactor | 代碼重構 |
perf | 改善性能 |
test | 測試 |
build | 變更項目構建或外部依賴(例如 scopes: webpack、gulp、npm等) |
ci | 更改持續集成軟件的配置文件和 package.json 中的 scripts 命令 |
chore | 變更構建流程或輔助工具(比如更改測試環境) |
revert | 代碼回退 |
第二步,填寫改變的作用域(可選),可以寫組件名或者文件名;第三步填寫提交的信息(建議填寫);第四步填寫提交的詳細描述(可選);第五步選擇是否是一次重大的更改(可選);第六步是否影響某個open issue(可選)。整個過程如下圖:
我們也可以配置一個 script,示例代碼如下:
package.json
"scripts": {
"commit": "cz"
},
待續。。。