9 VS Code Plugins That Will Save You Time

Here is a list of several Visual Studio Code extensions to improve your development experience, your productivity and the quality of your code!

Note: all of these extensions are installed on my VS Code and I use them regularly!

Productivity

GitHub Copilot (Autocompletion / Paid)

Probably the most well-known extension on this list, Copilot is a code completion (and more precisely generation) extension, based on artificial intelligence trained on open-source code repositories hosted on GitHub.

In addition to the extension, you'll need a subscription of around $10 per month to use it (with a free 30-day trial)

Link: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

ErrorLens (Error display)

Seeing a word underlined in red, hovering over it, waiting for the error to appear, etc... It doesn't sound horrible, but multiplied by dozens of errors every day, it's a huge productivity loss.

ErrorLens lets you automatically display an error right after the problematic code, to improve your productivity!

Link: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

Code Spell Checker (Spell checking)

Spell checkers are present in all classic editors (Word, Google Docs, etc...) but not in the editor where we spend the most time...

Well, now that's the case!

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

Note that you'll need an additional extension for French

Peacock (Multi-window)

If you're used to having several VS Code windows open at the same time (especially if you do both front-end and back-end work), it's sometimes easy to get the wrong window.

Peacock lets you assign a specific color to each editor to help you find your way around!

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

SVG (Preview)

A tool to preview SVG files directly in VS Code, with several options for the background color. Very handy!

Link: https://marketplace.visualstudio.com/items?itemName=jock.svg

Markdown Preview GitHub Styling (Preview)

Previewing .md files is nice, but if on top of that you can get the exact rendering of a README file as it will appear on GitHub, that's even better, and that's what this extension does.

Link: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles

Accessibility

WebHint (Linter for the web)

A linter based in particular on Mozilla's recommendations regarding web accessibility. You'll never miss a missing alt attribute on an image again!

Note that this plugin currently doesn't work with VueJS files (.vue).

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

TiffColors (Theme for colorblind users)

If, like me, you're colorblind (specifically deuteranopic), and syntax highlighting isn't always optimal, this VS Code theme should solve the problem!

Link: https://marketplace.visualstudio.com/items?itemName=tiffnix.tiffcolors

Languages and frameworks

Tailwind CSS IntelliSense (Autocompletion)

Intellisense plugins are truly a must-have for any language, but also for TailwindCSS!

Link: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Volar (Autocompletion/Parsing/VueJS)

Volar is THE recommended plugin for working with VueJS (and Nuxt)!

However, be careful, if you're still on Vue2, you'll need a special configuration (available in the plugin's documentation).

Link: https://marketplace.visualstudio.com/items?itemName=Vue.volar

To try out

Quokka.js

Quokka lets you write JavaScript, and view the result of the code execution directly from the editor, without having to do anything else.

If you're just starting out with JavaScript, this can help you, but you can do without it if you already have the basics down.

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