DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Useful VS Code Extensions
capscode
capscode

Posted on • Originally published at capscode.in

Useful VS Code Extensions

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


Their are lots of amazing library in VS Code Marketplace and some of them are very useful. Here I am listing some of the very useful extensions which definitely make your life easy and increase your productivity.
So without wasting time, lets see the extensions below.
Please feel free to add some more extension 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 break or brackets after a space and some of the stuffs like this. This extension automatically beautify your code and make it clean and more readable.

It support 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

prettier

2. ToDo Highlight

Sometimes when we write code lots of ideas and logic runs in mind and we use to write those ideas as a comment in the code block and again after few day if we want to recall them its 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, 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) open the vscode file settings.json.

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

todohighlight

3. Live Server

This extension launch a local development server with 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

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

liveshare

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

liveshareaudio

6. Code Spell Checker

When we write code, sometimes we by mistake type a wrong spelling of some content within the code (not the programming language keywords).
This extension checks for the spelling mistake 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 lot of other version for different languages (like Russian, Spanish, German, French etc), do checkout for this in vs code marketplace if you need any of them.

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

codespellchecker

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

codesnap

8. Code Time

This extension basically track the time in Visual Studio Code.
You have login 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 are mostly used by freelancers to show the time report to the clients.

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

codetime

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

coderunner

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 extensions colors only in the border of the css color code.

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

colorhighlight

11. Colorize

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

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

colorize

12. Indent Rainbow Palettes

This extension generate a rainbow palette within the opening and closing tags or element or brackets with different color code which makes code block more readable and you code will look nicer.

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

indentrainbowpalettes

13. Indent Rainbow

This extension generate a rainbow palette within the opening and closing tags or element or brackets with different color code which makes code block more readable and you code will look nicer.

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

indientrainbow

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 which workspace is for what, Using this extension one can color the vs code workspace sidebar with multiple color so that the workspace can be identified easily while switching between the workspaces.

This is one of my favourite extension.

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

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 older version of vs code.

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

bracketpaircolorizationtoggler

16. Git Graph

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

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

gitgraph

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 like you can pull, push, commit and also compare codes and a whole lot of feature.

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

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

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 version of code.

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

githistory

19. i18n Ally

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

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

i18n_ally

20. ES Lint

This extension is useful for JavaScript developer and most of the developer use this extension. This extension provides the predefined linting rules which help developers to write less buggy codes and also using this extension developer 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 navigation to .vscode/setting.json file like

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

You can also customize the Linting Rules.
like highlight the console.log statements and whole lot of other stuffs similar to this.

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

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 for get out of Security Vulnerabilities in the code.

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

sonarlint

22. Web Accessibility

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

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

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

wallaby

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 out 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 this extension will highlight that as well.

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

bettercomment

25. CSS Peek

This extension allow peeking to css ID and class strings.
Let say you have given some class name or id to a HTML element and you want to see the styling for that class, you can press ctl 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

css_peek

26. DotENV

This extension is useful for .env syntax highlighting.

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

dotenv

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

auto_import

28. Import Cost

In most of the frameworks we do import of some external or internal libraries or files.
This library shows the import cost means the size of the import in realtime in the line of code where you have imported.

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

import_cost

29. Auto Close Tag

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

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

autoclosetag

30. Auto Rename Tag

This extension automatically rename paired HTML/XML tag, 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

autorenametag

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

javascriptcodesnippet

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

reactjscodesnippet

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

jumpy

34. Path Intellisense

Visual Studio Code plugin that autocomplete filenames.

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

pathintellisense

35. NPM Intellisense

Visual Studio Code plugin that autocomplete npm modules in import statements

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

npmintellisene

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

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

regexpreviewer

38. Stylelint

This extension provides the linting rule for css and scss files.

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

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 shortcut) in VS Code in windows machine.
from here you can create new js file with Quokka see start you JS coding

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

quokka

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 very amazing and very helpful extension

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

projectmanager

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 really look very awesome.

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

vscodeicons

42. VS Code React Refactor

This extension is very helpful for React developer.
Sometimes in a code file, we may have a lot of inner JSX and 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 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 whole other lot of stuffs this extension will take care off.

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

vscodereactrefactor

43. Polacode

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

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

polacode

44. Remind Me

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

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

beautify

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

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

excelviewer

47. Test Explorer UI

this extension provides developers a 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

testeplorerui

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

react_redux_snippet

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

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

bookmarks

50. Profile Switcher

Are you using VS Code for your all development/ coding related stuffs like creating 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

profileswitcher

Conclusion


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

Thank you for reading this so far. This is a brief introduction on 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 a issue.

Hope its 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

Top comments (0)

πŸŒ™ Dark Mode?!

Β 
Turn it on in Settings