Hello! My name is Jordan and I’m a software engineer on our Design Systems team at Gusto. Since joining Design Systems I’ve found it super helpful to use VSCode especially when working with React and Typescript. I scoured the internet for the best VSCode tips and tricks engineers were using and I came up with 7 high impact tips to speed up your workflow. Before jumping in, one thing to note is that I have been primarily using these for a React and Typescript workflow; so extensive testing hasn’t been done on other languages, but these settings have been super helpful for me.

Let’s get started!

Auto format, import, and fix issues on save and paste

One thing we always are needing to do is format our code, fix our imports, and fix lint issues that our editor may be complaining about. We can handle all of these with cmd + s by just tweaking a few settings.

Add the following to your settings.json :

"editor.codeActionsOnSave": {   
    "source.addMissingImports": true,   
    "source.fixAll": true,
},
"editor.formatOnSave": true,"editor.formatOnPaste": true,

Now all you need to do is hit cmd + s when you have any lint issues to fix, imports missing, or need to format your code.

Pre-populate command palette and file search with last run command

One issue I would constantly run into is typing something into command palette or file search, going to that file, then needing to type in a similarly named file all over again. This setting fixes that by pre-populating your last search for you.

Add the following to your settings.json:

"workbench.commandPalette.preserveInput": true,
"workbench.quickOpen.preserveInput": true,

Here’s an example gif of what it looks like:

Go to spec file

One of my favorite features about Jetbrains IDE’s is the ability to use a keyboard shortcut to jump to the associated spec/test file. VSCode doesn’t support this out of the box, but by downloading the “Go to spec” extension you can now use cmd + shift + t to jump to the spec file and back.

Here’s how it looks in practice:

Auto save

One of the biggest things you can do so you don’t need to constantly hit cmd + s all the time or be confused why you aren’t seeing the changes you made is turn on auto save. This one is quick and easy to add!

Add the following to your settings.json :

"files.autoSave": "afterDelay",

Hungry delete

One thing I was used to with previous editors was being able to hit backspace/delete at the edge of the line, and it knowing to delete that line without needing to hit backspace up to the line gutter. Again, this isn’t possible with VSCode out of the box, but is with the “Hungry delete” extension.

Here’s how it looks in practice:

Limit the number of active tabs

If you’re like me, you probably have a ton of tabs open right now; in your browser or in VSCode. One thing I kept having to deal with in VSCode was cleaning up my tabs and searching through all of them; and there was a lot.

You can limit the number of tabs and allow them to wrap with these settings in settings.json :

"workbench.editor.limit.enabled": true,  
"workbench.editor.limit.value": 8,
"workbench.editor.wrapTabs": true,

Add an icon theme to your sidebar

The last one is a fun one. Let’s face it, the default VSCode sidebar can be pretty bland and hard to quickly tell what folder you’re in and what types of files are in there. We can spice things up and make it easier to read at a glance with an icon theme.

For a reminder, this is what the default explorer looks like:

My two favorite icon themes are Nomo Dark Icon Theme and Material Icon Theme.

With one of these icon themes, you are sure to be able to quickly parse through the explorer at a glance and look like a pro while doing it 🕶️.

If you are interested in more tips and tricks or full commented explanations to all of these settings, check out the full Github gist here.

Thanks everyone for reading!

Feel free to reach out to me on Twitter for any questions.

If you liked this post, you may also be interested in my post on supercharging your terminal productivity.