如何使用Vite4+Vue3+TypeScript+Pinia+ESLint+StyleLint 记录项目配置过程和代码

以下是一个简化的示例，展示如何配置Vite 4、Vue 3、TypeScript、Pinia、ESLint和StyleLint。

1. 初始化项目：

npm create vite@latest my-vue3-app --template vue-ts

2. 安装Pinia：

cd my-vue3-app
npm install pinia

3. 配置Vue项目使用Pinia：

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(createPinia())
 
app.mount('#app')

4. 配置ESLint：

npm install eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

创建.eslintrc.js：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    // 自定义规则
  }
}

5. 配置StyleLint：

npm install stylelint stylelint-config-standard --save-dev

创建.stylelintrc.json：

{
  "extends": "stylelint-config-standard",
  "rules": {
    // 自定义规则
  }
}

6. 配置Vite：

更新vite.config.ts以包含对TypeScript和JSX的支持：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: `import Vue from 'vue'`
  }
})

7. 配置Prettier：

创建.prettierrc：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

8. 配置Git Hooks：

安装husky和lint-staged：

npm install husky lint-staged --save-dev

创建.husky/pre-commit：

#!/bin/sh
. "$(dirname -- "$0")/_/npx/node/bin/node" "$(dirname -- "$0")/_/npx/node_modules/lint-staged/bin/lint-staged.js"
exit $?

创建lint-staged.config.js：

module.exports = {
  '*.{js,ts,jsx,tsx,vue}': [
    'eslint --fix',
    'git add'
  ],
  '*.{css,scss,sass}': [