vue3 + eslint + prettier + cz-git
一:vue3
1.1 vue3創(chuàng)建
輸入命令后根據(jù)提示選擇,項目是ts所以必選typescript
pnpm create vite
1.2 安裝依賴
pnpm i
1.3 運行
pnpm run dev
二:配置eslint
2.1 執(zhí)行安裝命令
pnpm add eslint -D
2.2 初始化eslint
pnpm eslint --init
- 依次選擇
2.3 依賴安裝完成后,會生成.eslintrc.cjs
配置文件
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended' // 解決ESlint和Prettier沖突
],
overrides: [],
// 配置支持 vue 和 ts
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用該any類型。
'@typescript-eslint/no-unused-vars': 'off', //禁止未使用的變量
'vue/valid-template-root': 'off',
'vue/no-v-html': 'off',
'prefer-const': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'vue/multi-word-component-names': 'off',
endOfLine: 'off', // 添加忽略換行格式的檢查。
'vue/require-default-prop': 'off' // props 需要設(shè)置默認(rèn)值
}
}
2.4 在package.json
文件中的script
中添加lint
命令
{
"scripts": {
// eslint . 為指定lint當(dāng)前項目中的文件
// --ext 為指定lint哪些后綴的文件
// --fix 開啟自動修復(fù)
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
}
}
2.5 執(zhí)行lint
命令
pnpm lint
遇到這樣的錯誤,很明顯少安裝插件了
pnpm install eslint-plugin-prettier@latest --save-dev
pnpm add prettier -D
2.6 安裝插件eslint
在項目中新建
.vscode/settings.json
文件,然后在其中加入以下配置。
{
// 開啟自動修復(fù)
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
}
}
三:配置prettier
3.1 執(zhí)行安裝命令
pnpm add prettier -D
3.2 在根目錄下新建.prettierrc.cjs
更多配置可查看官方文檔
module.exports = {
singleQuote: true, // 使用單引號, 默認(rèn)false(在jsx中配置無效, 默認(rèn)都是雙引號)
semi: false, // 使用分號, 默認(rèn)true
printWidth: 120, // 每行超過多少字符自動換行
arrowParens: 'avoid', // avoid 能省略括號的時候就省略 例如x => x
bracketSpacing: true, // 對象中的空格 默認(rèn)true
trailingComma: 'none', // all 包括函數(shù)對象等所有可選
tabWidth: 2, // tab縮進(jìn)大小,默認(rèn)為2
useTabs: false, // 使用tab縮進(jìn),默認(rèn)false
htmlWhitespaceSensitivity: 'ignore',
// 對象大括號直接是否有空格,默認(rèn)為true,效果:{ foo: bar }
bracketSpacing: true
}
3.3 在package.json
中的script
中添加以下命令
{
"scripts": {
"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
}
}
3.4 安裝Prettier - Code formatter插件
在
.vscode/settings.json
中添加一下規(guī)則文章來源:http://www.zghlxwxcb.cn/news/detail-615596.html
{
// 保存的時候自動格式化
"editor.formatOnSave": true,
// 默認(rèn)格式化工具選擇prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
四:使用cz-git
4.1 全局安裝commitizen,如此一來可以快速使用 cz 或 git cz 命令進(jìn)行啟動。
npm install -g commitizen
4.2 安裝依賴
pnpm install -D cz-git
4.3 修改 package.json
添加 config
指定使用的適配器
{
"scripts": {
},
"config": {
"commitizen": {
"path": "node_modules/cz-git"
}
}
}
4.4 添加自定義配置
在根目錄自行添加.commitlintrc.cjs文件進(jìn)行配置文章來源地址http://www.zghlxwxcb.cn/news/detail-615596.html
// .commitlintrc.js
module.exports = {
rules: {
// @see: https://commitlint.js.org/#/reference-rules
},
prompt: {
messages: {
type: '選擇你要提交的類型 :',
scope: '選擇一個提交范圍(可選):',
customScope: '請輸入自定義的提交范圍 :',
subject: '填寫簡短精煉的變更描述 :\n',
body: '填寫更加詳細(xì)的變更描述(可選)。使用 "|" 換行 :\n',
breaking: '列舉非兼容性重大的變更(可選)。使用 "|" 換行 :\n',
footer: '列舉關(guān)聯(lián)issue (可選) 例如: #31, #I3244 :\n',
confirmCommit: '是否提交或修改commit ?'
},
types: [
{ value: 'feat', name: 'feat: 新增功能 | A new feature', emoji: '?' },
{ value: 'fix', name: 'fix: 修復(fù)缺陷 | A bug fix', emoji: '??' },
{ value: 'docs', name: 'docs: 文檔更新 | Documentation only changes', emoji: '??' },
{
value: 'style',
name: 'style: 代碼格式 | Changes that do not affect the meaning of the code',
emoji: '??'
},
{
value: 'refactor',
name: 'refactor: 代碼重構(gòu) | A code change that neither fixes a bug nor adds a feature',
emoji: '??'
},
{ value: 'perf', name: 'perf: 性能提升 | A code change that improves performance', emoji: '??' },
{ value: 'test', name: 'test: 測試相關(guān) | Adding missing tests or correcting existing tests', emoji: '?' },
{
value: 'build',
name: 'build: 構(gòu)建相關(guān) | Changes that affect the build system or external dependencies',
emoji: '???'
},
{ value: 'ci', name: 'ci: 持續(xù)集成 | Changes to our CI configuration files and scripts', emoji: '??' },
{ value: 'revert', name: 'revert: 回退代碼 | Revert to a commit', emoji: '??' },
{
value: 'chore',
name: 'chore: 其他修改 | Other changes that do not modify src or test files',
emoji: '??'
}
],
useEmoji: true,
// scope 類型(定義之后,可通過上下鍵選擇)
scopes: [
['components', '組件相關(guān)'],
['hooks', 'hook 相關(guān)'],
['utils', 'utils 相關(guān)'],
['element-ui', '對 element-ui 的調(diào)整'],
['styles', '樣式相關(guān)'],
['deps', '項目依賴'],
['auth', '對 auth 修改'],
['other', '其他修改']
].map(([value, description]) => {
return {
value,
name: `${value.padEnd(30)} (${description})`
}
}),
// 是否允許自定義填寫 scope,在 scope 選擇的時候,會有 empty 和 custom 可以選擇。
allowCustomScopes: true,
// 跳過要詢問的步驟
skipQuestions: ['body', 'breaking', 'footer'],
subjectLimit: 100, // subject 限制長度
// 設(shè)置只有 type 選擇了 feat 或 fix,才詢問 breaking message
allowBreakingChanges: ['feat', 'fix'],
issuePrefixs: [
// 如果使用 gitee 作為開發(fā)管理
{ value: 'link', name: 'link: 鏈接 ISSUES 進(jìn)行中' },
{ value: 'comment', name: 'comment: 評論 ISSUES' },
{ value: 'closed', name: 'closed: 標(biāo)記 ISSUES 已完成' }
]
}
}
到了這里,關(guān)于vue3-eslint-prettier-czgit配置的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!