WU7 Vue3 Extension Pack (Dev)

中文 | English

中文说明

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.takeOverMode.enabled": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "files.associations": {
    "*.vue": "vue"
  }
}

🎯 快速开始

创建新的 Vue3 项目

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm install -D eslint prettier eslint-plugin-vue @vue/eslint-config-typescript
npm run dev

🔧 常见问题

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

English

A complete Vue3 development extension pack with one-click installation of essential tools, including Tailwind CSS support.

📦 Included Extensions (8)

🎨 Vue Core Tools (4)

1. Volar (vue.volar)

Officially recommended language support for Vue3
Full TypeScript type checking
Smart completion and template inference
Component navigation and reference lookup

2. Vite (antfu.vite)

Vite development server integration
Fast startup and hot module replacement
Development server status support

3. Vue Peek (dariofuzinato.vue-peek)

Quickly peek and jump to Vue component definitions
Peek preview with Alt+F12
Find component references easily

4. Vue Snippets (hollowtree.vue-snippets)

Useful Vue code snippets
Generate common Vue structures quickly
Improves development efficiency

🎨 CSS Tools (2)

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

Official Tailwind CSS IntelliSense
Class completion and color previews
CSS property hints and conflict detection

6. Headwind (heybourn.headwind)

Tailwind CSS class sorting tool
Sorts class names on save
Keeps class order consistent and readable

✨ Code Quality Tools (2)

7. ESLint (dbaeumer.vscode-eslint)

JavaScript and TypeScript linting
Real-time diagnostics and auto fixes
Keeps code style consistent

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

Formatter combining Prettier and ESLint
Formats automatically on save
Helps maintain consistent code style

🚀 Installation

Method 1: VS Code Marketplace

Open VS Code
Press Ctrl+Shift+X to open Extensions
Search for "WU7 Vue3 Extension Pack"
Click Install

Method 2: Command Line

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

Method 3: Install Local VSIX

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

⚙️ Recommended Settings

Add the following to settings.json after installation:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2,
  "volar.takeOverMode.enabled": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "files.associations": {
    "*.vue": "vue"
  }
}

🎯 Quick Start

Create a new Vue3 project

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm install -D eslint prettier eslint-plugin-vue @vue/eslint-config-typescript
npm run dev

🔧 FAQ

Q: What if Volar conflicts with Vetur?

A: Vue3 projects should use Volar. Disable or uninstall Vetur:

code --uninstall-extension octref.vetur

Q: TypeScript checking is not working?

A: Make sure Take Over Mode is enabled:

{
  "volar.takeOverMode.enabled": true
}

Q: ESLint conflicts with Prettier?

A: rvest.vs-code-prettier-eslint formats with Prettier first, then fixes issues with ESLint.

📚 Resources

📄 License

MIT