DEV Community

Cover image for What's an awesome VS Code extension you recently installed?

What's an awesome VS Code extension you recently installed?

Nick Taylor on April 04, 2019

I just came across a simple yet awesome VS Code extension tonight care of Elijah Manor. // Detect dark theme var iframe = document.getEleme...
Collapse
 
edisonpappi profile image
Edison Augusthy

Peacok -- it surprise with colored sidebars

Collapse
 
laurieontech profile image
Laurie

This plugin has been such a revelation for me! It always drove me nuts to have multiple projects open and accidentally be in the wrong one. Especially during the period when I was porting my site from one framework to another and had both projects open. Too similar! I accidentally wrote in the wrong project way too often.

Collapse
 
john_papa profile image
John Papa

That’s great to hear that you like it so much!

Enjoy!

Collapse
 
nickytonline profile image
Nick Taylor

I hear that @john_papa knows a bit about VS Code and web dev. 😉

Thread Thread
 
john_papa profile image
John Papa

Meh. He’s ok.

Collapse
 
john_papa profile image
John Papa

Glad you like it!

Collapse
 
codercatdev profile image
Alex Patterson
Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️ • Edited

🦄 Shades of Purple theme — I'm biased (I made it).

sop

🎉 P.S. celebrating its crossing 1 Million devs.

Collapse
 
hyftar profile image
Simon Landry

God I love it so much! Sadly I prefer using Atom 😭

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

Help me build one for Atom, or I can send in a discount coupon for my VSCode.pro course and convert you to a VSCode user :)

Thread Thread
 
hyftar profile image
Simon Landry

I would be honored to help you convert it for Atom! 😃

Thread Thread
 
ahmadawais profile image
Ahmad Awais ⚡️

Here's the link with VSCode theme and has all the colors in the README. Start there and let me know if you get stuck. github.com/ahmadawais/shades-of-pu...

Collapse
 
nickytonline profile image
Nick Taylor

You should give VS Code another try. 😉

Collapse
 
raisaugat profile image
Saugat Rai • Edited

I use Indent Rainbow with custom settings which I found on a medium blog long ago.
These are the custom settings:
"indentRainbow.colors": [
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,1)"
],

Collapse
 
tombyrer profile image
Tom Byrer

Thanks! I saw that in a screenshot a few weeks ago & have been looking for it.

Collapse
 
dylantientcheu profile image
Dylan Tientcheu

I think it was my post, thank you
You can find it here.

medium.com/free-code-camp/here-are...

Collapse
 
raisaugat profile image
Saugat Rai

I should thank you instead. :)

Collapse
 
jackharner profile image
Jack Harner 🚀

Just curious, why do you have it fade back out?

Collapse
 
raisaugat profile image
Saugat Rai

Actually the settings are a little bit out of order. Thanks for noticing. :). I'll update it.

Collapse
 
frostqui profile image
Diego López

TabNine

  • Indexes your whole project, reading your .gitignore to determine which files to index.
  • Type long variable names in just a few keystrokes using the mnemonic completion engine.
  • Zero configuration. TabNine works out of the box.
  • Highly responsive: typically produces a list of suggestions in less than 10 milliseconds.

marketplace.visualstudio.com/items...

Collapse
 
limark profile image
Mark Li

I am an Angular developer from China.

Here are the Angular extensions which I installed, all of them are awesome.

  • Angular Inline
  • Angular Language Service
  • Angular Snippets
  • Chrome Debugger
  • Editor Config
  • Material Icon Theme
  • npm
  • Peacock
  • Prettier
  • tslint
  • Winter is Coming theme

The Code Spell Checker is helpful for Chinese developer, it can check the source code.

The last one is GitLens, I think you will love it after you install it.

Collapse
 
tombyrer profile image
Tom Byrer

Nice theme; first I heard about out. Yes, GitLens is helpful, especially if more than you touch the code.

Collapse
 
dreamchild7 profile image
dreamchild7

I love winter is coming theme and prettier.

Collapse
 
lucasgdb profile image
Lucas Bittencourt

VS Live Share! It's awesome.

Collapse
 
aaronpowell profile image
Aaron Powell

Yes! Live Share is amazing!

Collapse
 
sndrx profile image
sndrx • Edited

WakaTime it's a recent and useful VS Code extension that I really enjoy. It tracks the time I spend coding every day and it really helps me see the progress that I make.

Collapse
 
k_penguin_sato profile image
K-Sato

I've been very tempted to switch to VS code from Atom🤔.
Sorry, very random.

Collapse
 
glweems profile image
Garrett Weems

do it. no brainer

Collapse
 
jackharner profile image
Jack Harner 🚀

Like everyone else is saying, do it! I started with Atom, Switched to Sublime text, and finally landed on VS Code. The built in git integration, and the built in terminal are life savers.

