Cool Vscode Extensions for Developers

Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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

vscodetab.png

Or using shortcut

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

Here are some cool vscode extensions to use

  • Prettier

pretter.png

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

vscode-live-server-animated-demo.gif

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

gitpack.png

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 github.com/github/gitignore repository.

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

  • CSS Peek

working.gif

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.

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

  • IntelliSense for CSS class names in HTML

5crMfTj.gif

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

jssnippets.png

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:

snippets.png

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

  • Better Comments

better-comments.png

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.png

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.

THEMES AND ICONS

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

  • Shades of Purple

shadesofpurple.gif

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

theme.jpg

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

  • Vscode Icons

screenshot.gif

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.

Credits

Visual Studio Code Marketplace

You can also reach out to me on Twitter

Osinachi Chukwujama 's photo

Thanks for sharing!

Sy Hung Doan's photo

Awesome list ! I personally prefer to have this with my fav extensions:

Bracket Pair Colorizer 2: This ext places a vertical line to highlight the code block which is wrapped by a pair of brackets

Abiola's photo

Thanks, noted