Next.js Essential Extension Pack

A curated collection of Visual Studio Code extensions to streamline Next.js, React, TypeScript, and JavaScript development.

Requirements

• Visual Studio Code 1.46.0 or later

Getting Started

1. Install Visual Studio Code.
2. Open the Extensions view (Ctrl+Shift+X on Windows/Linux or ⌘+Shift+X on macOS).
3. Search for Next.js Essential Extension Pack or install directly from the Marketplace.
4. Reload the editor to activate all included extensions.

Extensions Included

Category	Extension
Next.js & React	NextJS File Generator
	ES7 React snippets
	Nextjs snippets
	Vercel for VS Code
	styled-jsx
	Prisma NextJS
	GraphQL: Language Feature Support
	Tailwind CSS IntelliSense
	vscode‑styled‑components
TypeScript & Imports	TypeScript Importer
	Auto Import
	Move TS
	Import Cost
	Pretty TypeScript Errors
	JavaScript & TypeScript Nightly
	JSON to TS
Markdown	Markdown All in One
	Markdown Lint
	Paste Image
	Markdown Preview Enhanced
Git & Version Control	Conventional Commits
	Git Graph
	gitignore
	GitLab Workflow
	GitLens
Code Style & Linting	ESLint
	Prettier – Code formatter
	Auto Close Tag
	Auto Rename Tag
	Better Comments
	Highlight Matching Tag
	Indent Rainbow
	Rainbow CSV
	Trailing Spaces
Utilities & Extras	Auto Barrel
	Error Lens
	DotENV
	Draw Folder Structure
	EditorConfig for VS Code
	Image preview
	JSON Flow
	Live Server
	Path Intellisense
	Color Highlight
	Todo Tree

Contributing

Contributions to the Next.js Essential Extension Pack are welcome and appreciated. To contribute:

1. Fork the GitHub repository.

2. Create a new branch for your feature or fix:

   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 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.

Authors

• Manuel Gil - Owner - @ManuelGil

For a complete list of contributors, please refer to the contributors page.

Follow Me

• GitHub:
• X (formerly Twitter):

Other Extensions

• Auto Barrel Automatically generates and maintains barrel (index.ts) files for your TypeScript projects.

• Angular File 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 Simplifies creation of controllers, services, modules, and more for NestJS projects, with custom commands and Swagger snippets.

• NestJS Snippets Ready-to-use code patterns for creating controllers, services, modules, DTOs, filters, interceptors, and more in NestJS.

• T3 Stack / NextJS / ReactJS File 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 Collection of code snippets to speed up Drizzle ORM usage, defines schemas, migrations, and common database operations in TypeScript/JavaScript.

• CodeIgniter 4 Spark Scaffolds controllers, models, migrations, libraries, and CLI commands in CodeIgniter 4 projects using Spark, directly from the editor.

• CodeIgniter 4 Snippets Snippets for accelerating development with CodeIgniter 4, including controllers, models, validations, and more.

• CodeIgniter 4 Shield Snippets Snippets tailored to CodeIgniter 4 Shield for faster authentication and security-related code.

• Mustache Template Engine - Snippets & Autocomplete 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 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 →
• Get One-Click VSIX for Firefox →

License

This project is licensed under the MIT License. See the LICENSE file for full details.