Collapse
 
vier31 profile image
Jan Schröder • Edited

The build in terminal brought me to VS code. There was an extension for that in atom, but it was so sluggish.

Collapse
 
nickytonline profile image
Nick Taylor

Collapse
 
obahareth profile image
Omar Bahareth

What I imagined Atom being as a text editor from Github is what made me stick to Atom for so long. Last year I realized that VS Code is the one realizing that vision. The ecosystem, the features, the DX (Developer Experience), and the performance are all what I imagined Atom eventually becoming but Visual Studio Code got there faster.

Collapse
 
tombyrer profile image
Tom Byrer

Unless there is a specific Atom plugin you need that is not available for VSCode. it is more than worth the effort.

Ecosystem is better, & since MicroSoft bought GitHub, I would not be surprised if Atom is back-burnered.

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️ • Edited

Do it. I can help! Shameless plug → VSCode.pro

Collapse
 
highcenburg profile image
Vicente G. Reyes

Do it! Vs code starts up a gazillion years faster than atom😂

Collapse
 
vycoder profile image
yev

Not my recent but I always add it to all IDE I use: Power Mode. It's nothing useful but a visual flair (will probably even lag your system if you enabled all) but it makes me feel like a rockstar (even though I'm actually not).

Collapse
 
jeffblanco profile image
JeFFBlanco

Great topic! 😎

Some nice hidden gems:

Extension Desc
JSON Tree View Handy way to navigate beefy JSON
Markdown Table Format Markdown table formater
Calculate Great for scratchpad / notes
Git Lens Super charged Git functionailty
Highlight Bad Chars Very helpful for pesky encoding issues
Sort Lines Sort lines of text
Unique Lines Keep unique lines of text; remove dupes
Time Converter Converts various timestamps
Base 64 Base64 encode/decode
Collapse
 
cubiclebuddha profile image
Cubicle Buddha

if you like calculate, you'll love Quokka

Collapse
 
adambraun profile image
Adam Braun • Edited

This isn't really an extension, but I use it very often.
I was looking for something equivalent to Sublime's panel focus, and there's a key map option, but it's not set to any key by default:
View: Maximize Editor Group and Hide Side Bar (shift + alt + enter)
View: Reset Editor Group Sizes (ctrl + shift + alt + enter)

Maximized editor group

Collapse
 
obahareth profile image
Omar Bahareth • Edited

Read Time

It shows an estimate for how long it takes to read your Markdown.

EDIT
Picture is taken from this tweet (I hope that's ok)
mobile.twitter.com/John_Papa/statu...

Collapse
 
zooly profile image
Hugo Torzuoli • Edited

Using Shades of Purple theme, with Material Icon, looks awesome! ESLint, Vetur and Angular Snippets for the programming part.

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

🦄 Shades of Purple :) woohoo!

Collapse
 
zooly profile image
Hugo Torzuoli

You did an awesome work on this theme!

Thread Thread
 
ahmadawais profile image
Ahmad Awais ⚡️

That's very kind of you to say! 🙌

Collapse
 
nickytonline profile image
Nick Taylor

Didn't your theme hit like 1 million downloads or something with about 1/2 million installs? 💯👏

Thread Thread
 
ahmadawais profile image
Ahmad Awais ⚡️ • Edited

🎉🎉🎉 Yes. So happy about it. And my VSCode Power User course hit 5,000 devs. Both huge milestones for a full-time open source developer like me. :)

Collapse
 
themafro profile image
Matthew Francis

vscode-spotify

Lets you control Spotify from within VS Code by adding controls and currently playing in the status bar.

Collapse
 
kosich profile image
Kostia Palchyk

Vim
github.com/VSCodeVim/Vim

tutorial1

tutorial3

Not recently though, been using it for years 🙂

Collapse
 
cubiclebuddha profile image
Cubicle Buddha

