https://github.com/manuelgil/vscode-react-pack
Essential extensions for React development. Includes support for React, TypeScript, JavaScript, JSON, Git, Markdown, and more.
https://github.com/manuelgil/vscode-react-pack
extension-pack extensions javascript js json jsx react reactjs vscode vscode-extension
Last synced: 3 months ago
JSON representation
Essential extensions for React development. Includes support for React, TypeScript, JavaScript, JSON, Git, Markdown, and more.
- Host: GitHub
- URL: https://github.com/manuelgil/vscode-react-pack
- Owner: ManuelGil
- License: mit
- Created: 2023-12-21T00:15:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-17T05:14:53.000Z (over 1 year ago)
- Last Synced: 2025-01-21T02:42:38.082Z (over 1 year ago)
- Topics: extension-pack, extensions, javascript, js, json, jsx, react, reactjs, vscode, vscode-extension
- Homepage: https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-react-pack
- Size: 52.7 KB
- Stars: 1
- Watchers: 2
- 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
# React Essential Extension Pack
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-react-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-react-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-react-pack)
[](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-react-pack&ssr=false#review-details)
[](https://github.com/ManuelGil/vscode-react-pack)
[](https://github.com/ManuelGil/vscode-react-pack/blob/main/LICENSE)
> A curated collection of Visual Studio Code extensions to boost React, JavaScript, and TypeScript development productivity.
## 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 **React Essential Extension Pack** or install directly from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-react-pack).
4. Reload the editor to activate all included extensions.
## Included Extensions
| Category | Extension |
| -------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **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) |
| | [React File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nextjs-generator) |
| | [GraphQL: Language Feature Support](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) |
| | [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) |
| | [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components) |
| **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) |
| | [JavaScript & TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next) |
| | [JSON to TS](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts) |
| **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) |
| | [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced) |
| **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) |
| | [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) |
| | [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) |
## Contributing
Contributions to the React Essential Extension Pack are welcome and appreciated. To contribute:
1. Fork the [GitHub repository](https://github.com/ManuelGil/vscode-react-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-react-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-react-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-react-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-react-pack/blob/main/LICENSE) file for full details.