DEV Community

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

Posted on • Updated on

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

I have been using a lot of editors and IDE's since I began programming.
Eclipse, Netbeans, Notepade++, Brackets Editor, Sublime Text 2, Sublime Text 3, Webstorm, Atom Editor and probably some more I forgot.

Currently, I'm using Visual Studio Code. According to google trends, it is also the most searched editor. There are some excellent reasons for that.

  • vs code feels fast. It is tough to get vs code to slow down. Usually, it is not the fault of vs code but a poorly implemented extension.

  • File search is super fast. It feels instant. Like there is no wait time.

  • It is lightweight but also has most of the things you need pre-installed. Search files, debugging, basic git GUI.

  • Nice theme support and customization support. You can pretty much change everything in vs code.

  • Excellent extensions! Think of an extension you need? Yeah vs code has that!

Okay, enough of praising. An editor is as good as the user that knows that editor! I assume you have installed vs code.

Theme, File icons, and Font-family

You will look at vs code for several hours every day.

Theme

I don't have the glow enabled and I did not add the custom CSS.

File icons

Simple icons is a minimalistic clean icon theme that has strong colors and clear icons so you can find the file you need even faster.

Font

It looks clean to me and has ligatures support.
My config (we will learn later how to set this config):

    "editor.fontFamily": "Hasklig, Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 15,
Enter fullscreen mode Exit fullscreen mode

Extensions

This should be built-in into every editor! Have you ever had code where you didn't know where your { started and it then } ended?
Then this extension is what you need! It will give every { or ( a different color, so it is easier to look at the code.

This adds diffrent colors to every indent tab or space you do.
This also helps you to navigate your code faster.

.env Files are common these days and are used in a lot of projects. vs code out of the box does not have syntax highlighting support for these file type. This extension adds support for that.

Also, a must-have for every developer that has performance and speed in mind. It shows you how much in kb it would cost you to import this npm module or anything you can import.

This, for me, is a killer feature! Do you connect to your development environment over SSH? Do you use a docker container? Or do you use WSL? This extension makes it extremely easy to use all of them. The best part, even over SSH the search and opening of a file are not slower! This is like magic! I love this extension!

This replaces Intellisense. It is like Intellisense with AI-backed in. The tab-completion shows you the most used functions or parameters that other people use, so you have the most used on the right on top. This makes you more efficient!

This adds direct eslint support into vs code, and it helps you to fix your eslint problems. Also a must-have.

Settings

I'm not using the UI version of the settings interface. I rather like to use the JSON version. To open that press CTRL+SHIFT+P and then type open settings JSON. This will open the settings.json file, and you can edit it like any other JSON file.

Making the cursor stylish

    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": true,
    "editor.cursorStyle": "block",
Enter fullscreen mode Exit fullscreen mode

The first line will make the cursor blink a little bit mor smooth with a fade-in-out animation.
The second line will animate the movement of the course, so it feels a little bit more natural.
The thrid line will change the appearance of the cursor to a block so you can find it more comfortable.
Now your cursor looks way better!

Making the font more readable

    "editor.fontFamily": "Hasklig, Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 15,
Enter fullscreen mode Exit fullscreen mode

As described before I'm using the Hasklig font. Also, I like to have Ligatures; it makes the code more readable. I don't have perfect eyesight. So I like the font to be a little bit bigger.

Copy and Paste code

    "editor.formatOnPaste": true,
Enter fullscreen mode Exit fullscreen mode

We all copy and paste some code from the internet. So this setting will also format it on paste.

Make the vertical guidelines visible

    "editor.renderIndentGuides": true,
Enter fullscreen mode Exit fullscreen mode

If you have a long function with a lot of indentation, this will help you to navigate your code easier.

Disable telemetery

    "telemetry.enableTelemetry": false,
Enter fullscreen mode Exit fullscreen mode

Even when I use vscode-insiders, I don't need to send my data to Microsoft. So I disable that

See tabs that have been modified

    "workbench.editor.highlightModifiedTabs": true,
Enter fullscreen mode Exit fullscreen mode

Unsaved files have that big dot where the x if you did not save. This will also add a line on the top of the tab.

Tipps and Tricks

Using WSL

WSL or windows subsystem for Linux is a fantastic way to run Linux on Windows and have access to the Linux development experience that for me is way better than the one on windows.
I don't want to install git under windows and also not things like nodejs. There is a pretty nice way to integrate the git version of your wsl Linux into vs code. You need to download WSLGIT and then put the exe file in a nice place and add the following line to your vs code settings:

    "git.path": "D:\\dev\\wslgit.exe",
Enter fullscreen mode Exit fullscreen mode

Also vs code has an integrated terminal. You can open that terminal with ctrl+\`. We also want to have a bash in vs code so we can add the following line:

    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\wsl.exe",
Enter fullscreen mode Exit fullscreen mode

This tells vs code to use the default wsl linux shell. In my case, it is Ubuntu, which comes with bash.

Use the command pallet

I often see people clicking around to find settings or other features in vs code. Usually, it is easier just to type what you want. For this vs code has the command pallet. Just press CTRL+SHIFT+P. This will open the command pallet, and you can just type what you want!
If you don't want to press SHIFT, then you can just press CTRL+P and type a >, if this is faster for you. CTRL+P is also useful to find a file you need.

Reopen your latest closed file

Just press CTL+SHIFT+T. This will reopen the latest closed window. You can press this is multiple times to open multiple windows. This also works in your browser if you closed a tab that you don't want to ;)

Delete a complete word

This is not vs code specific, but sometimes I can hear people pressing the backspace key as fast as they can to delete a word. Please just press CTRL+BACKSPACE. This will delete the whole word.

Delete a complete line

Sometimes you want to delete the complete line. Just press CTRL+X. This will delete the currently selected line completely.

The end

Do you use vs code? What is your must-have extension?
Did I miss some crucial settings? Is some shortcut missing? Please comment down below!

Thanks for reading!

Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

Top comments (104)

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 😊 👍