DEV Community

Cover image for 💻My Web Development VS Code Settings, theme, Extensions, tips and tricks

💻My Web Development VS Code Settings, theme, Extensions, tips and tricks

Michael "lampe" Lazarski on July 21, 2019

I have been using a lot of editors and IDE's since I began programming. Eclipse, Netbeans, Notepade++, Brackets Editor, Sublime Text 2, Sublime Tex...
Collapse
 
masticore252 profile image
Albert Vásquez • Edited

Great guide!

here is another tip: to delete a line on VS Code you can also use ctrl+shift+k

ctrl + x cuts the line, this might be a problem if you have text in your clipboad that you want to paste later, which happens to me often enough to make a change to a 3-key shortcut

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

There are so many more shortcuts. Maybe I should write just a post about how to use vs code with keyboard shortcuts 🤔

Collapse
 
nazmifeeroz profile image
Nazmi

or dd in Vim Mode!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

yeah, vim mode is in vs code by default!

My problem is I never got used to it :)

Collapse
 
unknownfea profile image
Daniel Millier

Great tips! My top extension would be AutoSync. Makes a backup gist of your settings & extensions on GitHub, so it's easy to download to a fresh install of VS Code!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah, I used that too.

The interface and the UX of that extension is just a pain for me 🤣.

I would love to see something nicer and easier to use.

Collapse
 
crewsycrews profile image
🎲Danil Rodin🎲

It's already got user friendly interface with last updates, check it!) You won't be disappointed. Creating a new backup on clean installation can be done in two clicks

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Okay, I will then check it out!

Collapse
 
jodyshop profile image
Waleed Barakat • Edited

Yes, I have tried too many of editors like you did! some of it needs a decade to load and the other's isn't completely free or comes with limited features.

The vscode has everything plus super fast including unlimited free addons from worldwide web developers.

I removed all old editors and installed vscode and it really the best of them all.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah exactly.

At first, I was skeptical because it comes from Microsoft but they are changing and I really like that Microsoft open sources more and more apps.

Collapse
 
ryanrocketsoftware profile image
ryan-rocketsoftware

This is an interesting insight into how people view Microsoft. I started my career out with Classic ASP then transitioned to .NET then in 2012 I went to Node.js, Angular and eventually React.

Coming from .NET I used VS Code the first day it was offered in Beta and never left. Even though it progressed in performance and extensibility over the years I’ve always thought it was better then Sublime and Atom IDE for JavaScript, CSS and HTML development.

Microsoft in my mind has done one thing better then all of its competitors over the past 20 years which is build amazing tools for software development especially in the IDE space. All versions and iterations of Visual Studio over the years have been leaps and bounds over any of its competitors starting from its first release of Visual Studio 97 also known as Visual InterDev which I started out with up until now with VS Code.

Besides that they fail at almost everything else unfortunately which could be a blog post in itself in its attempts at success in every business sector which led to historical failures over the years.

Great article by the way. I had a bad experience working with WSL on my windows laptop which I needed to work on IBM carbon component library so I just decided to use my Mac instead which is my preference anyway. I’m starting to see a lot of articles and posts out there around WSL so it’s definitely growing in popularity.

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

The thing is a few years ago I was an Arch Linux User and at work, I'm still a Linux user. Installing packages and software and dependencies were just so much better in Linux and if you picked the right hardware you had no problems installing Linux at all.

Bash or ZSH or whatever terminal you are using was just so much better.

Also, performance over Windows the same laptop was like night and day!

Windows was just slow and sluggish.

I never used ASP.net or Visual Studio.

I still prefer open-source then closed source software.

WSL2 will be amazing! It is a fast Linux VM that has almost zero overhead and the tooling for it gets better and better!

and Thank you :)

Collapse
 
petecapecod profile image
Peter Cruckshank

