Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/manuelgil/vscode-vue-pack

💚 Essential extensions for VueJS development. Includes support for VueJS, TypeScript, Vetur, TailwindCSS, ESLint, Prettier, Git, Markdown, and more! 🚀
https://github.com/manuelgil/vscode-vue-pack

extensions extensions-pack vite vscode vscode-extension vscode-extension-pack vscode-extensionpack vscode-extensions vue vue3 vuejs vuejs2 vuejs3

Last synced: 5 months ago
JSON representation

💚 Essential extensions for VueJS development. Includes support for VueJS, TypeScript, Vetur, TailwindCSS, ESLint, Prettier, Git, Markdown, and more! 🚀

Awesome Lists containing this project

README 

          
# Vue Essential Extension Pack



[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/imgildev.vscode-vue-pack?style=for-the-badge&label=VS%20Marketplace&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-vue-pack)

[![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/imgildev.vscode-vue-pack?style=for-the-badge&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-vue-pack)

[![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/imgildev.vscode-vue-pack?style=for-the-badge&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-vue-pack)

[![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/imgildev.vscode-vue-pack?style=for-the-badge&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-vue-pack&ssr=false#review-details)

[![GitHub Repo stars](https://img.shields.io/github/stars/ManuelGil/vscode-vue-pack?style=for-the-badge&logo=github)](https://github.com/ManuelGil/vscode-vue-pack)

[![GitHub license](https://img.shields.io/github/license/ManuelGil/vscode-vue-pack?style=for-the-badge&logo=github)](https://github.com/ManuelGil/vscode-vue-pack/blob/main/LICENSE)



> A hand‑picked set of VS Code extensions to supercharge Vue.js development, with support for TypeScript, styling, linting, Git, Markdown, and more.



## Requirements



- VS Code 1.46.0 or later



## Installation



1. Open **Visual Studio Code**.

2. Navigate to **Extensions** (`Ctrl+Shift+X` on Windows/Linux or `⌘+Shift+X` on macOS).

3. Search for **Vue Essential Extension Pack** or install directly from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-vue-pack).

4. Reload to activate all included extensions.



## Included Extensions



| Category       | Extension                                                                                                      |

| -------------- | -------------------------------------------------------------------------------------------------------------- |

| **Vue**        | [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=vue.volar)                 |

|                | [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)                                      |

|                | [Vue 3 Support – All In One](https://marketplace.visualstudio.com/items?itemName=wscats.vue)                   |

|                | [VueJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-vuejs-generator)    |

|                | [VueJS Commander](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-vuejs-commander)         |

|                | [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)     |

| **TypeScript** | [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)                      |

|                | [Pretty TypeScript Errors](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)       |

| **Markdown**   | [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)          |

|                | [Markdown Lint](https://marketplace.visualstudio.com/items?itemName=davidanson.vscode-markdownlint)            |

| **Git**        | [Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits) |

|                | [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)                            |

|                | [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)                                 |

| **Code Style** | [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)                           |

|                | [Prettier – Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)        |

|                | [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)             |

|                | [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)           |

|                | [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)              |

|                | [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)  |

|                | [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)                   |

|                | [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)              |

|                | [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=editorconfig.editorconfig)      |

| **Utilities**  | [Auto Barrel](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel)                 |

|                | [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)                         |

|                | [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)                                 |

|                | [Draw Folder Structure](https://marketplace.visualstudio.com/items?itemName=jmkrivocapich.drawfolderstructure) |

|                | [Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)       |

|                | [JSON Flow](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-json-flow)                     |

|                | [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.liveserver)                       |

|                | [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)    |

|                | [Todo Tree](https://marketplace.visualstudio.com/items?itemName=gruntfuggly.todo-tree)                         |



## Contributing



Contributions to the Vue Essential Extension Pack are welcome and appreciated. To contribute:



1. Fork the [GitHub repository](https://github.com/ManuelGil/vscode-vue-pack).

2. Create a new branch for your feature or fix:



   ```bash

   git checkout -b feature/your-feature

   ```



3. Make your changes, commit them, and push to your fork.

4. Submit a Pull Request targeting the `main` branch.



Before contributing, please review the [Contribution Guidelines](https://github.com/ManuelGil/vscode-vue-pack/blob/main/CONTRIBUTING.md) for coding standards, testing, and commit message conventions. If you encounter a bug or wish to request a new feature, please open an Issue.



## Changelog



For a complete list of changes, see the [CHANGELOG.md](https://github.com/ManuelGil/vscode-vue-pack/blob/main/CHANGELOG.md).



## Authors



- **Manuel Gil** - _Owner_ - [@ManuelGil](https://github.com/ManuelGil)



For a complete list of contributors, please refer to the [contributors](https://github.com/ManuelGil/vscode-vue-pack/contributors) page.



## Follow Me



- **GitHub**: [![GitHub followers](https://img.shields.io/github/followers/ManuelGil?style=for-the-badge\&logo=github)](https://github.com/ManuelGil)

- **X (formerly Twitter)**: [![X Follow](https://img.shields.io/twitter/follow/imgildev?style=for-the-badge\&logo=x)](https://twitter.com/imgildev)



## Other Extensions



- **[Auto Barrel](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel)**

  Automatically generates and maintains barrel (`index.ts`) files for your TypeScript projects.



- **[Angular File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator)**

  Generates boilerplate and navigates your Angular (9→20+) project from within the editor, with commands for components, services, directives, modules, pipes, guards, reactive snippets, and JSON2TS transformations.



- **[NestJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nestjs-generator)**

  Simplifies creation of controllers, services, modules, and more for NestJS projects, with custom commands and Swagger snippets.



- **[NestJS Snippets](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nestjs-snippets-extension)**

  Ready-to-use code patterns for creating controllers, services, modules, DTOs, filters, interceptors, and more in NestJS.



- **[T3 Stack / NextJS / ReactJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nextjs-generator)**

  Automates file creation (components, pages, hooks, API routes, etc.) in T3 Stack (Next.js, React) projects and can start your dev server from VSCode.



- **[Drizzle ORM Snippets](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-drizzle-snippets)**

  Collection of code snippets to speed up Drizzle ORM usage, defines schemas, migrations, and common database operations in TypeScript/JavaScript.



- **[CodeIgniter 4 Spark](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-codeigniter4-spark)**

  Scaffolds controllers, models, migrations, libraries, and CLI commands in CodeIgniter 4 projects using Spark, directly from the editor.



- **[CodeIgniter 4 Snippets](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-codeigniter4-snippets)**

  Snippets for accelerating development with CodeIgniter 4, including controllers, models, validations, and more.



- **[CodeIgniter 4 Shield Snippets](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-codeigniter4-shield-snippets)**

  Snippets tailored to CodeIgniter 4 Shield for faster authentication and security-related code.



- **[Mustache Template Engine - Snippets & Autocomplete](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-mustache-snippets)**

  Snippets and autocomplete support for Mustache templates, making HTML templating faster and more reliable.



## Recommended Browser Extension



For developers who work with `.vsix` files for offline installations or distribution, the complementary [**One-Click VSIX**](https://chromewebstore.google.com/detail/imojppdbcecfpeafjagncfplelddhigc?utm_source=item-share-cb) extension is recommended, available for both Chrome and Firefox.



> **One-Click VSIX** integrates a direct "Download Extension" button into each VSCode Marketplace page, ensuring the file is saved with the `.vsix` extension, even if the server provides a `.zip` archive. This simplifies the process of installing or sharing extensions offline by eliminating the need for manual file renaming.



- [Get One-Click VSIX for Chrome →](https://chromewebstore.google.com/detail/imojppdbcecfpeafjagncfplelddhigc?utm_source=item-share-cb)

- [Get One-Click VSIX for Firefox →](https://addons.mozilla.org/es-ES/firefox/addon/one-click-vsix/)



## License



This project is licensed under the **MIT License**. See the [LICENSE](https://github.com/ManuelGil/vscode-vue-pack/blob/main/LICENSE) file for full details.