創(chuàng)建husky規(guī)范前端項(xiàng)目

.husky文件是一個配置文件，用于配置Git鉤子。Git鉤子是在Git操作時觸發(fā)的腳本，可以用于自動化一些任務(wù)，比如代碼格式化、代碼檢查、測試等。.husky文件可以指定在Git的不同操作（如commit、push等）時，應(yīng)該運(yùn)行哪些腳本。這樣，每次進(jìn)行Git操作時，就會自動運(yùn)行指定的腳本，從而保證代碼質(zhì)量和開發(fā)效率。

Husky使用

1、安裝

npm install husky -D

2、添加husky文件

• 在package.json中添加如下命令；在scripts中添加

 "prepare": "husky install"

• 執(zhí)行以下命令

npm run prepare "husky install"
npm run prepare # 在這之后會生成一個husky文件夾

3、lint-staged（本地暫存代碼檢查工具）

npm install lint-staged -D

• 判斷提交的代碼是否符合規(guī)范，并使用 prettier 格式化代碼

npx husky add .husky/pre-commit "npm run lint:lint-staged"

4、添加lint-staged.config.js 文件

module.exports = {"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],"package.json": ["prettier --write"],"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],"*.md": ["prettier --write"]
};

5、commit 校驗(yàn)工具，不符合則報錯

npm i @commitlint/cli @commitlint/config-conventional -D

• 在husky文件夾下自動生成 commit-msg文件

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

6、commitizen（基于 Node.js 的 git commit 命令行工具，生成標(biāo)準(zhǔn)化的 message）

# 安裝 commitizen，可以快速使用 cz 或 git cz 命令進(jìn)行啟動。
npm install commitizen -D

7、cz-git

npm install cz-git -D

• 配置 package.json

"config": {"commitizen": {"path": "node_modules/cz-git"}
}

8、新建commitlint.config.js文件：（對提交信息做格式檢驗(yàn)的）