I've got to have Code Spell Checker, and Auto-Close & Auto-Rename.
Plus I've been using Fira Code iScript as my font. And I'm loving it It's on GitHub at Fira Code iScript

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Looks nice I will try it!

Collapse
 
wouterjoosse profile image
Wouter Joosse

I find GitLens to be an excellent extension. Very useful to see the git history per line of code.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah at work I have also installed GitLens but it is not a must for me. I find it helpful when you work in teams and you want to see who to ask if you don't understand something.

For my pet projects I usually just use the terminal for git commands :)

Collapse
 
wouterjoosse profile image
Wouter Joosse

Yeah, for pet projects where you're the only one writing code it might be overkill :)

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

but git blame is fun :D

Collapse
 
jonathanboshoff profile image
Jonathan Boshoff

Hey man, just came across this article few days ago, great tips. Just finished installing everything. One quick thing, sorry if I missed it, is it a good idea to plug your IDE directly into a git project? How can you do so with VS Code?
Thanks

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Hey, nice to hear that.

I don't fully understand what you mean with plug your IDE directly into git?

I use the command line but still, I see the changed files and new files in vscode.

A lot of people are using Git Lens its an extension for vscode that integrates git even more into the IDE.

In the end do what is best for you and what feels the best for you :)

Collapse
 
jonathanboshoff profile image
Jonathan Boshoff

Yeah sorry for the vagueness, wasn't quite sure how to put it.

Basically just something that shows what files/lines are changed directly in your editor, then some basic git commands too. I think that does clear it up a bit. I'll check out Lens and see if it does what I need.

Thanks for the help :)

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

But this is already in vscode without any extension :)

Collapse
 
zachweishar profile image
Zach Weishar

Nice write up, there are some nice tips here.

One thing I love about VS Code is the built-in git integration, specifically the file diff interface. Sure, I could do this on the command line, but having a UI for it makes it so much easier!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

yeah the diff tool is actually pretty nice :)

I don't use often git diff but when I do I use the vscode ui for that

Collapse
 
aaronpowell profile image
Aaron Powell

I found issues using WSL as the primary shell in Code because it overrides the way commands are executed from tasks and often it'll think it's executing the Windows version but get a Linux version (or vice versa). Because of this I've pretty much ditched running anything in Code on Windows and do it entirely via Remote + WSL.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah, I don't have any dev tools installed on windows directly I only use WSL or remote!

I also don't want to go back to windows for development. At least in the current state.

Collapse
 
clintongallagher profile image
Clinton Gallagher

VSCode has finally graduated into the bigtime. It is now a buggy FUBAR app that will not rename or delete files.

Collapse
 
drawcard profile image
Drawcard

Have you tried renaming / deleting files after disabling all your extensions? I doubt VSCode would have released such a major bug in their IDE, it's more likely an issue to do with a poorly written plugin.

Collapse
 
clintongallagher profile image
Clinton Gallagher

No I haven't disabled all of the extensions I have loaded. I suppose that's a consideration.

Collapse
 
shikkaba profile image
Me

Never experienced this.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Never had this problem. Even with shaky ssh connection it works good 😊👍

Collapse
 
beckibloom profile image
beckibloom

Wow! I’ve been waiting for an article like this- I am still learning all the cool things VS Code can do. Can’t wait to implement some of these!!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Nice to hear! Thank you!

Are there any topics about vs code you would like to hear more about?

Collapse
 
beckibloom profile image
beckibloom

I'd love to know about different ways you might go about getting really efficient when working between several open windows - for example, working in VS Code alongside Postman, Chrome, debugging window, etc. It can get to be a lot! Someone must have a better system of making that easier! Lol!

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

That's a good question!

ALT+TAB and ALT+SHIFT+TAB.

To switch around the windows.

But maybe someone also has a better method.

People on OSX use different desktops but that's for me the same as using ALT+TAB.

Instead of postman I use REST Client

Thread Thread
 
beckibloom profile image
beckibloom

Cool, thanks for sharing!

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Your welcome 😊 👍

