node版本：20.13.1 npm: 10.5.2
1.使用create-vue创建vue项目
create-vue网址： github.com/vuejs/creat…
npm create vue@latest
通过上图我们可以看出jsx支持，pinia状态管理，路由，代码格式检验都已经引入。
2.安装stylelint
stylelint是一个用于检测CSS代码风格的工具。它可以帮助开发人员保持一致的代码风格，并捕获常见的错误和潜在的问题。stylelint支持自定义规则和插件，可以根据团队的需求进行配置。它可以与各种构建工具和编辑器集成，提供实时的代码检查和自动修复功能
1. 安装stylelint相关的插件
yarn add -D postcss postcss-html postcss-import postcss-scss stylelint stylelint-config-html stylelint-config-property-sort-order-smacss stylelint-config-rational-order stylelint-config-recommended stylelint-config-standard stylelint-order stylelint-prettier
2. 配置stylelint
在项目根目录下创建.stylelintrc.json文件,并添加以下内容
{
"extends": [
"stylelint-config-standard",
"stylelint-config-property-sort-order-smacss"
],
"plugins": ["stylelint-order", "stylelint-prettier"],
"overrides": [
{
"files": ["**/*.(css|html|vue)"],
"customSyntax": "postcss-html"
},
{
"files": ["*.less", "**/*.less"],
"customSyntax": "postcss-less",
"extends": [
"stylelint-config-standard",
"stylelint-config-recommended-vue"
]
},
{
"files": ["*.scss", "**/*.scss"],
"customSyntax": "postcss-scss",
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-recommended-vue/scss"
],
"rule": {
"scss/percent-placeholder-pattern": null
}
}
],
"rules": {
"selector-not-notation": null,
"import-notation": null,
"function-no-unknown": null,
"selector-class-pattern": null,
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["global", "deep"]
}
],
"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",
"extend"
]
}
],
"no-empty-source": null,
"named-grid-areas-no-invalid": null,
"no-descending-specificity": null,
"font-family-no-missing-generic-family-keyword": null,
"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": "error" }
]
},
"ignoreFiles": ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"]
}
3. 添加.stylelintignore文件，并加入以下内容
dist
public
node_modules
4. 配置自动格式化
在.vscode/settings.json中加入如下配置:
{
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.stylelint": "explicit"
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"typescript.tsdk": "node_modules\\typescript\\lib",
"stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
}
5. 在 package.json 中添加 Stylelint 脚本
{
"scripts": {
"lint:css": "stylelint '**/*.{css,scss,vue}' --fix"
}
}
3.安装git hooks
1. 安装husky
Husky是一个流行的Git钩子工具，用于在不同的 Git 操作（如提交和推送）前自动运行脚本。比如代码格式化、静态检查等。这有助于保持代码库的质量和一致性。
// 安装husky：
yarn add husky --dev
初始化husky
npx husky init
执行完之后会在本地生成husky文件夹,并在package.json中创建prepare: husky
2. 安装lint-staged
lint-staged 是一个在 git add 到暂存区的文件运行 linters (ESLint/Prettier/StyleLint) 的工具，避免在 git commit 提交时在整个项目执行。lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送
yarn add lint-staged --dev
lint-staged配置 在package.json中添加lint-staged对象
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix",
"prettier --write"
],
"*.{cjs,json}": [
"prettier --write"
],
"*.{vue,html}": [
"eslint --fix",
"prettier --write",
"stylelint --fix"
],
"*.{scss,css}": [
"stylelint --fix --allow-empty-input",
"prettier --write"
],
"*.md": [
"prettier --write"
]
}
在package.json 的 scripts 添加 lint-staged 指令:
"scripts": {
"lint:lint-staged": "lint-staged"
}
修改提交前钩子的命令 在.husky目录下的pre-commit文件中将npm 修改为 npm run lint:lint-staged
此时提交代码运行git commit的时候就会格式化并验证提交的代码是否符合要求
4. 安装Commitlint
Commitlint 检查您的提交消息是否符合 Conventional commit format。
1. 安装
yarn add @commitlint/config-conventional @commitlint/cli -D
2. 配置
在根目录创建commitlint.config.cjs,并加入如下内容
module.exports = {
// 继承的规则
extends: ["@commitlint/config-conventional"],
// @see: https://commitlint.js.org/#/reference-rules
rules: {
"subject-case": [0], // subject大小写不做校验
// 类型枚举，git提交type必须是以下类型
"type-enum": [
2,
"always",
[
"feat", // 新增功能
"fix", // 修复缺陷
"docs", // 文档变更
"style", // 代码格式（不影响功能，例如空格、分号等格式修正）
"refactor", // 代码重构（不包括 bug 修复、功能新增）
"perf", // 性能优化
"test", // 添加疏漏测试或已有测试改动
"build", // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
"ci", // 修改 CI 配置、脚本
"revert", // 回滚 commit
"chore" // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
]
]
}
};
3. 添加提交信息的校验钩子
在.husky目录下新增commit-msg并加入如下内容：
npx --no -- commitlint --edit $1
此时再次提交内容，执行git commit时， 如果描述的内容不符合规范将提交失败
