现代前端工程化实战：Vite+Vue3 规范配置手册（含完整配置文件）

# 安装 pnpm（如果尚未安装）
npm install -g pnpm

# 创建 Vite + Vue + TypeScript 项目
pnpm create vite my-vue-app --template vue-ts

# 进入项目目录
cd my-vue-app

# 安装依赖
pnpm install

pnpm add -D prettier

module.exports = {
  // 使用单引号而不是双引号
  singleQuote: true,

  // 不在语句末尾添加分号
  semi: false,

  // 在对象字面量的括号之间添加空格（例如：{ foo: bar }）
  bracketSpacing: true,

  // HTML文件的空格处理方式为"ignore"，不敏感处理空格
  htmlWhitespaceSensitivity: 'ignore',

  // 自动检测并保持文件原有的换行符风格（LF/CRLF）
  endOfLine: 'auto',

  // 尽可能在所有可能的地方添加尾随逗号（包括函数参数、数组和对象等）
  trailingComma: 'all',

  // 使用4个空格作为缩进
  tabWidth: 4,

  // 使用空格代替制表符
  useTabs: false,

  // 每行代码的最大宽度（超过会自动换行）
  printWidth: 100,

  // JSX中使用单引号而不是双引号
  jsxSingleQuote: true,

  // 在多行JSX元素中，将>放在最后一行的末尾而不是新起一行
  jsxBracketSameLine: false,

  // 在对象字面量中，只有当括号内有换行时才添加括号
  arrowParens: 'avoid',
}

/dist/
/node_modules/
*.min.js

pnpm add -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier @eslint/js vue-eslint-parser globals

import js from '@eslint/js'
import vueParser from 'vue-eslint-parser'
import globals from 'globals'
import prettier from 'eslint-config-prettier'
import tsParser from '@typescript-eslint/parser'
import tsPlugin from '@typescript-eslint/eslint-plugin'

export default [
    js.configs.recommended,
    {
        // TypeScript 支持
        files: ['**/*.ts'],
        languageOptions: {
            parser: tsParser,
            parserOptions: {
                ecmaVersion: 'latest',
                sourceType: 'module',
            },
            globals: {
                ...globals.browser,
            },
        },
        plugins: {
            '@typescript-eslint': tsPlugin,
        },
        rules: {
            '@typescript-eslint/no-unused-vars': [
                'warn',
                {
                    argsIgnorePattern: '^_', // 忽略以 _ 开头的参数
                    varsIgnorePattern: '^_', // 可选：忽略以 _ 开头的变量
                },
            ],
            // '@typescript-eslint/no-explicit-any': 'warn',
        },
    },
    {
        // Vue 支持
        files: ['**/*.vue'],
        languageOptions: {
            parser: vueParser,
            parserOptions: {
                ecmaVersion: 'latest',
                sourceType: 'module',
                parser: tsParser, // 添加 TypeScript 解析器
            },
            globals: {
                ...globals.browser,
                ...globals.node,
            },
        },
        rules: {
            'vue/multi-word-component-names': 'off',
            'vue/html-self-closing': [
                'error',
                {
                    html: {
                        void: 'always',
                        normal: 'never',
                        component: 'always',
                    },
                },
            ],
        },
    },
    {
        // 通用规则
        rules: {
            'no-unused-vars': 'off', // 禁用基础规则，使用 @typescript-eslint 版本
            'no-console': 'warn',
            eqeqeq: 'error',
            semi: ['error', 'never'],
        },
    },
    {
        ignores: ['dist/**', 'node_modules/**', '**/*.min.js'],
    },
    prettier,
]

pnpm add -D stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-prettier postcss-html stylelint-config-standard-vue stylelint-config-recess-order

