My Top Ten Visual Studio Code Extensions 2020

My list of VS Code extensions I use in my daily development workflow.

I’ll detail the package name to search for in the VS Code extensions tab.

In no particular order…

Path Intellisense

Really useful for getting file names in code, I use it all the time for images in Markdown files.

Search for christian-kohler.path-intellisense in the VS Code extensions tab.

GitLens

Great Git integration that let’s you quickly view a files git history in the editor.

Search for eamodio.gitlens in the VS Code extensions tab.

Prettier

The invisible formatting deity that rewards us for not writing incorrect code by formatting with ease and grace.

Be sure not to anger Prettier or your code will remain unbearable to read.

Search for esbenp.prettier-vscode in the VS Code extensions tab.

Auto Close Tag / Auto Rename Tag

Two extensions, that should be one that do a great job of adding closing tags for your html and jsx.

Search for formulahendry.auto-close-tag and formulahendry.auto-rename-tag in the VS Code extensions tab.

vscode-styled-components

This is really handy as I use styled components a lot and it gives syntax highlighting and IntelliSense for styled-components.

Search for jpoissonnier.vscode-styled-components in the VS Code extensions tab.

Code Spell Checker

This! Without this my Markdown would be very painful to read, there are other spell check extensions out there but I have found this one by far the most straightforward to set up and get going with.

To correct a spelling you’ll get the squiggly line warning, put the cursor on the word and use Ctrl+. to get the correction suggestions.

Search for streetsidesoftware.code-spell-checker in the VS Code extensions tab.

MDX

Another syntax highlighting extension this time for MDX with bracket matching for MDX (JSX in Markdown).

Search for silvenon.mdx in the VS Code extensions tab.

Code Time

Code Time is a great way for you to visualise time spent on projects with a detailed summaries of projects and time spent on each.

Search for softwaredotcom.swdc-vscode in the VS Code extensions tab.

WakaTime

Much the same as Code Time with a premium tier that offers unlimited dashboard history and the ability to export your coding activity.

Search for WakaTime.vscode-wakatime in the VS Code extensions tab.

Color Highlight

This will display the colour of hex codes in you code. nice to have.

Search for naumovs.color-highlight in the VS Code extensions tab.

Night Owl

A beautiful, accessible, understated theme for VS Code.

Search for sdras.night-owl in the VS Code extensions tab.

Honourable Mentions

Rouge Theme

Another really nice fully featured theme with italics!

Search for josef.rouge-theme in the VS Code extensions tab.

DotENV

Another syntax highlighting extension, this time for .env files.

Search for mikestead.dotenv in the VS Code extensions tab.

Material Icon Theme

A massive fully featured icon set for VS Code, still the only one I have found that shows the Gatsby config and Vercel now.json files with their own icon.

Search for PKief.material-icon-theme in the VS Code extensions tab.

Visual Studio IntelliCode

IntelliSense code completion for some parts of my workflow, if I used TypeScript more this would probably be a really useful extension.

Search for VisualStudioExptTeam.vscodeintellicode in the VS Code extensions tab.