Collapse
 
adityapadwal profile image
Aditya Padwal • Edited

That's great. My VS Code takes around 5 mins to settle and load extension. Even the intellisence doesn't work that great. I like VS code though. I use VS code for Python and JS apps development. Can you suggest something over here ?

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

5 Minutes?
How many extensions do you have? xD

You can load extensions by workspace.

Or do you need all of them every time?

Collapse
 
craigaholliday profile image
Craig Holliday

Great post! I’m definitely going to try these out later 👌👌

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you!
Tell me what you liked the most and what you didn't liked?

Collapse
 
craigaholliday profile image
Craig Holliday

The cursor style is subtle but great!

I'll be trying Synthwave theme though I've been using and enjoying Night Owl for a while now.

Disabling telemetry is smart. Didn't know this was an option and I always like sending my data 👍

I'll have to check out Remote Development sometime but I don't do much remote file editing with any of my projects.

Also mentioning ESLint I use WesBos' config and I can't give it enough praise.

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Usually I add eslint to the project and then go with the style of the project. 😊👍

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio

Here my current setup.

demo image

demo image
You can try extension that i use here :
Gitlens
indent-rainbow
Visual Studio IntelliCode
ES6 Snippets
Vetur
Relative Path
Bracket Pair Colorizer 2
Live Server
Path Intellisense

REST Client

And for theme and font, i'm using Mayukai Theme and Iosevka Mayukai Font

Collapse
 
pantsme profile image
Antonio Savage

I'd like to add that ctrl+X is actually the keyboard shortcut for Cut. You can then use crtl+V to paste the line you just cut somewhere else.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah, but in vs code if you don't have anything selected it will cut the complete line!

Collapse
 
pantsme profile image
Antonio Savage

ahh cool, good to know.

Collapse
 
tabnine profile image
Tabnine

Great article! Check out Tabnine AI code completions. It uses GPT-2 based models to predict the exact code the developer has intended to type and saves thousands of keystrokes. Works miraculously with VS Code and extremely boosts productivity

Collapse
 
devpaps profile image
Lars Jönsson

Super! I've added a lot from your list! Thanks you. :)

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Your welcome :)

Nice to hear to that it was useful for you :)

Collapse
 
tarifa10 profile image
tarifa-man

hello dear Michael
i am happy to read your text - i like it very much. Can you give us more hints to run VSCode or VSCodium on mx-linux:

cf : I use VSCode daily and it is widely used, i am shocked it is not in stable repo. Please add VSCode to the package list.

forum.mxlinux.org/viewtopic.php?f=...
we look forward to hear form you -regards tarifa

Collapse
 
rudirod profile image
RudiRod

I also mainly use Visual Studio code. And when something doesn’t work out for me, or any questions arise regarding web development in general, then I look for answers on such blogs - softwarereviewjournal.com. By the way, I highly recommend reading it, this information will be useful for both beginners and experienced web developers.

Collapse
 
mensdarko profile image
Darko Mens

Thanks for sharing.
I have just started coding on my own and hope to get more help from you.
Just started with HTML/CSS
Will welcome any help from u.

Collapse
 
umutcnkus profile image
Umutcan Kuş

I like the cursor!
Thanks

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thanks!
For me it's just more clear where the cursor is.
So I don't have to search for it on a big screen :D

Collapse
 
diewahrekeule profile image
Dominik

Really cool Guide! Thanks👌

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thanks :)

Collapse
 
carlosavellar profile image
carlosavellar

Very useful.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thenk you.

Collapse
 
jetdragon profile image
jetdragon

very useful, thank you

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you very much!
Have a nice day :)

Collapse
 
adeamos83 profile image
Ade Amos

Super useful article. Definitely implement these tips into my Dev environment.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Nice to hear!

Have a fantastic day

Collapse
 
toritsejufo profile image
Faith Odonghanro

Nice article. Some really beautiful settings, thanks.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

