希曼日记

前端工程化

本页目录 4
  1. 代码格式化
  2. Git提交规范化
  3. 自动 lint 您的提交消息 、 代码 ,并在提交或推送时运行测试
  4. 自动记录修改

标准化

按照以下工作流程开始

  1. 完成代码更改(git add <file>)
  2. 提交这些更改(git commit -m ""/git cz/cz),此时会调用测试和Lint
  3. 拉取所有标签
  4. 运行 npm version [patch|minor|major] 命令更新项目版本和自动记录更改
  5. 推送到远程仓库(git push)

准备工作

代码格式化

pnpm add -D @biomejs/biome

biome.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 您的提交消息 、 代码 ,并在提交或推送时运行测试

husky

pnpm add --save-dev husky

pnpm exec husky init

echo > .husky/pre-commit <<EOF
pnpm check
pnpm test
EOF

对暂存的 git 文件运行格式化程序和 linter 等任务

lint-staged

pnpm install -D lint-staged

Git提交规范化

cz-git

npm install -g commitizen
pnpm 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: '',
    },
})

自动记录修改

conventional-changelog

pnpm add conventional-changelog
pnpm 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]