https://github.com/manuelgil/vscode-nx-pack
This extension pack for Visual Studio Code adds extensions that are amazingly useful for Nx, Angular, Nest, Next, TypeScript, and JavaScript development.
https://github.com/manuelgil/vscode-nx-pack
angular javascript js nest nestjs next nextjs nx nx-workspace react reactjs ts typescript vscode
Last synced: 9 months ago
JSON representation
This extension pack for Visual Studio Code adds extensions that are amazingly useful for Nx, Angular, Nest, Next, TypeScript, and JavaScript development.
- Host: GitHub
- URL: https://github.com/manuelgil/vscode-nx-pack
- Owner: ManuelGil
- License: mit
- Created: 2023-12-14T17:47:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-17T05:14:21.000Z (over 1 year ago)
- Last Synced: 2024-11-17T06:19:29.806Z (over 1 year ago)
- Topics: angular, javascript, js, nest, nestjs, next, nextjs, nx, nx-workspace, react, reactjs, ts, typescript, vscode
- Homepage: https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nx-pack
- Size: 12.7 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Nx Essential Extension Pack
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nx-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nx-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nx-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nx-pack&ssr=false#review-details)
[](https://github.com/ManuelGil/vscode-nx-pack)
[](https://github.com/ManuelGil/vscode-nx-pack/blob/main/LICENSE)
> A carefully selected set of Visual Studio Code extensions to accelerate Nx, Angular, NestJS, Next.js, TypeScript, and JavaScript development.
## Requirements
- Visual Studio Code 1.46.0 or later
## Installation
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 **Nx Essential Extension Pack** or install directly from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nx-pack).
4. Reload the editor to activate all included extensions.
## Extensions Included
| Category | Extension |
| ------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Nx** | [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) |
| **Angular** | [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=angular.ng-template) |
| | [Angular Snippets (v16)](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular2) |
| | [Angular File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator) |
| | [Karma Test Explorer](https://marketplace.visualstudio.com/items?itemName=lucono.karma-test-explorer) |
| **NestJS** | [NestJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nestjs-generator) |
| | [NestJS Snippets](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nestjs-snippets-extension) |
| **Next.js & React** | [ES7 React snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) |
| | [Vercel for VS Code](https://marketplace.visualstudio.com/items?itemName=HaydenBleasel.vercel-vscode) |
| | [styled-jsx](https://marketplace.visualstudio.com/items?itemName=blanu.vscode-styled-jsx) |
| | [Prisma NextJS](https://marketplace.visualstudio.com/items?itemName=WillLuke.nextjs) |
| | [NextJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nextjs-generator) |
| **TypeScript** | [TypeScript Importer](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter) |
| | [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport) |
| | [Move TS](https://marketplace.visualstudio.com/items?itemName=stringham.move-ts) |
| | [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) |
| **Styles & CSS** | [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) |
| | [CSS Navigation](https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation) |
| **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) |
| | [Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image) |
| **Git** | [Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits) |
| | [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) |
| | [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore) |
| | [GitLab Workflow](https://marketplace.visualstudio.com/items?itemName=gitlab.gitlab-workflow) |
| | [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) |
| | [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv) |
| | [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) |
| **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) |
| | [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=editorconfig.editorconfig) |
| | [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) |
## Contributing
Contributions to the Nx Essential Extension Pack are welcome and appreciated. To contribute:
1. Fork the [GitHub repository](https://github.com/ManuelGil/vscode-nx-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-nx-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-nx-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-nx-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-nx-pack/blob/main/LICENSE) file for full details.