Hello Devs,

In this blog post, I am going to tell you some of the interesting and useful VS Code extensions which will be very helpful for you all in your development career.

Table of content

---

1. Introduction
2. VS Code Extension List
3. Conclusion

Introduction

---

There are lots of amazing libraries in VS Code Marketplace and some of them are very useful. Here I am listing some of the very useful extensions which make your life easy and increase your productivity. So, without wasting time, let's see the extensions below. Please feel free to add some more extensions by editing this post here link

VS Code Extension List

1. Prettier

This is the most famous and used extension in vs code. This extension is used to format the code which means when we write codes we sometimes didn't consider line breaks or brackets after a space and some of the stuff like this. This extension automatically beautifies your code and makes it clean and more readable.

It supports lots of programming languages like JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown etc.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

2. ToDo Highlight

Sometimes when we write code lots of ideas and logic runs through our minds and we use to write those ideas as a comment in the code block and again after a few days if we want to recall them it's pretty difficult to find them within the code. So this extension comes with a wonderful feature of highlighting certain keywords within the code like NOTE, TODO and FIXIT and also it provides a feature to customize the keywords and their background, foreground and text color. To customize the keywords and other stuff, command + , (Windows / Linux: File -> Preferences -> User Settings) and open the vscode file settings.json.

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

3. Live Server

This extension launches a local development server with a live reload feature for static & dynamic pages so you don't need to save and rerun the file or reload the web page to see the new changes.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

4. Live Share

This extension enables you to collaboratively edit and debug with others in real time for any programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project.

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

5. Live Share Audio

This extension adds audio calling capabilities to Visual Studio Live Share (discussed in point no. 4). Participants within a Live Share session can automatically join the call, and chat with each other, without needing to first coordinate which voice communication tool to use. If you are teaching online or giving training/mentoring, this extension will be very helpful.

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-audio

6. Code Spell Checker

When we write code, sometimes we by mistake type the wrong spelling of some content within the code (not the programming language keywords). This extension checks for spelling mistakes in the source code and works well with camelcase code as well. This extension is one of the must-have extension for developers who writes code.

NOTE: This extension has a lot of other versions for different languages (like Russian, Spanish, German, French etc), do check out this in vs code marketplace if you need any of them.

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

7. Code Snap

This extension takes beautiful screenshots of your code in VS Code. This is very helpful and useful when you are documenting the code or sharing it with someone within the mail or social media platform.

https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap

8. Code Time

This extension tracks the time in Visual Studio Code. You have to log in to this extension and they have a wonderful web app to show the metrics data. They have free as well as paid plans. This extension is mostly used by freelancers to show the time report to the clients.

https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode

9. Code Runner

This extension is very useful for the developers. Using this extension you can select a block of code and run only that block rather than executing the whole file or code.

You just have to select the block of code and then right-click and run. This extension support lot of programming languages like C, C++, Java, JavaScript, Python, PowerShell, BAT/CMD, BASH/SH, Dart and a lot more. You can run the custom commands as well.

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

10. Color Highlight

This extension is used to highlight the CSS color in your code so that it will become more visible to you. This extension colors only in the border of the CSS color code.

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

11. Colorize

This extension is used to highlight the CSS color in your code so that it will become more visible to you. This extension colors the CSS color code with the same color code fill.

https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

12. Indent Rainbow Palettes

This extension generates a rainbow palette within the opening and closing tags or elements or brackets with different color codes which makes the code block more readable and your code will look nicer.

https://marketplace.visualstudio.com/items?itemName=evondev.indent-rainbow-palettes

13. Indent Rainbow

This extension generates a rainbow palette within the opening and closing tags or elements or brackets with different color codes which makes code block more readable and your code will look nicer.

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

14. Peacock

This extension is very helpful for the developers who work in multiple VS Code workspaces and they have to switch between these workspaces very frequently. Sometimes developer gets confused about which workspace is for what, Using this extension one can color the vs code workspace sidebar with multiple colors so that the workspace can be identified easily while switching between the workspaces.

This is one of my favorite extensions.

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

15. Bracket Pair Colorization Toggler

A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Colorization” setting added in VS Code v1.60. Sometimes this extension is useful if you are running an older version of vs code.

https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler

16. Git Graph

This extension is one of the most useful extensions in the development world. This extension helps you view the git histories (commits, stashes etc) graphically way and you can also perform git actions directly from this extension dashboard.

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

17. Git Lens

This extension is most popular in vs code marketplace for managing and maintaining source code in vs code. This extension provides a lot of features you can pull, push, commit and also compare codes and a whole lot of features.

This extension shows the commit date and commits message in each line of code (this feature is very useful and helpful).

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

18. Git History

Using this extension you can check the logs (history) of your git repo and also you can see which line of code or file you have changed on which date and which developer has changed. This extension is helpful if you want to check some older versions of code.

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

19. i18n Ally

This extension is used to translate the text in your code to some other language. it supports lots of languages like English, Spanish, German, French, Dutch etc.

