【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）

以下是一个基于Vite、Vue 3、TypeScript、ESLint、Prettier和Stylelint的项目的核心配置文件示例：

vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 其他配置...
})

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

.eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 自定义规则...
  },
};

.stylelintrc.json:

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

.prettierrc.json:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "useTabs": false,
  "endOfLine": "auto"
}

package.json 的一部分，包含依赖和脚本:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint --ext .js,.vue src",
    "stylelint": "stylelint 'src/**/*.{vue,css}' --fix",
    "format": "prettier --write \"src/**/*.{js,vue,ts}\"",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0",
    // 其他依赖...
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.0.0",
    "@typescript-eslint/parser": "^4.0.0",
    "eslint": "^7.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.0.0",
    "stylelint": "^13.0.0",
    "stylelint-config-standard": "^20.0.0",
    "typescript": "^4.0.0",
    "vite": "^1.0.0"
  }
}

这个配置提供了一个基本框架，你可以根据自己的项目需求进行调整。例如，你可以添加更多的ESLint规则、TypeScript特定规则或者其他Linter配置。同时，你可以添加或修改vite.config.ts中的插件来满足项目的具体需求。