WU7 Vue3 Extension Pack (Dev)

Vue3 完整开发扩展包，一键安装所有核心工具（包含 Tailwind CSS 支持）

📦 包含的扩展 (8个)

🎨 Vue 核心工具 (4个)

1. Volar (vue.volar)

Vue3 官方推荐的语言支持插件
提供完整的 TypeScript 类型检查
智能代码补全和模板类型推断
组件跳转和引用查找

2. Vite (antfu.vite)

Vite 开发服务器集成
极速冷启动和热模块替换 (HMR)
开发服务器状态显示

3. Vue Peek (dariofuzinato.vue-peek)

快速查看和跳转到 Vue 组件定义
Peek 预览功能（Alt+F12）
组件引用查找

4. Vue Snippets (hollowtree.vue-snippets)

Vue 代码片段集合
快速生成常用的 Vue 代码结构
提高开发��率

🎨 CSS 工具 (2个)

5. Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss)

Tailwind CSS 官方智能提示插件
类名自动补全和颜色预览
CSS 属性提示和冲突检测

6. Headwind (heybourn.headwind)

Tailwind CSS 类名排序工具
保存时自动排序类名
统一类名顺序，提高可读性

✨ 代码质量工具 (2个)

7. ESLint (dbaeumer.vscode-eslint)

JavaScript/TypeScript 代码检查工具
实时代码检查和自动修复
统一代码风格

8. Prettier ESLint (rvest.vs-code-prettier-eslint)

结合 Prettier 和 ESLint 的格式化工具
保存时自动格式化
统一代码风格

🚀 安装方式

方式 1: VSCode Marketplace 安装

打开 VSCode
按 Ctrl+Shift+X 打开扩展面板
搜索 "WU7 Vue3 Extension Pack"
点击安装

方式 2: 命令行安装

code --install-extension wu7.wu7-vue3-pack

方式 3: 本地安装 .vsix 文件

code --install-extension wu7-vue3-pack-1.0.0.vsix

⚙️ 推荐配置

安装完成后，建议在 settings.json 中添加以下配置:

{
  // 编辑器配置
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2,

  // Volar 配置
  "volar.takeOverMode.enabled": true,

  // ESLint 配置
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],

  // 文件关联
  "files.associations": {
    "*.vue": "vue"
  }
}

📝 项目配置文件

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2021
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off'
  }
}

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  }
})

🎯 快速开始

创建新的 Vue3 项目

# 使用 Vite 创建项目
npm create vite@latest my-vue-app -- --template vue-ts

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

# 安装依赖
npm install

# 安装 ESLint 和 Prettier
npm install -D eslint prettier eslint-plugin-vue @vue/eslint-config-typescript

# 启动开发服务器
npm run dev

💡 使用技巧

1. 使用 Volar 的类型检查

<script setup lang="ts">
import { ref, computed } from 'vue'

// Volar 会自动推断类型
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

2. 使用 Vue Snippets 快速生成代码

输入 "vbase" + Tab → 生成基础 Vue 组件结构
输入 "vfor" + Tab → 生成 v-for 循环
输入 "vif" + Tab → 生成 v-if 条件

3. 使用 ESLint 自动修复

保存时自动修复: 已在推荐配置中启用
手动修复: Ctrl+Shift+P → "ESLint: Fix all auto-fixable Problems"

🔧 常见问题

Q: Volar 和 Vetur 冲突怎么办？

A: Vue3 项目应该使用 Volar，请禁用或卸载 Vetur:

code --uninstall-extension octref.vetur

Q: TypeScript 类型检查不工作？

A: 确保启用了 Volar 的 Take Over Mode:

{
  "volar.takeOverMode.enabled": true
}

Q: ESLint 和 Prettier 冲突？

A: 使用 rvest.vs-code-prettier-eslint 插件可以完美解决冲突，它会先用 Prettier 格式化，再用 ESLint 修复。

📚 相关资源

📄 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

作者: wu7 版本: 1.0.0 最后更新: 2026-02-03