vite+vue3+ts项目搭建流程 (pnpm, eslint, prettier, stylint, husky,commitlint )

以下是使用pnpm, eslint, prettier, stylelint, husky, commitlint在Vite + Vue 3 + TypeScript项目中的基本步骤：

1. 初始化项目：

pnpm create vite

2. 选择Vue作为框架，并选择TypeScript：
3. 安装所需依赖：

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

4. 创建.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',
  },
};

5. 在项目根目录创建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'
  ]
};

6. 创建.commitlintrc.json用于定义commit message的规则：

{
  "types": [
    "feat",
    "fix",
    "docs",
    "style",
    "refactor",
    "perf",
    "test",
    "build",
    "ci",
    "chore",
    "revert"
  ]
}

7. 在package.json中添加scripts：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src && stylelint 'src/**/*.{vue,css}'",
    "format": "prettier --write src/**/*.{js,vue,ts}",
    "prepare": "husky install"
  }
}

8. 安装stylelint-config-standard插件：

pnpm add -D stylelint-config-standard

9. 运行pnpm prepare来初始化husky。
10. 现在可以使用pnpm run lint来运行lint检查，pnpm run format来格式化代码。

以上步骤提供了