寫在開頭
項目地址： vue3-project-template
自己一步步實驗，踩了無數坑最終完成了項目的配置，最後彙總成這篇文章。這些步驟都是固定的，外加上裏面都是一些基礎配置，所以按照文章的步驟來配置一般不會出錯，唯一容易出錯的點就是各個依賴的版本問題
CSS書寫規範
npm install stylelint stylelint-order stylelint-config-standard stylelint-config-prettier -D
stylelint:檢驗工具stylelint-order：css樣式書寫順序插件stylelint-config-standard:stylelint的推薦配置- stylelint-config-prettier：關閉所有不必要的或可能與 Prettier 衝突的規則
創建stylelint.config.js
module.exports = {
root: true,
plugins: ['stylelint-order'],
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global'],
},
],
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'variants',
'responsive',
'screen',
'function',
'if',
'each',
'include',
'mixin',
],
},
],
'no-empty-source': null,
'named-grid-areas-no-invalid': null,
'unicode-bom': 'never',
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'declaration-colon-space-after': 'always-single-line',
'declaration-colon-space-before': 'never',
// 'declaration-block-trailing-semicolon': 'always',
'rule-empty-line-before': [
'always',
{
ignore: ['after-comment', 'first-nested'],
},
],
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
'order/order': [
[
'dollar-variables',
'custom-properties',
'at-rules',
'declarations',
{
type: 'at-rule',
name: 'supports',
},
{
type: 'at-rule',
name: 'media',
},
'rules',
],
{ severity: 'warning' },
],
},
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
}
創建忽略文件
//.stylelintignore
/dist/*
/public/*
public/*
src/assets/font/*
配置命令
{
"script":{
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"
}
}
JS書寫規範（vue3）
npm install eslint eslint-plugin-vue --save-dev # eslint相關
npm install prettier eslint-plugin-prettier @vue/eslint-config-prettier --save-dev # prettier相關
npm install @babel/eslint-parser babel-preset-vite --save-dev #babel相關
@babel/core babel-plugin-component #沒裝
創建.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
ecmaVersion: 2022,
parser: '@babel/eslint-parser',
requireConfigFile: false,
sourceType: 'module',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-unused-vars': [
2,
{
vars: 'all',
args: 'none',
},
],
},
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
},
}
創建babel.config.js
module.exports = {
presets: ['babel-preset-vite'],
}
創建.prettierrc
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"vueIndentScriptAndStyle": false,
"singleQuote": true,
"quoteProps": "as-needed",
"bracketSpacing": true,
"trailingComma": "es5",
"jsxSingleQuote": false,
"arrowParens": "always",
"insertPragma": false,
"requirePragma": false,
"proseWrap": "never",
"htmlWhitespaceSensitivity": "strict",
"endOfLine": "auto"
}
創建檢驗的忽略文件
// .eslintignore
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
//.prettierignore
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
配置校驗命令
手動運行npm run lint:eslint會去遍歷文件進行語法校驗，和修復部分語法
"script":{
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
}
Git提交規範
規範 Commit Message和生成CHANGELOG.md
Commit Message
每次提交 Commit Message包含三個部分 Header,Body,Footer。Header 是必需的，另外倆可以省略
<head>
// 空一行
<body>
// 空一行
<footer>
npm install -g commitizen # 安裝
commitizen init cz-conventional-changelog --save --save-exact
Head
head由三個部分構成，type和subject必填，scope選填
<type>(<scope>): <subject>
type用於說明commit的類型
feat：新功能（feature）
fix：修補bug
docs：文檔（documentation）
style： 格式（不影響代碼運行的變動）
refactor：重構（即不是新增功能，也不是修改bug的代碼變動）
test：增加測試
chore：構建過程或輔助工具的變動
revert: 代碼回滾
build: 影響系統構建或者外部依賴的更改（例如：glup，npm, broccoli）
ci: 對CI配置文件和腳本的修改
perf:性能提升
scope用於說明commit影響的範圍，比如數據層，控制層，視圖層等，或者目錄，比如: route, component, utils, build等
subject是提交內容的簡單描述
Body
提交信息的詳細描述
Footer
只用於兩種情況，發生重大改變與上一個版本不兼容，或者關閉某些issue
當發生改變時，需要在body裏面進行描述
關閉issue
提交校驗鉤子
npm i lint-staged husky commitlint @commitlint/config-conventional -save-dev
# 注意這裏使用 husky7版本，與之前的版本有很大不同
husky：git hooks工具lint-staged: 檢測暫存區文件commitlint:部分項目下載的是@commitlint/cli二者是一個東西，任意都行@commitlint/config-conventional校驗的拓展，自定義校驗規範
在package.json中配置命令，在執行npm install 命令之後回自動執行husky install
"scripts": {
"prepare": "husky install"
}
執行npm install 或者手動執行npm run prepare之後，會生成一個.husky文件夾
執行兩個命令創建文件
npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
然後會在.husky文件夾中創建兩個鉤子文件commit-msg，pre-commit
- pre-commit: 就是git commit 之前走的鉤子,一般我們在這裏去處理暫存區的文件，比如格式化代碼，eslint fix代碼等
- commit-msg: 就是git commit msg的時候去觸發對應的邏輯,一般我們在這裏驗證commit msg的驗證
創建commitlint.config.js
module.exports = {extends: ['@commitlint/config-conventional']};
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
創建.lintstagedrc.json
commit時觸發鉤子執行該文件的命令
{
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.md": ["prettier --write"],
"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"]
}
生成CHANGELOG.md
npm install -g conventional-changelog-cli
#或者
npm install -g conventional-changelog # 下載這個不好用，也沒仔細找問題，兩個都試試
package.josn中配置命令
"scripts": {
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
}
這個命令不會覆蓋CHANGELOG.md文檔，只會在文檔前面新增
如果生成所有發佈的CHANGELOG.md, 則運行
"scripts": {
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
}
踩坑
-
stylelint報錯
-
錯誤信息：
Unknown word CssSyntaxError -
原因： stylelint@14版本對於vue3版本支持度不高
-
解決方法：降低stylelint版本爲@13.13.1
-
-
.prerttierrc文件本地格式化配置文件，eslint以該文件爲標準進行語法修復，修復完成仍出警告或錯誤時，大概率是項目配置的eslint和prettier與vscode安裝的插件eslint和prettier有衝突，此時應該去解決衝突，一般來說，當我們下載玩vscode的插件時，應該就已經配置好代碼風格，所以通常去更改項目的配置去適應vscode插件中的eslint，但是反過來操作也行，如果更改setting.json，更改完成之後重啓vscode避免不生效
文件 -->首選項 -->設置 -->側邊欄擴展-->ESlint-->打開setting,json文件![image-20211122102127728]()
-
lint-staged
-
錯誤信息:
import { figures } from 'listr2' ^^^^^^^ SyntaxError: The requested module 'listr2' does not provide an export named 'figures' -
原因：版本問題
-
解決方法：下載[email protected]
-
-
commitlint.config.js文件控制檯報錯亂碼
- 錯誤信息：一堆亂碼錯誤
- 原因：命令行創建的文件編碼格式有誤
- 解決方案：更改編碼格式爲utf-8
重要提示：
注意版本問題！注意版本問題！注意版本問題！