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
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
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
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
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 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
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
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 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
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 extensions 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 extensions 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 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
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
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
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
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
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
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
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
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"]
}
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
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
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
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 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
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
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 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
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
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
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 autocomplete filenames.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
35. NPM Intellisense
Visual Studio Code plugin that autocomplete 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 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
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
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
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
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
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
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 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
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 development world.
https://marketplace.visualstudio.com/items?itemName=alefragnani.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
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)