// @see: https://cz-git.qbenben.com/zh/guide
/** @type {import('cz-git').UserConfig} */module.exports = {ignores: [commit => commit === 'init'],extends: ['@commitlint/config-conventional'],rules: {// @see: https://commitlint.js.org/#/reference-rules'body-leading-blank': [2, 'always'],'footer-leading-blank': [1, 'always'],'header-max-length': [2, 'always', 108],'subject-empty': [2, 'never'],'type-empty': [2, 'never'],'subject-case': [0],'type-enum': [2,'always',['init','feat','page','completepage','fix','fixbug','docs','style','refactor','perf','test','build','ci','chore','revert','wip','workflow','types','release',],],},prompt: {messages: {type: '選擇你要提交的類型 :',scope: '選擇一個提交范圍（可選）:',customScope: '請輸入自定義的提交范圍 :',subject: '填寫簡短精煉的變更描述 :\n',body: '填寫更加詳細(xì)的變更描述（可選）。使用 "|" 換行 :\n',breaking: '列舉非兼容性重大的變更（可選）。使用 "|" 換行 :\n',footerPrefixsSelect: '選擇關(guān)聯(lián)issue前綴（可選）:',customFooterPrefixs: '輸入自定義issue前綴 :',footer: '列舉關(guān)聯(lián)issue (可選) 例如: #31, #I3244 :\n',confirmCommit: '是否提交或修改commit ?',},types: [{ value: 'init: 初始化', name: '初始化:   ?  初始化項(xiàng)目', emoji: '?' },{ value: 'feat: 新增功能', name: '新增:   🚀  新增功能', emoji: '🚀' },{ value: 'page: 新增頁面', name: '頁面:   📄  新增頁面', emoji: '📄' },{ value: 'completepage: 完成頁面', name: '完成頁面:   🍻  完成頁面', emoji: '🍻' },{ value: 'fixbug: 修改bug', name: 'bug:   🐛  修改bug', emoji: '🐛' },{ value: 'fix: 修復(fù)', name: '修復(fù):   🧩  修復(fù)缺陷', emoji: '🧩' },{ value: 'docs: 文檔', name: '文檔:   📚  文檔變更', emoji: '📚' },{ value: 'style: 格式', name: '格式:   🎨  代碼格式（不影響功能，例如空格、分號等格式修正）', emoji: '🎨' },{ value: 'refactor: 重構(gòu)', name: '重構(gòu):   ??  代碼重構(gòu)（不包括 bug 修復(fù)、功能新增）', emoji: '??' },{ value: 'perf: 性能', name: '性能:   ??  性能優(yōu)化', emoji: '??' },{ value: 'test: 測試', name: '測試:   ?  添加疏漏測試或已有測試改動', emoji: '?' },{value: 'chore: 構(gòu)建',name: '構(gòu)建:   📦?  構(gòu)建流程、外部依賴變更（如升級 npm 包、修改 webpack 配置等）',emoji: '📦?',},{ value: 'ci: 集成', name: '集成:   🎡  修改 CI 配置、腳本', emoji: '🎡' },{ value: 'revert: 回退', name: '回退:   ??  回滾 commit', emoji: '??' },{ value: 'build: 打包', name: '打包:   🔨  項(xiàng)目打包發(fā)布', emoji: '🔨' },],useEmoji: true,themeColorCode: '',scopes: [],allowCustomScopes: true,allowEmptyScopes: true,customScopesAlign: 'bottom',customScopesAlias: 'custom',emptyScopesAlias: 'empty',upperCaseSubject: false,allowBreakingChanges: ['feat', 'fix'],breaklineNumber: 100,breaklineChar: '|',skipQuestions: [],issuePrefixs: [{ value: 'closed', name: 'closed:   ISSUES has been processed' }],customIssuePrefixsAlign: 'top',emptyIssuePrefixsAlias: 'skip',customIssuePrefixsAlias: 'custom',allowCustomIssuePrefixs: true,allowEmptyIssuePrefixs: true,confirmColorize: true,maxHeaderLength: Infinity,maxSubjectLength: Infinity,minSubjectLength: 0,scopeOverrides: undefined,defaultBody: '',defaultIssues: '',defaultScope: '',defaultSubject: '',},
};

9、配置 package.json 命令

{"scripts": {// 以下為必配置"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src","lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"","lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/","lint:lint-staged": "lint-staged","prepare": "husky install","release": "standard-version","commit": "git status && git add -A && git-cz"}
}

10、配置完成，提交代碼

相當(dāng)于將代碼放到暫存區(qū)，最后需要git push才能上傳

npm run commit 
# 如果使用yarn
yarn commit

EditorConfig 配置

需要安裝插件EditorConfig

根目錄下創(chuàng)建.editorconfig

配置 EditorConfig

# http://editorconfig.org
root = true[*] # 表示所有文件適用
charset = utf-8 # 設(shè)置文件字符集為 utf-8
end_of_line = lf # 控制換行類型(lf | cr | crlf)
insert_final_newline = true # 始終在文件末尾插入一個新行
indent_style = tab # 縮進(jìn)風(fēng)格（tab | space）
indent_size = 2 # 縮進(jìn)大小
max_line_length = 130 # 最大行長度[*.md] # 表示僅 md 文件適用以下規(guī)則
max_line_length = off # 關(guān)閉最大行長度限制
trim_trailing_whitespace = false # 關(guān)閉末尾空格修剪

配置 StyleLint

根據(jù)需求下載安裝

1、下載 StyleLint 相關(guān)依賴

npm i stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order postcss postcss-html stylelint-config-prettier -D

2、安裝 Vscode 插件

3、在目錄的 .vscode 文件夾下新建 settings.json

{"editor.formatOnSave": true,"stylelint.enable": true,"editor.codeActionsOnSave": {"source.fixAll.stylelint": true},"stylelint.validate": ["css","less","postcss","scss","vue","sass","html"],"files.eol": "\n"
}

4、配置.stylelintrc.js

// @see: https://stylelint.iomodule.exports = {/* 繼承某些已有的規(guī)則 */extends: ["stylelint-config-standard", // 配置stylelint拓展插件"stylelint-config-html/vue", // 配置 vue 中 template 樣式格式化"stylelint-config-standard-scss", // 配置stylelint scss插件"stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 樣式格式化"stylelint-config-recess-order", // 配置stylelint css屬性書寫順序插件,"stylelint-config-prettier", // 配置stylelint和prettier兼容],overrides: [// 掃描 .vue/html 文件中的<style>標(biāo)簽內(nèi)的樣式{files: ["**/*.{vue,html}"],customSyntax: "postcss-html",},],/*** null  => 關(guān)閉該規(guī)則*/rules: {"value-keyword-case": null, // 在 css 中使用 v-bind，不報錯"no-descending-specificity": null, // 禁止在具有較高優(yōu)先級的選擇器后出現(xiàn)被其覆蓋的較低優(yōu)先級的選擇器"function-url-quotes": "always", // 要求或禁止 URL 的引號 "always(必須加上引號)"|"never(沒有引號)""string-quotes": "double", // 指定字符串使用單引號或雙引號"unit-case": null, // 指定單位的大小寫 "lower(全小寫)"|"upper(全大寫)""color-hex-case": "lower", // 指定 16 進(jìn)制顏色的大小寫 "lower(全小寫)"|"upper(全大寫)""color-hex-length": "long", // 指定 16 進(jìn)制顏色的簡寫或擴(kuò)寫 "short(16進(jìn)制簡寫)"|"long(16進(jìn)制擴(kuò)寫)""rule-empty-line-before": "never", // 要求或禁止在規(guī)則之前的空行 "always(規(guī)則之前必須始終有一個空行)"|"never(規(guī)則前絕不能有空行)"|"always-multi-line(多行規(guī)則之前必須始終有一個空行)"|"never-multi-line(多行規(guī)則之前絕不能有空行。)""font-family-no-missing-generic-family-keyword": null, // 禁止在字體族名稱列表中缺少通用字體族關(guān)鍵字"block-opening-brace-space-before": "always", // 要求在塊的開大括號之前必須有一個空格或不能有空白符 "always(大括號前必須始終有一個空格)"|"never(左大括號之前絕不能有空格)"|"always-single-line(在單行塊中的左大括號之前必須始終有一個空格)"|"never-single-line(在單行塊中的左大括號之前絕不能有空格)"|"always-multi-line(在多行塊中，左大括號之前必須始終有一個空格)"|"never-multi-line(多行塊中的左大括號之前絕不能有空格)""property-no-unknown": null, // 禁止未知的屬性(true 為不允許)"no-empty-source": null, // 禁止空源碼"declaration-block-trailing-semicolon": null, // 要求或不允許在聲明塊中使用尾隨分號 string："always(必須始終有一個尾隨分號)"|"never(不得有尾隨分號)""selector-class-pattern": null, // 強(qiáng)制選擇器類名的格式"scss/at-import-partial-extension": null, // 解決不能引入scss文件"value-no-vendor-prefix": null, // 關(guān)閉 vendor-prefix(為了解決多行省略 -webkit-box)"selector-pseudo-class-no-unknown": [true,{ignorePseudoClasses: ["global", "v-deep", "deep"],},],},
};

代碼格式化工具Prettier

1、安裝

npm install prettier -D

2、安裝 Vscode 插件（Prettier）

3、配置.prettierrc.js

// @see: https://www.prettier.cnmodule.exports = {// 超過最大值換行printWidth: 130,// 縮進(jìn)字節(jié)數(shù)tabWidth: 2,// 使用制表符而不是空格縮進(jìn)行useTabs: true,// 結(jié)尾不用分號(true有，false沒有)semi: true,// 使用單引號(true單引號，false雙引號)singleQuote: true,// 更改引用對象屬性的時間 可選值"<as-needed|consistent|preserve>"quoteProps: 'as-needed',// 在對象，數(shù)組括號與文字之間加空格 "{ foo: bar }"bracketSpacing: true,// 多行時盡可能打印尾隨逗號。（例如，單行數(shù)組永遠(yuǎn)不會出現(xiàn)逗號結(jié)尾。） 可選值"<none|es5|all>"，默認(rèn)nonetrailingComma: 'all',// 在JSX中使用單引號而不是雙引號jsxSingleQuote: true,//  (x) => {} 箭頭函數(shù)參數(shù)只有一個時是否要有小括號。avoid：省略括號 ,always：不省略括號arrowParens: 'avoid',// 如果文件頂部已經(jīng)有一個 doclock，這個選項(xiàng)將新建一行注釋，并打上@format標(biāo)記。insertPragma: false,// 指定要使用的解析器，不需要寫文件開頭的 @prettierrequirePragma: false,// 默認(rèn)值。因?yàn)槭褂昧艘恍┱坌忻舾行偷匿秩酒?#xff08;如GitHub comment）而按照markdown文本樣式進(jìn)行折行proseWrap: 'preserve',// 在html中空格是否是敏感的 "css" - 遵守CSS顯示屬性的默認(rèn)值， "strict" - 空格被認(rèn)為是敏感的 ，"ignore" - 空格被認(rèn)為是不敏感的htmlWhitespaceSensitivity: 'css',// 換行符使用 lf 結(jié)尾是 可選值"<auto|lf|crlf|cr>"endOfLine: 'auto',// 這兩個選項(xiàng)可用于格式化以給定字符偏移量（分別包括和不包括）開始和結(jié)束的代碼rangeStart: 0,rangeEnd: Infinity,vueIndentScriptAndStyle: false, // Vue文件腳本和樣式標(biāo)簽縮進(jìn)
};

