Cool Vscode Extensions for Developers

Cool Vscode Extensions for Developers


7 min read

Featured on

Visual Studio Code is a code editor with support for development operations like debugging, task running, and version control. A good number of developers use Vscode as their code editor. One of the coolest features ๐Ÿ˜Ž of vscode is the Vscode Extension. It allows you to add tools, languages, debuggers, and much more to your code editor. With the vscode extension, developers write faster, cleaner, and more consistent code.

To get started is quite simple, we just have to install the extensions on our editor from the extensions panel


Or using shortcut

for Windows - Ctrl + Shift + X
for  Mac -  Cmd + Shift + X

Here are some cool vscode extensions to use

  • Prettier


Prettier is a strict code formatted. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. It supports different programming languages like javascript, typescript, GraphQL...

  • Live Server


Live Server, this is one of the coolest vscode extension I know ๐Ÿ˜Ž. It enables you to view your site live with a click. This can be down by clicking to go live from the status bar to turn the server on/off Or Hit (for windows) alt+L, alt+O to Open the Server, and (alt+L, alt+C) to Stop the server, (for MAC) cmd+L or cmd+O and cmd+L, cmd+C]

  • Git Extension Pack


Git Extension Pack , It contains some of the popular git extensions. The git extensions in the pack currently are:

Git History - This gives access to viewing git logs, file or line history.

GitLens - GitLens is one of the most powerful git extension, It helps you to visualize code authorship at a glance via inline Git blame annotations and code lens, seamlessly navigate and explore the history of a file or branch, gain valuable insights via powerful comparison commands, and so much more.

Gitignore - Support for .gitignore files. Lets you pull .gitignore files from the repository.

Open in GitHub / Bitbucket / - Jump to a source code line in Github / Bitbucket / VisualStudio

  • CSS Peek


Css Peek saves the stress of switching between the HTML and CSS files. The extension supports all the capabilities of symbol definition tracking but does it for css selectors (classes, IDs, and HTML tags). This includes:

Peek: load the css file inline and make quick edits right there.


Go To: jump directly to the css file or open it in a new editor.


Hover: show the definition in a hover over the symbol

  • IntelliSense for CSS class names in HTML


CSS Intellisense is an extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element. This is very helpful in cases where we tend to forget the class names and it supports languages like HTML, Razor, PHP, Laravel (Blade) , JavaScript ...

  • Javascript (ES6) Code Snippets


Javascript (ES6) Code Snippets,this extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript). Some of the snippets are:


This extension makes it easier for syntax that is hard to remember.

  • Better Comments


Better Comments will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into:

  • Alerts
  • Queries
  • TODOs
  • Highlights Any other comment styles you'd like can be specified in the settings. The extension is supported by a large number of languages.
  • CodeSnap


CodeSnap extensions allow developers to take beautiful screenshots of your code in Vscode, easily and fast.

It can be done by -

  1. Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.

  2. Select the code you'd like to screenshot.

  3. Adjust the width of the screenshot if desired.

  4. Click the shutter button to save the screenshot to your disk.


This helps to make your vscode pleasing and comfortable to use.

  • Shades of Purple


Shades of Purple ๐Ÿ’œ, this is one of my best vscode themes. It combines different shades of purple together to make the code editor look more beautiful.

  • SynthWave '84


SynthWave '84, a color theme to satisfy your neon dreams. It gives a glow effect to the code.

  • Vscode Icons


Vscode Icons, This extension gives a unique icon to each folder and files.

These are some main Vscode extensions to have as developers for you to be more efficient. If you have any other one to add, Kindly mention it in the comment below.


Visual Studio Code Marketplace

You can also reach out to me on Twitter