Vue 3 + TypeScript + Vite
搭建 husky eslint prettier commitlint commitizen 規(guī)范的項(xiàng)目
一辜纲、安裝 eslint
npm i eslint -D
執(zhí)行初始化
npx eslint --init
按步驟走完
[圖片上傳失敗...(image-a6e2-1680267204631)]
會(huì)生成.eslintrc 文件
生成的 eslintrc 配置需要改一下笨觅，不然 vue 文件會(huì)報(bào) Parsing error: ‘＞‘ expected
修改
// before
// parser: '@typescript-eslint/parser',
// parserOptions: {
// ecmaVersion: 'latest',
// sourceType: 'module'
// },
// now
"parser": "vue-eslint-parser",
"parserOptions":{
"parser":"@typescript-eslint/parser",
},
二、安裝 prettier
npm i prettier -D
手動(dòng)新建 .prettierrc耕腾，寫點(diǎn)基礎(chǔ)配置见剩，如下
{
"semi": true,
"tabWidth": 2,
"trailingComma": "none",
"singleQuote": true,
"arrowParens": "avoid"
}
eslint 與 prettier 結(jié)合使用
安裝依賴
npm i eslint-config-prettier eslint-plugin-prettier -D
配置.eslintrc 文件
把插件使用上
module.exports = {
extends: [
"eslint:recommended",
"plugin:vue/vue3-essential",
+ 'plugin:prettier/recommended'
],
}
三、安裝 stylelint
安裝 14 版本
相關(guān)依賴
"postcss": "8.4.12",
"postcss-html": "1.3.0",
"stylelint": "14.10.0",
"stylelint-config-html": "1.0.0",
"stylelint-config-prettier": "9.0.3",
"stylelint-config-recommended": "7.0.0",
"stylelint-config-recommended-scss": "8.0.0",
"stylelint-config-recommended-vue": "1.4.0",
"stylelint-config-standard": "25.0.0",
"stylelint-config-standard-scss": "4.0.0",
"stylelint-order": "6.0.3",
命令
npm i stylelint@14.6.1 stylelint-config-prettier@9.0.3 stylelint-config-recommended-vue@1.4.0 stylelint-config-standard-scss@3.0.0 stylelint-order@5.0.0
配置文件 stylelint.config.js
module.exports = {
defaultSeverity: 'error',
extends: [
'stylelint-config-standard-scss',
'stylelint-config-recommended-vue',
'stylelint-config-prettier'
],
plugins: ['stylelint-order'],
rules: {
'max-empty-lines': 1,
'order/properties-order': [
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
'justify-content',
'align-items',
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'font-size',
'font-family',
'font-weight',
'border',
'border-style',
'border-width',
'border-color',
'border-top',
'border-top-style',
'border-top-width',
'border-top-color',
'border-right',
'border-right-style',
'border-right-width',
'border-right-color',
'border-bottom',
'border-bottom-style',
'border-bottom-width',
'border-bottom-color',
'border-left',
'border-left-style',
'border-left-width',
'border-left-color',
'border-radius',
'text-align',
'text-justify',
'text-indent',
'text-overflow',
'text-decoration',
'white-space',
'color',
'background',
'background-position',
'background-repeat',
'background-size',
'background-color',
'background-clip',
'opacity',
'filter',
'list-style',
'outline',
'visibility',
'box-shadow',
'text-shadow',
'resize',
'transition'
]
},
// 指定需要忽略的文件
ignoreFiles: [
'**/*.js',
'**/*.jsx',
'**/*.ts',
'**/*.tsx',
'**/*.png',
'**/*.ttf',
'**/*.woff',
'**/*.json',
'**/*.md',
'**/*.html'
]
};
文件忽略校驗(yàn)方法
// 忽略整個(gè)檔案
/* stylelint-disable */
// 忽略下一行
/* stylelint-disable-next-line */
package.json 命令
stylelint-check 命令中的 stylelint-config-prettier-check 為 stylelint-config-prettier 附帶一個(gè)小 CLI 工具扫俺，可幫助您檢查您的配置是否包含任何與 Prettier 沖突的規(guī)則苍苞。
{
"scripts": {
"lint:style": "stylelint \"**/*.{css,scss,vue}\"",
"fix:style": "stylelint \"**/*.{css,scss,vue}\" --fix",
"stylelint:check": "stylelint-config-prettier-check"
}
}
安裝 15 版本（會(huì)警告）
裝 15 的話會(huì)警告，因?yàn)橐瞥撕芏嘁?guī)則
會(huì)報(bào)很多規(guī)則啟用的警告
[圖片上傳失敗...(image-51b80d-1680267204631)]
相關(guān)依賴
{
"postcss": "^8.4.21",
"postcss-html": "^1.5.0",
"stylelint": "^15.3.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-prettier": "9.0.3",
"stylelint-config-recommended": "^11.0.0",
"stylelint-config-recommended-scss": "^9.0.1",
"stylelint-config-recommended-vue": "1.4.0",
"stylelint-config-standard": "^31.0.0",
"stylelint-config-standard-scss": "7.0.1",
"stylelint-order": "^6.0.3"
}
配置文件 stylelint.config.js
extends: [
'stylelint-config-standard',
'stylelint-config-prettier',
'stylelint-config-html/vue',
'stylelint-config-recommended-vue/scss',
'stylelint-config-recommended-scss'
],
plugins: ['stylelint-order'],
rules: {
'order/properties-order': [
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
'justify-content',
'align-items',
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'font-size',
'font-family',
'font-weight',
'border',
'border-style',
'border-width',
'border-color',
'border-top',
'border-top-style',
'border-top-width',
'border-top-color',
'border-right',
'border-right-style',
'border-right-width',
'border-right-color',
'border-bottom',
'border-bottom-style',
'border-bottom-width',
'border-bottom-color',
'border-left',
'border-left-style',
'border-left-width',
'border-left-color',
'border-radius',
'text-align',
'text-justify',
'text-indent',
'text-overflow',
'text-decoration',
'white-space',
'color',
'background',
'background-position',
'background-repeat',
'background-size',
'background-color',
'background-clip',
'opacity',
'filter',
'list-style',
'outline',
'visibility',
'box-shadow',
'text-shadow',
'resize',
'transition'
]
},
三狼纬、安裝 husky lint-staged
husky----------操作 git 鉤子的工具
lint-staged----本地暫存代碼檢查工具
npm i lint-staged husky -D
設(shè)置腳本：npm set-script prepare "husky install"
會(huì)在 packages.json 追加一條 script
"prepare":"husky install"
啟動(dòng)腳本：npm run prepare
會(huì)生成.husky 目錄
添加 git 鉤子命令
npx husky add .husky/pre-commit "npx lint-staged"
創(chuàng)建.lintstagedrc.json
{
"*.{js,jsx,ts,tsx,vue}": "eslint --ext .vue,.js,.ts src/"
}
或者
{
"*.{vue,js,ts,jsx,tsx,css,sass,scss,json,md}": ["prettier --write"],
"*.{vue,css,sass,scss}": ["stylelint --fix"],
"*.{vue,js,jsx,ts,jsx,tsx}": ["eslint --fix"]
}
四羹呵、安裝 Commitlint
Commitlint：用于校驗(yàn)填寫的 commit message 是否符合設(shè)定的規(guī)范
npm i commitlint @commitlint/config-conventional -D
添加 husky 鉤子
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
五骂际、安裝 commitizen
Commitizen：是一個(gè)命令行提示工具，它主要用于幫助我們更快地寫出規(guī)范的 commit message
npm i commitizen -g 全局安裝
可選：使用 cz-conventional-changelog 規(guī)則
npm i cz-conventional-changelog -D
再執(zhí)行
npx commitizen init cz-conventional-changelog --save-dev --save-exact
# npm commitizen init cz-conventional-changelog --save-dev --save-exact
# yarn commitizen init cz-conventional-changelog --yarn --dev --exact
# pnpm commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact
上面的命令會(huì)在 package 里添加
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
可選：使用自己的規(guī)則
npm i -D commitlint-config-cz cz-customizable
把 package.json 里的 commitizen 配置改成使用 cz-customizable
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
新建 commitlint.config.js 文件
module.exports = {
// 使用 .cz.config.js里的規(guī)則
extends: ['cz'],
rules: {
// 自定義
}
};
新建 .cz-config.js
'use strict'
module.exports = {
types: [
{ value: '?新增', name: '新增: 新的內(nèi)容' },
{ value: '??修復(fù)', name: '修復(fù): 修復(fù)一個(gè)Bug' },
{ value: '??文檔', name: '文檔: 變更的只有文檔' },
{ value: '??格式', name: '格式: 空格, 分號(hào)等格式修復(fù)' },
{ value: '??重構(gòu)', name: '重構(gòu): 代碼重構(gòu)担巩，注意和特性方援、修復(fù)區(qū)分開' },
{ value: '??性能', name: '性能: 提升性能' },
{ value: '?測(cè)試', name: '測(cè)試: 添加一個(gè)測(cè)試' },
{ value: '??工具', name: '工具: 開發(fā)工具變動(dòng)(構(gòu)建、腳手架工具等)' },
{ value: '?回滾', name: '回滾: 代碼回退' }
],
scopes: [
{ name: 'leetcode' },
{ name: 'javascript' },
{ name: 'typescript' },
{ name: 'Vue' },
{ name: 'node' }
],
// it needs to match the value for field type. Eg.: 'fix'
/* scopeOverrides: {
fix: [
{name: 'merge'},
{name: 'style'},
{name: 'e2eTest'},
{name: 'unitTest'}
]
}, */
// override the messages, defaults are as follows
messages: {
type: '選擇一種你的提交類型:',
scope: '選擇一個(gè)scope (可選):',
// used if allowCustomScopes is true
customScope: 'Denote the SCOPE of this change:',
subject: '短說明:\n',
body: '長(zhǎng)說明涛癌，使用"|"換行(可選)：\n',
breaking: '非兼容性說明 (可選):\n',
footer: '關(guān)聯(lián)關(guān)閉的issue犯戏，例如：#31, #34(可選):\n',
confirmCommit: '確定提交說明?(yes/no)'
},
allowCustomScopes: true,
allowBreakingChanges: ['特性', '修復(fù)'],
// limit subject length
subjectLimit: 100
}
最后使用 git cz 命令即可有提示的提交代碼
