NextJS Developer Extensions Pack: Install the best VSCode extensions with one click
Tags: nextjs, webdev, vscode, productivity
Published: 2021-07-21 01:04:47

It looks that we'll never run out of VS Code best extensions posts and lists, right? As an daily user of VS Code I think I can related with the feeling of share with other people how amazing some tools are and help boost our productivity in some many forms and ways that we wouldn't guess.

As a web developer and mostly focused on NextJS working with style-components and TypeScript, my arsenal of tools may not be everyone's cup of tea but more and more helping others and teaching, I decided to create an extension pack to better share my weapons of choice. After that you can just uninstall that you don't use it or even needed. After all, there's no size fits all, even more with such personal as is the development space in which we program.

This is all the extensions on my greatest hist lists, I'm sure most are very well known, others are more niche but super helpfull.

- [**Auto Close Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag): _Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text_
- [**Auto Rename Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag): _Auto rename paired HTML/XML tag_
- [**axe Accessibility Linter**](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter): _Coding for accessibility made easy._
- [**Better Comments**](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments): _The Better Comments extension will help you create more human-friendly comments in your code_
- [**Blockman - Highlight Nested Code Blocks**](https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman): _Mark/Highlight code blocks_
- [**Bookmarks**](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks): _It helps you to navigate in your code, moving between important positions easily and quickly._
- [**Code Spell Checker**](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker): _Spelling checker for source code_
- [**Color Highlight**](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight): _Highlight web colors in your editor_
- [**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv): _Support for dotenv file syntax_
- [**Git Graph**](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph): _View a Git Graph of your repository, and perform Git actions from the graph._
- [**GitLens — Git supercharged**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): _Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more_
- [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): _Integrates ESLint JavaScript into VS Code._
- [**File Utils**](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils): _A convenient way of creating, duplicating, moving, renaming and deleting files and directories._
- [**indent-rainbow**](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow): _Makes indentation easier to read_
- [**Jest**](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest): _Use Facebook's Jest With Pleasure._
- [**JSON to TS**](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts): _Convert JSON object to typescript interfaces_
- [**Markdown Preview Enhanced**](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced): _Markdown Preview Enhanced ported to vscode_
- [**markdownlint**](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint): _Markdown linting and style checking for Visual Studio Code_
- [**Material Icon Theme**](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme): _Material Design Icons for Visual Studio Code_
- [**Next.js snippets**](https://marketplace.visualstudio.com/items?itemName=pulkitgangwar.nextjs-snippets): _snippets for nextjs_
- [**Paste JSON as Code**](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype): _Copy JSON, paste as Go, TypeScript, C#, C++ and more._
- [**Path Intellisense**](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense): _Visual Studio Code plugin that autocompletes filenames._
- [**Prettier - Code formatter**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): _Code formatter using prettier_
- [**Rainbow Brackets**](https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets): _Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets. This is particularly useful for Lisp or Clojure programmers, and of course, JavaScript, and other programmers._
- [**Sort JSON objects**](https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json): _Sorts the keys within JSON objects_
- [**Template String Converter**](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter): _Converts quotes to backticks when a `$` and `{` are entered within quotes in JavaScript and TypeScript files_
- [**Thunder Client**](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client): _Rest API Client for VS Code, GUI based Http Client_
- [**Todo Tree**](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree): _Show TODO, FIXME, etc. comment tags in a tree view_
- [**Toggle Quotes**](https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes): _`cmd '` (`ctrl '` on win/linux) will cycle the first quote pair found_
- [**Trailing Spaces**](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces): _Highlight trailing spaces and delete them in a flash!_
- [**TSLint**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin): _TSLint support for Visual Studio Code_
- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode): _AI-assisted development_
- [**vscode-styled-components**](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components): _Syntax highlighting for styled-components_

To install, just go to the **[Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=IbrahimCesar.ibrahimcesar-nextjs-developer-pack)** and smash the Install button.

Happy coding everyone 😃