module.exports = {
    extends: [
        'stylelint-config-standard-scss',
        'stylelint-config-recommended-vue',
        'stylelint-config-recess-order',
    ],
    plugins: ['stylelint-scss'],
    rules: {
        'value-keyword-case': null,
        'no-descending-specificity': null,
        'function-url-quotes': 'always',
        'no-empty-source': null,
        'selector-class-pattern': null,
        'value-no-vendor-prefix': null,
        'property-no-vendor-prefix': null,
        'selector-pseudo-class-no-unknown': [
            true,
            { ignorePseudoClasses: ['global', 'deep', 'v-deep'] },
        ],
        'selector-pseudo-element-no-unknown': [
            true,
            { ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'] },
        ],
        'scss/at-rule-no-unknown': true,
        'scss/dollar-variable-no-missing-interpolation': true,
        'scss/operator-no-unspaced': true,
        'alpha-value-notation': 'number',
        'color-function-notation': 'modern',
        'hue-degree-notation': 'number',
    },
    ignoreFiles: ['**/node_modules/**', '**/dist/**', '**/*.js', '**/*.ts'],
}

pnpm add -D husky lint-staged

# 初始化 Git 仓库（如果尚未初始化）
git init

# 初始化 Husky
npx husky-init && pnpm install

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

{
    // ==================== 编辑器核心配置 ====================
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
    "editor.renderWhitespace": "selection",
    "editor.wordWrap": "on",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.fontLigatures": true,
    "editor.bracketPairColorization.enabled": true, // 括号配对彩色显示
    "editor.guides.bracketPairs": "active", // 显示活动括号的引导线
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit",
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "explicit"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.enable": true,
    "stylelint.enable": true,
    "prettier.enable": true,
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false
}

{
  "scripts": {
        "dev": "vite",
        "build:test": "vue-tsc && vite build --mode test",
        "build:pro": "vue-tsc && vite build --mode production",
        "build": "vue-tsc -b && vite build",
        "preview": "vite preview",
        "lint": "eslint src",
        "fix": "eslint src --fix",
        "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md,scss}\"",
        "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
        "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",
        "prepare": "husky install",
        "commitlint": "commitlint --config commitlint.config.cjs -e -V",
        "preinstall": "node ./scripts/preinstall.js"
    },
    "lint-staged": {
        "*.{js,ts,vue}": [
            "eslint --fix",
            "prettier --write"
        ],
        "*.{css,vue}": [
            "stylelint --fix --custom-syntax postcss-html",
            "prettier --write"
        ],
        "*.scss": [
            "stylelint --fix --custom-syntax postcss-scss",
            "prettier --write"
        ],
        "*.{html,json,md}": [
            "prettier --write"
        ]
    }
}

pnpm add -D @commitlint/config-conventional @commitlint/cli

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "feat",
        "fix",
        "docs",
        "style",
        "refactor",
        "perf",
        "test",
        "chore",
        "revert",
        "build",
      ],
    ],
    "type-case": [0],
    "type-empty": [0],
    "scope-empty": [0],
    "scope-case": [0],
    "subject-full-stop": [0, "never"],
    "subject-case": [0, "never"],
    "header-max-length": [0, "always", 72],
  },
};

npx husky add .husky/commit-msg "pnpm commitlint --edit $1"

if (!/pnpm/.test(process.env.npm_execpath || "")) {
  console.warn(
    `\u001b[33mThis repository requires using pnpm as the package manager ` +
      `for scripts to work properly.\u001b[39m\n`
  );
  process.exit(1);
}

{
  "scripts": {
    "preinstall": "node ./scripts/preinstall.js"
  }
}

<template>
  <div class="test-component">
    <h1>Test Component</h1>
  </div>
</template>

<script lang="ts">
export default {
  name: "TestComponent",
};
const a = 1;
const b = "hello world";
</script>

<style scoped>
.test-component {color: red;}
</style>

pnpm format
pnpm lint
pnpm stylelint

echo "console.log('test')" > test.js
git add test.js
git commit -m "test"  # 应该会自动修复代码格式