以下是使用pnpm, eslint, prettier, stylelint, husky, commitlint在Vite + Vue 3 + TypeScript项目中的基本步骤:
- 初始化项目:
pnpm create vite
- 选择Vue作为框架,并选择TypeScript:
- 安装所需依赖:
pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin stylelint husky @commitlint/config-conventional @commitlint/cli
- 创建
.eslintrc.js
,.prettierrc.js
,.stylelintrc.js
,和husky.config.js
配置文件。
.eslintrc.js
示例:
module.exports = {
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
// 自定义规则
},
};
.prettierrc.js
示例:
module.exports = {
semi: true,
singleQuote: true,
trailingComma: 'es5',
printWidth: 80,
tabWidth: 2,
useTabs: false,
};
.stylelintrc.js
示例:
module.exports = {
extends: 'stylelint-config-standard',
rules: {
// 自定义规则
},
};
husky.config.js
示例:
module.exports = {
hooks: {
'pre-commit': 'lint-staged',
},
};
- 在项目根目录创建
lint-staged.config.js
用于定义提交前要运行的linters:
module.exports = {
'*.{js,ts,jsx,tsx}': [
'eslint --cache --fix',
'git add'
],
'*.{vue,html,css,scss,sass}': [
'stylelint --fix',
'eslint --cache --fix',
'git add'
]
};
- 创建
.commitlintrc.json
用于定义commit message的规则:
{
"types": [
"feat",
"fix",
"docs",
"style",
"refactor",
"perf",
"test",
"build",
"ci",
"chore",
"revert"
]
}
- 在
package.json
中添加scripts:
{
"scripts": {
"lint": "eslint --ext .js,.vue src && stylelint 'src/**/*.{vue,css}'",
"format": "prettier --write src/**/*.{js,vue,ts}",
"prepare": "husky install"
}
}
- 安装stylelint-config-standard插件:
pnpm add -D stylelint-config-standard
- 运行
pnpm prepare
来初始化husky。 - 现在可以使用
pnpm run lint
来运行lint检查,pnpm run format
来格式化代码。
以上步骤提供了