• 创建husky规范前端项目


    创建husky规范前端项目

    .husky文件是一个配置文件,用于配置Git钩子。Git钩子是在Git操作时触发的脚本,可以用于自动化一些任务,比如代码格式化、代码检查、测试等。.husky文件可以指定在Git的不同操作(如commit、push等)时,应该运行哪些脚本。这样,每次进行Git操作时,就会自动运行指定的脚本,从而保证代码质量和开发效率。

    Husky使用

    所有命令

    npm install husky -D
    npm run prepare "husky install"
    npm run prepare 
    npm install lint-staged -D
    npx husky add .husky/pre-commit "npm run lint:lint-staged"
    npm i @commitlint/cli @commitlint/config-conventional -D
    npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
    npm install commitizen -D
    npm install cz-git -D
    npm run commit 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    1、安装

    npm install husky -D
    
    • 1

    2、添加husky文件

    • package.json中添加如下命令;scripts中添加
     "prepare": "husky install"
    
    • 1
    • 执行以下命令
    npm run prepare "husky install"
    npm run prepare # 在这之后会生成一个husky文件夹
    
    • 1
    • 2

    3、lint-staged(本地暂存代码检查工具

    npm install lint-staged -D
    
    • 1
    • 判断提交的代码是否符合规范,并使用 prettier 格式化代码
    npx husky add .husky/pre-commit "npm run lint:lint-staged"
    
    • 1

    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"]
    };
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    5、commit 校验工具,不符合则报错

    npm i @commitlint/cli @commitlint/config-conventional -D
    
    • 1
    • 在husky文件夹下自动生成 commit-msg文件
    npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
    
    • 1

    6、commitizen(基于 Node.js 的 git commit 命令行工具,生成标准化的 message)

    # 安装 commitizen,可以快速使用 cz 或 git cz 命令进行启动。
    npm install commitizen -D
    
    • 1
    • 2

    7、cz-git

    npm install cz-git -D
    
    • 1
    • 配置 package.json
    "config": {
      "commitizen": {
        "path": "node_modules/cz-git"
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    8、新建commitlint.config.js文件:(对提交信息做格式检验的

    // @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: '填写更加详细的变更描述(可选)。使用 "|" 换行 :\n',
    			breaking: '列举非兼容性重大的变更(可选)。使用 "|" 换行 :\n',
    			footerPrefixsSelect: '选择关联issue前缀(可选):',
    			customFooterPrefixs: '输入自定义issue前缀 :',
    			footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
    			confirmCommit: '是否提交或修改commit ?',
    		},
    		types: [
    			{ value: 'init: 初始化', name: '初始化:   ⏳  初始化项目', emoji: '⏳' },
    			{ value: 'feat: 新增功能', name: '新增:   🚀  新增功能', emoji: '🚀' },
    			{ value: 'page: 新增页面', name: '页面:   📄  新增页面', emoji: '📄' },
    			{ value: 'completepage: 完成页面', name: '完成页面:   🍻  完成页面', emoji: '🍻' },
    			{ value: 'fixbug: 修改bug', name: 'bug:   🐛  修改bug', emoji: '🐛' },
    			{ value: 'fix: 修复', name: '修复:   🧩  修复缺陷', emoji: '🧩' },
    			{ value: 'docs: 文档', name: '文档:   📚  文档变更', emoji: '📚' },
    			{ value: 'style: 格式', name: '格式:   🎨  代码格式(不影响功能,例如空格、分号等格式修正)', emoji: '🎨' },
    			{ value: 'refactor: 重构', name: '重构:   ♻️  代码重构(不包括 bug 修复、功能新增)', emoji: '♻️' },
    			{ value: 'perf: 性能', name: '性能:   ⚡️  性能优化', emoji: '⚡️' },
    			{ value: 'test: 测试', name: '测试:   ✅  添加疏漏测试或已有测试改动', emoji: '✅' },
    			{
    				value: 'chore: 构建',
    				name: '构建:   📦️  构建流程、外部依赖变更(如升级 npm 包、修改 webpack 配置等)',
    				emoji: '📦️',
    			},
    			{ value: 'ci: 集成', name: '集成:   🎡  修改 CI 配置、脚本', emoji: '🎡' },
    			{ value: 'revert: 回退', name: '回退:   ⏪️  回滚 commit', emoji: '⏪️' },
    			{ value: 'build: 打包', name: '打包:   🔨  项目打包发布', 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: '',
    	},
    };
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104

    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"
    	}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    10、配置完成,提交代码

    相当于将代码放到暂存区,最后需要git push才能上传

    npm run commit 
    # 如果使用yarn
    yarn commit
    
    • 1
    • 2
    • 3

    EditorConfig 配置

    需要安装插件EditorConfig

    根目录下创建.editorconfig

    配置 EditorConfig

    # http://editorconfig.org
    root = true
    
    [*] # 表示所有文件适用
    charset = utf-8 # 设置文件字符集为 utf-8
    end_of_line = lf # 控制换行类型(lf | cr | crlf)
    insert_final_newline = true # 始终在文件末尾插入一个新行
    indent_style = tab # 缩进风格(tab | space)
    indent_size = 2 # 缩进大小
    max_line_length = 130 # 最大行长度
    
    [*.md] # 表示仅 md 文件适用以下规则
    max_line_length = off # 关闭最大行长度限制
    trim_trailing_whitespace = false # 关闭末尾空格修剪
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    配置 StyleLint

    根据需求下载安装

    1、下载 StyleLint 相关依赖

    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
    
    • 1

    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"
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    4、配置.stylelintrc.js

    // @see: https://stylelint.io
    
    module.exports = {
    	/* 继承某些已有的规则 */
    	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 文件中的