https://github.com/manuelgil/vscode-angular-starter-pack
This starter extension pack includes some of the minimum extensions to get you started with Angular development in Visual Studio Code.
https://github.com/manuelgil/vscode-angular-starter-pack
angular extension-pack starter stater-kit vscode-extension vscode-extension-pack
Last synced: 6 months ago
JSON representation
This starter extension pack includes some of the minimum extensions to get you started with Angular development in Visual Studio Code.
- Host: GitHub
- URL: https://github.com/manuelgil/vscode-angular-starter-pack
- Owner: ManuelGil
- License: mit
- Created: 2024-05-29T13:56:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-06T17:10:25.000Z (6 months ago)
- Last Synced: 2025-07-18T11:57:48.502Z (6 months ago)
- Topics: angular, extension-pack, starter, stater-kit, vscode-extension, vscode-extension-pack
- Homepage: https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-starter-pack
- Size: 146 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Angular Starter Extension Pack
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-starter-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-starter-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-starter-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-starter-pack&ssr=false#review-details)
[](https://github.com/ManuelGil/vscode-angular-starter-pack)
[](https://github.com/ManuelGil/vscode-angular-starter-pack/blob/main/LICENSE)
> A minimal collection of Visual Studio Code extensions to kick‑start professional Angular development.
## Why This Pack?
Starting a new Angular project demands a concise set of tools for code generation, template validation, style consistency, and file navigation. The **Angular Starter Extension Pack** aggregates the most essential and reliable VS Code extensions, enabling developers to:
- Scaffold Angular artifacts directly within the editor.
- Benefit from real‑time template diagnostics and code snippets.
- Enforce consistent code style and formatting from day one.
- Improve HTML/CSS editing with tag auto‑completion and highlighting.
- Access utilities for import management, error insights, and file previews.
## Getting Started
To begin using the Angular Starter 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 Starter Extension Pack** or install directly from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-starter-pack).
4. Reload Visual Studio Code to activate all included extensions.
## Included Extensions
| Category | Extension & Link |
| --------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **Angular Core** | [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) |
| **Code Style & Formatting** | [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) |
| | [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) |
| | [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) |
| **HTML & CSS** | [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) |
| | [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) |
| **Utilities** | [Auto Barrel](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel) |
| | [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) |
| | [Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview) |
| | [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) |
| | [Pretty TypeScript Errors](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) |
## Contributing
Contributions to the Angular Starter Extension Pack are welcome and appreciated. To contribute:
1. Fork the [GitHub repository](https://github.com/ManuelGil/vscode-angular-starter-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-starter-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-starter-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-starter-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-starter-pack/blob/main/LICENSE) file for full details.