thank you for your nice comment :)

Collapse
 
juanitomint profile image
Juan Ignacio Borda

Nice article! Don't forget git graph!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

I'm old school when it comes to git. I use it in the terminal 🤣

Collapse
 
adusoft profile image
Geofrey Aduda

I love it

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you very much :)

Collapse
 
maciejcieslik profile image
Maciej Cieslik

Ctrl+Shift+P == F1 :)

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

yeah that works too

For me its just faster to pres CTRL+SHIFT+P :D

Collapse
 
thiagoaraujo84 profile image
Thiago Araujo

Great tips. Thanks.

I am using Fira Code font (github.com/tonsky/FiraCode). It is better to view math symbols and operators.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Fira is very popular.

But I had it to long :D

I needed something new!

Collapse
 
akram profile image
Akram Saouri

Thank you man, great setup

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

No, Thank you :)

Collapse
 
vagoel profile image
Varun

Was not using "Import Cost" before.... I loved it. Great post

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah it makes you think twice :)

Collapse
 
murd0c profile image
murd0c (he/him)

The editor configuration is very useful! Great tips!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you very much 😊

Collapse
 
peterwitham profile image
Peter Witham

Fantastic list, I only recently discovered the Bracket color extension and import cost, super useful.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Indeed they are!
And thank you 😊

Collapse
 
aleedhillon profile image
Ali A. Dhillon • Edited

Thanks man, I really love all these customizations and have applied almost all of them to my VS Code. One of the best thing was to smooth and animate the cursor.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Right? The smooth animations are just way more pleasant to look at then the default :)

Nice to hear that you really liked it!

Collapse
 
bybruno profile image
Bruno A.

Wow, I use many of these extensions and settings quoted in the article. There are some that I did not know and will be useful to me. Thanks for sharing.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Your welcome!

Which on you didn't know?

Collapse
 
dietertroy profile image
Troy

Love that theme, almost as much as .. SOLARIZED DARK <3

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

But just almost 🤣🤣

Collapse
 
rakeshkv profile image
Rakesh kv

Nice post. I tried few its really good
Thank you

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you :)
I really appreciate it that you liked it :)

Collapse
 
drewroberts profile image
Drew Roberts

Thank you. I needed something like this.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Your welcome!
Is something missing?

Collapse
 
_ronini profile image
Ronnie Villarini

I downloaded simple icons! I was growing tired of material icons. I use most everything else on this list!

Thanks for sharing 😀

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you and your welcome!

Have fun with simple icons!

Collapse
 
fresquer profile image
Fernando Pulsa

The CTL+SHIFT+T blows my mind!! Thank you!!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

I learned it by accident!

Usually, I use that in browsers and then vs code was focused by accident!

Collapse
 
markus_falk profile image
Markus Falk • Edited

If you are interested I made a series of extension packs that you can choose from for web development with JS, TS or Angular: marketplace.visualstudio.com/publi... 🤓

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Uhh nice!

I always forget that you can create these extension packs!

Good work!

Collapse
 
whatjackhasmade profile image
Jack Pritchard

This is a dope setup, thanks for sharing!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you very much :)

Collapse
 
codeella profile image
Dmitrii Kulbaka

Best VS Code configuration. I liked the color scheme especially. My eyes are resting now. I have been looking for something similar for a long time. Thank you so much.

Collapse
 
bhanu1776 profile image
Bhanu Sunka

I found one really cool vscode theme named Jellyfish-x-retro 🚀🚀
Do checkout: marketplace.visualstudio.com/items...

Collapse
 
morningstar2004 profile image
Armstrong Omhonria

i love your post
it really makes my vs code look proffesional
THANK YOU!!!

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah, they announced it once as far as I know :D

I think someday it will be the default one.

 
lampewebdev profile image
Michael "lampe" Lazarski

yeah, this also a great one!

I used it while developing API endpoints in nodejs :)