https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally

20. ES Lint

This extension is useful for JavaScript developers and most developers use this extension. This extension provides predefined linting rules which help developers to write fewer buggy codes also using this extension developers can improve their code quality

Once ESLint is installed in Visual Studio Code, you’ll notice colorful underlining in your .js files highlighting errors. These markers are color-coded based on severity. If you hover over your underlined code, you will see a message that explains the error to you. In this way, ESLint helps us find and remove code and syntax errors.

ESLint can do even more for you. ESLint can be modified to automatically fix errors every time a file is saved.

You can also change the configuration of this extension by navigating to .vscode/setting.json file like

{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}

You can also customize the Linting Rules, Like highlight the console.log statements and a whole lot of other stuff similar to this.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

21. Sonar Lint

SonarLint is a free IDE extension that lets you fix coding issues before they exist! Like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed. SonarLint in VS Code supports analysis of C, C++, HTML, Java, JavaScript, PHP, Python and TypeScript.

This extension is mostly used to get out of Security Vulnerabilities in the code.

https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode

22. Web Accessibility

This extension highlights the piece of code which needs to be improved to make it more accessible. This extension also gives a hint for changing it.

https://marketplace.visualstudio.com/items?itemName=MaxvanderSchee.web-accessibility

23. Wallaby.js

Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code.

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

24. Better Comments

This extension will help you to write more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into: Alerts Queries TODOs Highlights Commented code can also be styled to make it clear the code shouldn't be there

and all these annotations you can colorize with whatever color you want to based on the category.

Any other comment styles you'd like can be specified in the settings

You can write TODO also and this extension will highlight that as well.

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

25. CSS Peek

This extension allows peeking at CSS ID and class strings. Let's say you have given some class name or id to an HTML element and you want to see the styling for that class, you can press ctrl and hover over that to see the styling and also you can able to ~Peek: Load the CSS file inline and make quick edits right there. (Ctrl+Shift+F12) ~Go To: jump directly to the CSS file or open it in a new editor (F12) ~Hover: show the definition in a hover over the symbol (Ctrl+hover)

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

26. DotENV

This extension is useful for .env syntax highlighting.

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

27. Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

28. Import Cost

In most of the framework, we import some external or internal libraries or files. This library shows the import cost means the size of the import in real-time in the line of code where you have imported.

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

29. Auto Close Tag

This extension automatically adds HTML/XML close tag, the same as Visual Studio IDE or Sublime Text does.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

30. Auto Rename Tag

This extension automatically renames paired HTML/XML tags, the same as Visual Studio IDE does. When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

31. JavaScript ES6 Code Snippet

This extension contains code snippets for JavaScript in ES6 syntax for VS Code editor (supports both JavaScript and TypeScript).

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

32. ReactJS Code Snippet

This extension contains code snippets for ReactJS and is based on the awesome babel-sublime-snippets package.

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

33. Jumpy

Jumpy provides fast cursor movement, inspired by Atom's package of the same name.

https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy

34. Path Intellisense

Visual Studio Code plugin that autocompletes filenames.

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

35. NPM Intellisense

Visual Studio Code plugin that autocompletes npm modules in import statements

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

36. Markdownlint

When editing a Markdown file in Code with Markdownlint installed, any lines that violate one of Markdownlint's rules (see below) will trigger a Warning in the editor.

https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

37. Regex Previewer

Shows the current regular expression's matches in a side-by-side document.

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

38. Stylelint

This extension provides the linting rule for CSS and SCSS files.

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

39. Quokka.js

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

Press ctl+shift+p(show all command shortcuts) in VS Code on a Windows machine. from here you can create a new js file with Quokka see start your JS coding

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

40. Project Manager

It helps you to easily access your projects, no matter where they are located. You can Organize your projects with Tags

This is a very amazing and very helpful extension

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

41. VS Code Icons

This extension is just for fun and to make your vs code looks attractive. This extension creates icons based on the file type and those look very awesome.

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

42. VS Code React Refactor

This extension is very helpful for React developers. Sometimes in a code file, we may have a lot of inner JSX and if we wanted to move those to a new file or component and do so we have to create a file then copy and paste the code block and a whole lot of export and import of file and all.

With this extension we can just select the block of code which we want to move and a whole other lot of stuff this extension will take care of.

https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor

43. Polacode

This extension takes beautiful screenshots of your code in VS Code. You can say this extension is an alternative to CodeSnap

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

44. Remind Me

This is a simple reminder application in VS Code, This extension will remind you of something along with writing code in vs code itself

https://marketplace.visualstudio.com/items?itemName=cg-cnu.vscode-remind-me

45. Excel Viewer

Edit Excel spreadsheets and CSV files in Visual Studio Code and VS Code for the Web

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

46. Turbo Console Log

console.log can make or break your productivity. Turbo Console Log is an active plugin for VS Code that lets you select the variable for the subject of your debugging and automatically adds log messages to the nearest line relative. This lets you rapidly debug without writing any console.log code.

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

