The latest version of Eslint V9.0.0 used in the article How to use Eslint V9.0.0 in Vue3+ TypeScript has a version compatibility issue with typescript-eslint V7.6.0.
- Solution 1: Run npm i --force, skip version compatibility, and force the packet to be pulled
- Solution (2): Change typescript-eslint to v7.7.0 as follows:
typescript-eslint开源社团也在积极的升级拥抱Eslint v9,更新的很快:
husky v9
function
husky is a Git hook tool that automatically detects the files that were modified when the code was committed and then executes the corresponding inspection commands.
The core content is to configure Husky's pre-commit and commit-msg hooks:
- pre-commit:Husky + Lint-staged 整合实现 Git 提交前代码规范检测/格式化 (前提:ESlint + Prettier + Stylelint 代码统一规范。
- commit-msg: Husky + Commitlint + Commitizen + cz-git 整合实现生成规范化且高度自定义的 Git commit message。
Installation
Our Husky v9 version, it is not the same as v8 installation process, everyone should pay attention!husky v9 and v8 difference
pnpm install husky -D
npx husky init This command does four things:
- Install Husky to the development dependency
- Create a .husky directory at the root of your project
- Create a pre-commit hook in the .husky directory and initialize the pre-commit command as npm test
- 修改 package.json 的 scripts，增加 "prepare": "husky"
arrangement
We will configure it when we install lint-staged
lint-staged
function
lint-staged is also a Git hook tool, and when we run the linters (ESLint/Prettier/StyleLint) tool on the file that git adds to the staging area, we avoid the entire project execution when git commit it.
Installation
pnpm install -D lint-staged arrangement
- Add to the package.json configuration:
"lint-staged": {
"*.{js,ts}": [
"eslint --fix",
"prettier --write"
],
"*.{cjs,json}": [
"prettier --write"
],
"*.{vue,html}": [
"eslint --fix",
"prettier --write",
"stylelint --fix"
],
"*.{scss,css}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
} - 在scripts添加lint-staged命令:"ribbon:lint-staged": "ribbon-staged"
- Modify the hook command before husky commit: change npm test in the pre-commit file in the root .husky directory to npm run lint:lint-staged
use
Git commit code detection
git add .
git commit -m "测试" Commitlint
function
commitlint is a git commit validation constraint tool that checks if your commit message conforms to the Conventional commit format
Installation
pnpm install @commitlint/config-conventional @commitlint/cli --save-dev
pnpm install -D commitizen arrangement
- Create a commitlint.config.cjs configuration file at the root directory, example configuration:
// commitlint.config.cjs
module.exports = {
// 继承的规则
extends: ['@commitlint/config-conventional'],
// 自定义规则
rules: {
// @see https://commitlint.js.org/#/reference-rules
// 提交类型枚举，git提交type必须是以下类型
'type-enum': [
2,
'always',
[
'feat', // 新增功能
'fix', // 修复缺陷
'docs', // 文档变更
'style', // 代码格式（不影响功能，例如空格、分号等格式修正）
'refactor', // 代码重构（不包括 bug 修复、功能新增）
'perf', // 性能优化
'test', // 添加疏漏测试或已有测试改动
'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
'ci', // 修改 CI 配置、脚本
'revert', // 回滚 commit
'chore', // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
],
],
'subject-case': [0], // subject大小写不做校验
},
prompt: {
messages: {
type: '选择你要提交的类型 :',
scope: '选择一个提交范围（可选）:',
customScope: '请输入自定义的提交范围 :',
subject: '填写简短精炼的变更描述 :\n',
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
footerPrefixesSelect: '选择关联issue前缀（可选）:',
customFooterPrefix: '输入自定义issue前缀 :',
footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
generatingByAI: '正在通过 AI 生成你的提交简短描述...',
generatedSelectByAI: '选择一个 AI 生成的简短描述:',
confirmCommit: '是否提交或修改commit ?',
},
// prettier-ignore
types: [
{ value: "feat", name: "特性: ✨ 新增功能", emoji: ":sparkles:" },
{ value: "fix", name: "修复: 修复缺陷", emoji: ":bug:" },
{ value: "docs", name: "文档: 文档变更", emoji: ":memo:" },
{ value: "style", name: "格式: 代码格式（不影响功能，例如空格、分号等格式修正）", emoji: ":lipstick:" },
{ value: "refactor", name: "重构: 代码重构（不包括 bug 修复、功能新增）", emoji: ":recycle:" },
{ value: "perf", name: "性能: 性能优化", emoji: ":zap:" },
{ value: "test", name: "测试: 添加疏漏测试或已有测试改动", emoji: ":white_check_mark:" },
{ value: "build", name: "构建: ️ 构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）", emoji: ":package:" },
{ value: "ci", name: "集成: ⚙️ 修改 CI 配置、脚本", emoji: ":ferris_wheel:" },
{ value: "revert", name: "回退: ↩️ 回滚 commit", emoji: ":rewind:" },
{ value: "chore", name: "其他: ️ 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: ":hammer:" },
],
useEmoji: true,
emojiAlign: 'center',
useAI: false,
aiNumber: 1,
themeColorCode: '',
scopes: [],
allowCustomScopes: true,
allowEmptyScopes: true,
customScopesAlign: 'bottom',
customScopesAlias: 'custom',
emptyScopesAlias: 'empty',
upperCaseSubject: false,
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,
maxHeaderLength: Infinity,
maxSubjectLength: Infinity,
minSubjectLength: 0,
scopeOverrides: undefined,
defaultBody: '',
defaultIssues: '',
defaultScope: '',
defaultSubject: '',
},
} - Run the following command to generate a commint-msg hook for git commit verification
echo "npx --no -- commitlint --edit $1" > .husky/commit-msg
cz-git
function
Used in conjunction with Commitizen, it is a more engineered, lightweight, highly customizable, standard-output format Commitizen adapter.
Installation
pnpm install -D cz-git arrangement
- Add to the package.json configuration:
"config": {
"commitizen": {
"path": "node_modules/cz-git"
}
}, - Add a commit command to the script
"commit": "git pull && git add -A && git-cz && git push" use
pnpm commit Presentation of results
Code repositories
hatps://github.com/lahamb521/screen-template