Vue3 开发规范配置参考01

本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。

发布时间 2025-07-25 14:22:07

最后更新 2025-09-12 11:01:17

阅读量加载中...

工程化配置实战

实战项目代码参考

环境介绍

🍍 版本要求

Node.js: v18+ (推荐 v20+)
pnpm: v8+

1. 创建 Vue 项目

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

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

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

# 安装依赖
pnpm install

2. 安装 Prettier

1. 安装 Prettier

bash

pnpm add -D prettier

2. 在项目根目录下创建 Prettier 配置文件

.prettierrc.cjs

     js
    
  
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",
};

3. 在项目根目录下创建 Prettier 忽略文件

.prettierignore

     txt
    
  
/dist/
/node_modules/
*.min.js

3. 安装 ESLint

1. 安装 ESLint 及相关插件

bash

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

2. 在项目根目录下创建 ESLint 配置文件

eslint.config.js

     js
    
  
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,
];

4. 安装 Stylelint

1. 安装 Stylelint 及相关插件

bash

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

2. 在项目根目录下创建 Stylelint 配置文件

.stylelintrc.cjs

     js
    
  
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"],
};

5. 配置 Git Hooks

1. 安装 Husky lint-staged

     bash
    
  
pnpm add -D husky lint-staged

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

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

2. 修改 pre-commit 钩子

修改 .husky/pre-commit:

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

npx lint-staged

6. VSCode 工作区配置

创建 .vscode/settings.json:

请确保已安装 Prettier、ESLint、Stylelint 插件。

     json
    
  
{
  // ==================== 编辑器核心配置 ====================
  "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
}

7. 更新项目脚本

修改 package.json 中的 scripts 部分：

     json
    
  
{
  "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"]
  }
}

8. 提交规范 (Commitlint)

1. 安装 Commitlint

bash

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

2. 配置文件

创建 commitlint.config.cjs:

     js
    
  
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],
  },
};

3. 添加 commit-msg 钩子

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

配置结束，现在当我们填写 commit 信息的时候，前面就需要带着下面的 subject

ℹ️ 信息

feat: 新特性、新功能
fix: 修改 bug
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改
refactor: 代码重构
perf: 优化相关，比如提升性能、体验
test: 测试用例修改
chore: 其他修改, 比如改变构建流程、或者增加依赖库、工具等
revert: 回滚到上一个版本
build: 编译相关的修改，例如发布版本、对项目构建或者依赖的改动

9. 强制使用 pnpm

1. 创建 preinstall 脚本

创建 scripts/preinstall.js:

     js
    
  
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);
}

2. 更新 package.json

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

10. 测试配置

1. 创建测试组件

创建 src/components/TestComponent.vue:

     vue
    
  
<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>

2. 运行格式化命令

     bash
    
  
pnpm format
pnpm lint
pnpm stylelint

3. 测试 Git Hooks

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

#Vue3 #Typescript #开发规范 #Vite