https://github.com/manuelgil/vscode-angular-pack
This extension pack for Visual Studio Code adds extensions that are amazingly useful for Angular development.
https://github.com/manuelgil/vscode-angular-pack
angular extension-pack typescript visual-studio-code vscode vscode-extension
Last synced: 4 months ago
JSON representation
This extension pack for Visual Studio Code adds extensions that are amazingly useful for Angular development.
- Host: GitHub
- URL: https://github.com/manuelgil/vscode-angular-pack
- Owner: ManuelGil
- License: mit
- Created: 2023-09-10T03:22:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-06T17:05:46.000Z (7 months ago)
- Last Synced: 2025-08-15T22:52:56.727Z (5 months ago)
- Topics: angular, extension-pack, typescript, visual-studio-code, vscode, vscode-extension
- Homepage: https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-ts-pack
- Size: 163 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Angular Essential Extension Pack
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-ts-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-ts-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-ts-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-ts-pack&ssr=false#review-details)
[](https://github.com/ManuelGil/vscode-angular-pack)
[](https://github.com/ManuelGil/vscode-angular-pack/blob/main/LICENSE)
> A curated collection of Visual Studio Code extensions designed to enhance and streamline Angular development for professionals and teams.
## Why This Pack?
Developing Angular applications requires efficient management of code generation, linting, formatting, navigation, and testing. The Angular Essential Extension Pack brings together the most widely adopted and reliable Visual Studio Code extensions into a single, cohesive bundle. This enables both teams and individual developers to:
- Scaffold and generate Angular artifacts directly from the editor.
- Maintain consistent code quality and formatting standards.
- Navigate and refactor templates, styles, and TypeScript code with ease.
- Integrate testing frameworks and Git workflows seamlessly.
- Minimize context switching and configuration overhead.
## Getting Started
To begin using the Angular Essential Extension Pack, follow these steps:
1. Install [Visual Studio Code](https://code.visualstudio.com/).
2. Open the **Extensions** view (`Ctrl+Shift+X` on Windows/Linux or `⌘+Shift+X` on macOS).
3. Search for **Angular Essential Extension Pack** or install it directly from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-ts-pack).
4. Reload Visual Studio Code to activate all included extensions.
## Key Features
- **Angular File Generator**: Scaffold components, services, modules, guards, and other schematics directly from the Explorer context menu.
- **Angular Language Service & Snippets**: Benefit from real‑time template type checking and a comprehensive suite of Angular-specific code snippets.
- **Auto‑Import and Barrel Generation**: Automatically manage import statements and generate `index.ts` barrel files.
- **HTML/CSS Navigation**: Effortlessly navigate from template tags to source definitions, inspect styles, and highlight matching tags.
- **Code Quality and Formatting**: Leverage ESLint, Prettier, EditorConfig, and Better Comments for consistent code style and quality.
- **GitLens and Error Lens**: Access inline Git annotations and enhanced error highlighting for accelerated debugging.
- **Test Explorer Integration**: Execute and debug Angular unit tests (Jasmine/Mocha) directly from the Visual Studio Code sidebar.
## Included Extensions
| Category | Extension |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| Core Angular | [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) |
| | [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) |
| | [Angular File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator) |
| | [Rename Angular Component](https://marketplace.visualstudio.com/items?itemName=tomwhite007.rename-angular-component) |
| Imports & Barrels | [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport) |
| | [Auto Barrel](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel) |
| HTML & CSS | [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) |
| | [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) |
| | [CSS Navigation](https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation) |
| | [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) |
| Code Quality | [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) |
| | [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) |
| | [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=editorconfig.editorconfig) |
| | [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) |
| | [markdownlint](https://marketplace.visualstudio.com/items?itemName=davidanson.vscode-markdownlint) |
| Productivity | [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) |
| | [Move TS](https://marketplace.visualstudio.com/items?itemName=stringham.move-ts) |
| | [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) |
| | [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) |
| | [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) |
| | [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore) |
| Git & Testing | [GitLens - Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) |
| | [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) |
| | [Karma Test Explorer (Angular, Jasmine, Mocha)](https://marketplace.visualstudio.com/items?itemName=lucono.karma-test-explorer) |
| Markdown & JSON | [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) |
| | [JSON Flow](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-json-flow) |
| | [Draw Folder Structure](https://marketplace.visualstudio.com/items?itemName=jmkrivocapich.drawfolderstructure) |
## Contributing
Contributions to the Angular Essential Extension Pack are welcome and appreciated. To contribute:
1. Fork the [GitHub repository](https://github.com/ManuelGil/vscode-angular-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-angular-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-angular-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-angular-pack/contributors) page.
## Follow Me
- **GitHub**: [](https://github.com/ManuelGil)
- **X (formerly Twitter)**: [](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-angular-pack/blob/main/LICENSE) file for full details.