前端工程化
标准化
按照以下工作流程开始
- 完成代码更改(
git add <file>) - 提交这些更改(
git commit -m ""/git cz/cz),此时会调用测试和Lint - 拉取所有标签
- 运行
npm version [patch|minor|major]命令更新项目版本和自动记录更改 - 推送到远程仓库(git push)
准备工作
代码格式化
pnpm add -D @biomejs/biomebiome.json:
{ "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json", "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false }, "files": { "ignoreUnknown": false, "includes": [ "**/src/**/*", "**/.vscode/**/*", "**/index.html", "**/vite.config.js", "!**/src/routeTree.gen.ts", "!**/src/gen" ] }, "formatter": { "enabled": true, "indentStyle": "tab" }, "assist": { "actions": { "source": { "organizeImports": "on" } } }, "linter": { "enabled": true, "rules": { "recommended": true } }, "javascript": { "parser": { "unsafeParameterDecoratorsEnabled": true }, "formatter": { "quoteStyle": "single", "jsxQuoteStyle": "single", "trailingCommas": "all", "quoteProperties": "asNeeded", "semicolons": "asNeeded", "arrowParentheses": "always", "enabled": true, "indentStyle": "tab", "indentWidth": 2, "lineEnding": "lf", "lineWidth": 80, "bracketSameLine": false, "attributePosition": "multiline", "expand": "auto" } }}Git提交规范化
自动 lint 您的提交消息 、 代码 ,并在提交或推送时运行测试
pnpm add --save-dev husky
pnpm exec husky init
echo > .husky/pre-commit <<EOFpnpm checkpnpm testEOF对暂存的 git 文件运行格式化程序和 linter 等任务
pnpm install -D lint-stagedGit提交规范化
npm install -g commitizenpnpm install -D cz-git修改 package.json 添加 config 指定使用的适配器
{ "scripts": {
}, "config": { "commitizen": { "path": "node_modules/cz-git" } } }.commitlintrc.cjs:
const { defineConfig } = require('cz-git')
module.exports = defineConfig({ rules: { // @see: https://commitlint.js.org/#/reference-rules }, prompt: { alias: { fd: 'docs: fix typos' }, messages: { type: 'Select the type of change that you\'re committing:', scope: 'Denote the SCOPE of this change (optional):', customScope: 'Denote the SCOPE of this change:', subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n', body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n', breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n', footerPrefixesSelect: 'Select the ISSUES type of changeList by this change (optional):', customFooterPrefix: 'Input ISSUES prefix:', footer: 'List any ISSUES by this change. E.g.: #31, #34:\n', generatingByAI: 'Generating your AI commit subject...', generatedSelectByAI: 'Select suitable subject by AI generated:', confirmCommit: 'Are you sure you want to proceed with the commit above?', }, types: [ { value: 'feat', name: 'feat: ✨ A new feature', emoji: ':sparkles:' }, { value: 'fix', name: 'fix: 🐛 A bug fix', emoji: ':bug:' }, { value: 'docs', name: 'docs: 📝 Documentation only changes', emoji: ':memo:' }, { value: 'style', name: 'style: 💄 Changes that do not affect the meaning of the code', emoji: ':lipstick:' }, { value: 'refactor', name: 'refactor: ♻️ A code change that neither fixes a bug nor adds a feature', emoji: ':recycle:' }, { value: 'perf', name: 'perf: ⚡️ A code change that improves performance', emoji: ':zap:' }, { value: 'test', name: 'test: ✅ Adding missing tests or correcting existing tests', emoji: ':white_check_mark:' }, { value: 'build', name: 'build: 📦️ Changes that affect the build system or external dependencies', emoji: ':package:' }, { value: 'ci', name: 'ci: 🎡 Changes to our CI configuration files and scripts', emoji: ':ferris_wheel:' }, { value: 'chore', name: 'chore: 🔨 Other changes that don\'t modify src or test files', emoji: ':hammer:' }, { value: 'revert', name: 'revert: ⏪️ Reverts a previous commit', emoji: ':rewind:' }, ], useEmoji: true, emojiAlign: 'center', useAI: false, aiNumber: 1, themeColorCode: '', scopes: [], allowCustomScopes: true, allowEmptyScopes: true, customScopesAlign: 'bottom', customScopesAlias: 'custom', emptyScopesAlias: 'empty', upperCaseSubject: null, markBreakingChangeMode: false, allowBreakingChanges: ['feat', 'fix'], breaklineNumber: 100, breaklineChar: '|', skipQuestions: [], issuePrefixes: [{ value: 'closed', name: 'closed: ISSUES has been processed' }], customIssuePrefixAlign: 'top', emptyIssuePrefixAlias: 'skip', customIssuePrefixAlias: 'custom', allowCustomIssuePrefix: true, allowEmptyIssuePrefix: true, confirmColorize: true, scopeOverrides: undefined, defaultBody: '', defaultIssues: '', defaultScope: '', defaultSubject: '', },})自动记录修改
pnpm add conventional-changelogpnpm add -D conventional-changelog-ember添加到package json文件中:
{ "scripts": { "version": "conventional-changelog -p ember && git add CHANGELOG.md && git add package.json", "version:first": "conventional-changelog -p ember -r 0" }}然后就可以:
- patch: 小版本, 修改X.Y.Z的Z,例如0.0.1 -> 0.0.2
- minor:中版本, 修改X.Y.Z的Z,例如0.0.1 -> 0.1.0
- major:大版本,破坏性更改. , 修改X.Y.Z的X,例如0.0.1 -> 1.0.0
pnpm version [patch|minor|major]