I use vscode-jest a lot these days so I can do some TDD and get the quick feedback I want. And if I want even faster feedback I use quokka since it lets me try out libraries quickly. TypeScript covers me with the documentation, but sometimes you just need to screw around (like when I'm trying out js-joda (which is awesome btw) )

Collapse
 
yemolai profile image
Romulo G Rodrigues

I was amazed by the VSCode Python Debugger, you can run Python scripts more easily with breakpoints, variable analysis and a huge control and great data visualization, it is just too good to be ignored.

Collapse
 
espenbjorkeng profile image
Espen Bjørkeng

relative-path.

Press ctrl + shift + u and write parts you know about the path and/or the name of the file you want to import, and relative-path resolves the path for you.

Collapse
 
ctimmerman profile image
Cees Timmerman

My current extensions according to "code --list-extensions":

CoenraadS.bracket-pair-colorizer-2
cssho.vscode-svgviewer
eamodio.gitlens
esbenp.prettier-vscode
Gruntfuggly.todo-tree
HookyQR.beautify
LaurentTreguier.vscode-simple-icons
marcostazi.VS-code-vagrantfile
mechatroner.rainbow-csv
ms-python.python
msjsdiag.debugger-for-chrome
oderwat.indent-rainbow
richie5um2.vscode-sort-json
sysoev.language-stylus
VisualStudioExptTeam.vscodeintellicode
voldemortensen.rainbow-tags

Collapse
 
nickytonline profile image
Nick Taylor

Thanks for sharing!

Collapse
 
gohulk profile image
Aravind Kamarajugadda

I am using nordic which is super cool

Collapse
 
gloveboxes profile image
Dave Glover

WSL workspaceFolder - marketplace.visualstudio.com/items.... Maps your Windows Directory to a WSL mount pathname. Very useful for integrating with Linux tools with your Visual Studio tasks. For example, using rsync to do a delta file copy to Raspberry Pi for .NET Core projects.

"windows": {
"command": "cmd",
"type": "shell",
"args": [
"/c",
"\"dotnet publish -r linux-arm -o bin/linux-arm/publish",
"${workspaceFolder}/${workspaceFolderBasename}.csproj\"",
"&&",
"bash",
"-c",
"\"rsync -rvuz ${command:extension.vscode-wsl-workspaceFolder}/bin/linux-arm/publish/ pi@192.168.0.150:/home/pi/dotnet/${workspaceFolderBasename}\""
],
},

Collapse
 
flozero profile image
florent giraud

cyberpunk theme ˆˆ

Collapse
 
whobeu profile image
Robert G. Schaffrath

In my VS Code environment I have these extensions installed:

Bookmarks
Bracket Pair Colorizer 2
Color Highlight
ESLint
indent-rainbow
Lorem Ipsum
Rewrap
TODO Highlight
TODO Parser

For theme, I created one for myself merging features of Dark+, Neon Vommit (misspelled by developer), "Deepdark Material Theme | Full Dark Version" and some additions of my own that I call "Neon Vomit (Deep Dark)". I deploy it as a private extension to my various computers via a ZIP file.

Collapse
 
tombyrer profile image
Tom Byrer

+1 Bracket Pair Colorizer 2

Collapse
 
ahmadmustafaan1 profile image
Ahmad Mustafa Anis

Prettier is very useful for python users

Collapse
 
hugoliconv profile image
Hugo

which extension are you using to have those arrows in the editor?

Collapse
 
nickytonline profile image
Nick Taylor

Just add this to your VS Code settings:

"editor.renderWhitespace": "all",
Collapse
 
hugoliconv profile image
Hugo

Thanks, it worked! but it shows dots instead of arrows

Thread Thread
 
nickytonline profile image
Nick Taylor

I believe dots are for spaces and tabs are represented by arrows. But it also might be my theme choosing to style it that way.

Collapse
 
nyanafell profile image
Gael Roussel

Addons I really like:

  • Project Manager
  • Todo+ / Todo Highlight
  • Tralling spaces
  • Rainbow brackets

btw, that addon do you use for the colored line ?

Collapse
 
itsmanojb profile image
Manoj Barman

Can anyone suggest extension for automatic fold folding, like npp? the existing folding doesn't work if you reopen the file

Collapse
 
simranz profile image
Simranjit Singh

EasySass.. it's amazing.

Collapse
 
codercatdev profile image
Alex Patterson

Git Graph, now I don't have to jump into git kracken when things get dicey

marketplace.visualstudio.com/items...

Collapse
 
nickytonline profile image
Nick Taylor

Thanks for sharing! Didn’t know about this one. I usually use glog in zsh, or fork for a GUI.

Collapse
 
samuelabreu profile image
Samuel Abreu

marketplace.visualstudio.com/items...

Excelent to try small snippets

Collapse
 
perigk profile image
Periklis Gkolias

Pretty damn nice. Thanks for sharing

Collapse
 
aaronpowell profile image
Aaron Powell

Because I'm often doing F# development, Ionide!

Collapse
 
alfredothe2ndkantox profile image
Alfredo Roca

EditorConfig for VSCode

Collapse
 
begroff profile image
Brett

For when you need it, I just installed SFTP and it works great!

marketplace.visualstudio.com/items...

Collapse
 
bobnudd profile image
Ash Grennan

Better Comments is fantastic for making particular comments more apparent.

Also Bracket Pair Colorizer, couldn't live without it.

Collapse
 
jsardev profile image
Jakub Sarnowski

Remote Development!

Collapse
 
vuong profile image
Vuong

My favourite extensions:
Settings Sync
Code Runner
Bitbucket and Jira (Official)
Path Intellisense
GitLens