https://github.com/manuelgil/vscode-javascript-pack
This starter extension pack includes some of the minimum extensions to get you started with JavaScript development in Visual Studio Code.
https://github.com/manuelgil/vscode-javascript-pack
javascript vscode-extension
Last synced: 3 months ago
JSON representation
This starter extension pack includes some of the minimum extensions to get you started with JavaScript development in Visual Studio Code.
- Host: GitHub
- URL: https://github.com/manuelgil/vscode-javascript-pack
- Owner: ManuelGil
- License: mit
- Created: 2025-01-07T19:22:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-08T03:18:31.000Z (about 1 year ago)
- Last Synced: 2025-03-16T06:48:05.835Z (10 months ago)
- Topics: javascript, vscode-extension
- Homepage: https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-javascript-pack
- Size: 16.6 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
# JavaScript Essentials Extension Pack
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-javascript-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-javascript-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-javascript-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-javascript-pack&ssr=false#review-details)
[](https://github.com/ManuelGil/vscode-javascript-pack)
[](https://github.com/ManuelGil/vscode-javascript-pack/blob/main/LICENSE)
> A curated starter pack of Visual Studio Code extensions to streamline JavaScript development.
## Why This Pack?
This extension pack brings together essential tools for JavaScript developers—covering code formatting, linting, snippet generation, live preview, import analysis, and more—so you can focus on writing code without setting up each extension individually.
## Requirements
- Visual Studio Code 1.46.0 or later (compatible with VSCodium, WindSurf, Cursor, etc.)
## Installation
1. Open **Visual Studio Code**.
2. Navigate to the **Extensions** view (`Ctrl+Shift+X` on Windows/Linux or `⌘+Shift+X` on macOS).
3. Search for **JavaScript Essentials Extension Pack** or install directly from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-javascript-pack).
4. Click **Install** and reload the editor to activate all included extensions.
## Included Extensions
| Category | Extension |
| -------------- | -------------------------------------------------------------------------------------------------------------- |
| **Node.js** | [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) |
| | [NPM Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) |
| **HTML** | [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) |
| | [HTMLHint](https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint) |
| **CSS** | [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) |
| | [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) |
| **Git** | [Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits) |
| | [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) |
| | [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) |
| **Other** | [Auto Barrel](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel) |
| | [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) |
| | [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) |
| | [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) |
| | [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 Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) |
| | [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) |
| | [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) |
| | [SVG Preview](https://marketplace.visualstudio.com/items?itemName=simonsiefke.svg-preview) |
| | [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) |
## Contributing
Contributions to the JavaScript Essentials Extension Pack are welcome and appreciated. To contribute:
1. Fork the [GitHub repository](https://github.com/ManuelGil/vscode-javascript-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-javascript-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-javascript-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-javascript-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-javascript-pack/blob/main/LICENSE) file for full details.