代碼規(guī)范工具（ESLint）

1、安裝

npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

2、安裝 Vscode 插件（ESLint）

3、配置.eslintrc.js

// @see: http://eslint.cnmodule.exports = {root: true,env: {browser: true,node: true,es6: true,},/* 指定如何解析語法 */parser: "vue-eslint-parser",/* 優(yōu)先級低于 parse 的語法解析配置 */parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: 2020,sourceType: "module",jsxPragma: "React",ecmaFeatures: {jsx: true,},},/* 繼承某些已有的規(guī)則 */extends: ["plugin:vue/vue3-recommended","plugin:@typescript-eslint/recommended","prettier","plugin:prettier/recommended",],/** "off" 或 0    ==>  關(guān)閉規(guī)則* "warn" 或 1   ==>  打開的規(guī)則作為警告（不影響代碼執(zhí)行）* "error" 或 2  ==>  規(guī)則作為一個錯誤（代碼不能執(zhí)行，界面報錯）*/rules: {// eslint (http://eslint.cn/docs/rules)"no-var": "error", // 要求使用 let 或 const 而不是 var"no-multiple-empty-lines": ["error", { max: 1 }], // 不允許多個空行"no-use-before-define": "off", // 禁止在 函數(shù)/類/變量 定義之前使用它們"prefer-const": "off", // 此規(guī)則旨在標(biāo)記使用 let 關(guān)鍵字聲明但在初始分配后從未重新分配的變量，要求使用 const"no-irregular-whitespace": "off", // 禁止不規(guī)則的空白// typeScript (https://typescript-eslint.io/rules)"@typescript-eslint/no-unused-vars": "error", // 禁止定義未使用的變量"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore"@typescript-eslint/no-inferrable-types": "off", // 可以輕松推斷的顯式類型可能會增加不必要的冗長"@typescript-eslint/no-namespace": "off", // 禁止使用自定義 TypeScript 模塊和命名空間。"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 類型"@typescript-eslint/ban-types": "off", // 禁止使用特定類型"@typescript-eslint/explicit-function-return-type": "off", // 不允許對初始化為數(shù)字、字符串或布爾值的變量或參數(shù)進(jìn)行顯式類型聲明"@typescript-eslint/no-var-requires": "off", // 不允許在 import 語句中使用 require 語句"@typescript-eslint/no-empty-function": "off", // 禁止空函數(shù)"@typescript-eslint/no-use-before-define": "off", // 禁止在變量定義之前使用它們"@typescript-eslint/ban-ts-comment": "off", // 禁止 @ts-<directive> 使用注釋或要求在指令后進(jìn)行描述"@typescript-eslint/no-non-null-assertion": "off", // 不允許使用后綴運(yùn)算符的非空斷言(!)"@typescript-eslint/explicit-module-boundary-types": "off", // 要求導(dǎo)出函數(shù)和類的公共類方法的顯式返回和參數(shù)類型// vue (https://eslint.vuejs.org/rules)"vue/no-v-html": "off", // 禁止使用 v-html"vue/script-setup-uses-vars": "error", // 防止<script setup>使用的變量<template>被標(biāo)記為未使用，此規(guī)則僅在啟用該no-unused-vars規(guī)則時有效。"vue/v-slot-style": "error", // 強(qiáng)制執(zhí)行 v-slot 指令樣式"vue/no-mutating-props": "off", // 不允許組件 prop的改變"vue/custom-event-name-casing": "off", // 為自定義事件名稱強(qiáng)制使用特定大小寫"vue/attributes-order": "off", // vue api使用順序，強(qiáng)制執(zhí)行屬性順序"vue/one-component-per-file": "off", // 強(qiáng)制每個組件都應(yīng)該在自己的文件中"vue/html-closing-bracket-newline": "off", // 在標(biāo)簽的右括號之前要求或禁止換行"vue/max-attributes-per-line": "off", // 強(qiáng)制每行的最大屬性數(shù)"vue/multiline-html-element-content-newline": "off", // 在多行元素的內(nèi)容之前和之后需要換行符"vue/singleline-html-element-content-newline": "off", // 在單行元素的內(nèi)容之前和之后需要換行符"vue/attribute-hyphenation": "off", // 對模板中的自定義組件強(qiáng)制執(zhí)行屬性命名樣式"vue/require-default-prop": "off", // 此規(guī)則要求為每個 prop 為必填時，必須提供默認(rèn)值"vue/multi-word-component-names": "off", // 要求組件名稱始終為 “-” 鏈接的單詞},
};