This article recommends a complete set of Vue 3 development extensions covering language support, code standards, styling, testing, and debugging.
Core Language Support
- Vue - Official (formerly Volar)
Official Vue 3 extension, replaces Vetur, provides TypeScript support, IntelliSense, and code navigation
Code Standards & Formatting
- ESLint / OXC (choose one based on your project's tooling)
ESLint is a JavaScript/TypeScript linting tool; OXC is a high-performance Rust-based alternative with faster execution - Prettier
Code formatter, works with ESLint to achieve consistent code style - Error Lens
Displays errors and warnings inline in code, no hover required
Styling
- Tailwind CSS IntelliSense
Official Tailwind CSS extension, provides IntelliSense, autocompletion, and class sorting
Testing
- Vitest
Testing framework by Vue team, designed for Vite, blazing fast execution
Project Management
- Todo Tree
Display TODO, FIXME markers in sidebar - Git History
View file Git commit history with graphical branch display - EditorConfig
Unify team editor configuration (indentation, line endings, etc.) - JSON Formatter
JSON file formatting, supports minification and beautification
Recommended Configuration
Create a .vscode/extensions.json file in your project root to commit the recommended extension list to your repository. When team members open the project, VS Code will automatically prompt them to install these extensions, ensuring the team uses consistent development tools.
{
"recommendations": [
"Vue.volar",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"usernamehw.errorlens",
"bradlc.vscode-tailwindcss",
"ZixuanChen.vitest-explorer",
"Gruntfuggly.todo-tree",
"donjayamanne.githistory",
"EditorConfig.EditorConfig"
]
}Conclusion
The above extensions cover the complete Vue 3 development workflow. Select based on your team's actual needs—you don't need to install all of them.
Tags: recommendationsvueextensionsfrontend