47. Test Explorer UI

this extension provides developers with UI for running their tests in Visual Studio Code. This extension supports languages like JavaScript, C, C++, Exlir, Elm, Go, Haxe, Java, Python, Ruby, REST/GraphQL, and other popular languages and implementations.

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer

48. ES7+ React/Redux/React-Native snippets

This extension is very amazing and covers all the JavaScript frameworks or libraries snippets and makes our life easier.

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

49. Bookmarks

This extension allows you to add bookmarks to your code, helping you quickly navigate and easily jump back and forth.

Additionally, it allows you to select regions of code between bookmarked code, which is very much useful in the development world.

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

50. Profile Switcher

Are you using VS Code for your all development/ coding-related stuff like creating frontend in javascript, writing backend code in Python or switching between tech stacks often? This extension allows you to create different profiles that save specific extensions, like one for React and one for Angular one for Python etc so you only have to change your configurations for each tech stack once.

https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher

51. Sapling

Sapling is a VS Code Extension for Traversing React Component Hierarchy. In the react application keeping track of lots of components is very difficult to manage and remember. Sapling helps you to do so, Sapling creates a hierarchical relationship of all your components. Each node provides a summary of available props, there is even a convenient icon that will tell you which components you’ve connected to the Redux store. Moreover, if your application uses third-party components like Material-UI or React-Router, you can choose whether Sapling should display them by toggling them on and off in VS Code’s Extension settings

https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling

52. GitLive

GitLive is an amazing extension to enhance the IDE’s built-in Git functionality with real-time features such as an online presence for team members and instant merge conflict detection.

https://marketplace.visualstudio.com/items?itemName=TeamHub.teamhub

53. Trunk

One of the powerful linting extensions that provide features like caching, pre-existing issue detection, a daemon, and a language server.

https://marketplace.visualstudio.com/items?itemName=Trunk.io

54. Minify Doc Writer

Mintlify is a great tool for all of us who think that writing documentation is the most boring task ever. With Mintlify you can just highlight the code and it auto generates docs for you.

https://marketplace.visualstudio.com/items?itemName=mintlify.document

55. Markmap

Markmap extension helps you create visualizations/hierarchical views from your markdown files (the name of the tool is a combination of markdown and mindmap). It parses markdown content and generates the mindmap from it in real time. It also provides an online tool to do so. Link: https://markmap.js.org/repl

https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode

56. Blockman

While writing code, you often felt to highlight a specific code block so that you will find it visually easy to debug. Blockman can do it for you, it highlights the block of code and makes your life super easy.

https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman&ssr=false#overview

57. JavaScript Booster

This extension boosts your productivity with advanced JavaScript/TypeScript refactoring and commands

JavaScript Booster comes with a whole lot of below features, \

Conditions: Flip if-else, Remove redundant else, Replace if-else with, Simplify if-else, Flip, Simplify, Merge nested if statements (new)

Declarations Convert var/const to let, Convert var to const, Split into multiple declarations, Split into declaration and initialization, Merge declaration and initialization

Strings Replace string with template string, Replace template string with regular string, Split string under cursor, Trim whitespaces inside string (new)

Functions Convert shorthand arrow function to statement, Convert to shorthand arrow function, Add parens to single arrow function parameter, Convert function to arrow function, Convert arrow function to regular function (new), Convert function declaration to arrow function (new)

Async [on selection] Run selected await statements in parallel with Promise.all

TypeScript Convert enum to string-enum (new), Convert string-enum to type union (new), Convert type union of strings to string-enum (new)

JSX / TSX Wrap value with {} (JSX attributes), Remove {} from JSX attribute, Collapse/Expand empty tag

React Wrap function into useCallback() hook (new), React: Wrap component function with React.forwardRef() (new), React: Wrap component function with React.memo() (new), React: Convert function to React.FunctionComponent declaration (new)

https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster

58. Live Preview

This extension hosts your website on a local server and runs your website locally in VS Code (side by side). This extension is most useful for projects where a server is not already created (e.g. not for apps using React, Angular, etc.).

this is very useful when we are developing some web applications and need to have a live preview side by side without switching between VS Code and browser.

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

59. Multiple cursor case preserve

Have you ever tried to change a single word in all variable names, but had your camelCase broken? This extension preserves selection cases in these situations. It recognizes CAPS, Uppercase and lowercase. Works for typing or pasting.

https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve

Conclusion

---

We have listed almost all the famous and useful VS Code extensions that will help you and make you more productive throughout your career.

Thank you for reading this so far. This is a brief introduction to some of the VS Code Extension

If you find this article useful, share this article. Someone could find it useful too. If you find anything technically inaccurate please feel free to create an issue.

Hope it's a nice and informative read for you. VISIT https://www.capscode.in/blog TO LEARN MORE...

See you in my next Blog article, Take care !!!

Thanks,
CapsCode