9 Marvelous VSCode Practices You Need To Do Now In 2022

In this post we will be going over 9 Marvelous VSCode Practices You Need To Do Now In 2022, and if you're using VSCode and hoping to be included with the rest of the community in using features that make it so awesome, then you have come to the right post because we are on the same team and it's time to check off our list of marvelous VSCode features!

The goal of this post is to expose at least one crucial VSCode feature that you didn't know had great positive impacts in development. And if I made an impact on at least one person in helping to improve their development experience, then I have achieved my goal.

The last thing anyone wants is to realize they have been missing out on a crucial feature that they could have been using all along. No one wants that.

You can find many articles out there that list awesome VSCode features, but one thing most of them don't do is explain why each feature speeds up development in their own experience. Sometimes a useful feature isn't useful if people don't understand how it affects their experience as a human being in coding.

So without further ado, lets begin!

1. Split Terminal and Kill Active Terminal (Recommended: Bind them both to a shortcut key)

If you develop all of your projects on a desktop and use the terminal in VSCode, then this feature is a must.

Using the terminal in VSCode lets you stay within the editor when performing command line operations like git. It is helpful and saves the extra brain cells over time.

You can perform a split terminal in one of two ways:

1. Open command window (Ctrl + P) > Click Terminal: Split Terminal
2. Bind to a key shortcut. I use Ctrl + Shift + 5

What's even more useful is to kill the terminal you just created. This is a game changer if you're like me who would like to keep the current terminal untouched and would just like to quickly open a terminal on the side to perform some one or more commands to see the output, and then close when we're done to go back to what we're doing with the other terminal. This is because we don't want to tamper with the current stdout output of the one we're going back to. It's just some OCD thing. (Kidding). When we get used to doing this in the blink of an eye it really makes a noticeable difference to our stress level.

Take a look at this short recording below. On the left, you can see that I am going to assign the current month to the todaysMonth variable. But since I forgot what month it is, I proceeded to quickly open a terminal on the side and checked what month it was, then I proceeded to close it and go back to my variable:

It's little moves like this that make our development experience fast, exciting and more efficient!

2. Toggle Terminal Panel (Recommended: Bind to a shortcut key)

If you use the terminal in VSCode then it's also useful to toggle your terminal on and off. There are two ways to do this:

1. Open command window (Ctrl + P) > Click View: Toggle Terminal
2. Bind to a key shortcut. I use Ctrl + ~

Combine this with the Split Terminal, Kill Active Terminal for an even better experience. If you're a quick thinker you can jump around your editor while editing files and by utilizing these shortcuts you might feel like being in the mood to finishing your projects a lot more than you've ever been before. I'm just speaking from my experience, because the faster I get things done the more motivated I become to do the next task.

3. Toggling Sizing to Content Width / Word Wrap

When we write code it's useful to have long lines of code wrapped when it reaches a certain column count for better readability.

Normally we would have to do some clicking and hitting backspace in order to combine and read long sentences in a straight line but there's actually a hidden shortcut that can do this for us for the entire file without it changing the file.

Take this example below. This doesn't look very pleasant to read from and it's not immediately clear which content is grouped with what in the first couple of seconds:

If multiple files look like this throughout a project we might lose some motivation to try to understand the code. Motivation is key here. If we want to stay motivated then we should make it easier to read through code. Now of course writing cleaner code should be the focus but when lines of code becomes long there's not much that even prettier can do to make long lines look nice.

VSCode provides an "escape hatch" where we can toggle the maximum column count of our editor that is wrapping long lines of code that passes the maximum number of columns set in our settings.

By pressing Alt + Z we can temporarily disable that and we can then read through long lines of code in a more straight-up, elegant fashion:

4. Inspecting Editor Tokens and Scopes

When we want to customize our code theme whether it is from VScode, codesandbox, or even on our personal blog, sometimes we desire a certain color or background from the current code theme that we are using.

For example, I am using Material Theme High Contrast in VScode and my favorite part about this theme is the golden highlight on react components:

You can either look for this yourself in the theme's JSON configuration or you can do a much quicker and cooler way of finding out that information, by using the Inspect Editor Tokens and Scopes feature.

Go ahead and press Ctrl + P and type in inspect and click on Developer: Inspect Editor Token and Scopes.

With that turned on you're able to move your cursor around your file and inspect the AST tokens of the current code to get information like the foreground or background color:

5. Toggling Line Comment (Recommended: Bind to a shortcut key)

This is one of the top features of VSCode that I am grateful to be using since the first week I began using VSCode.

The great thing about this feature is that it lets you avoid having to click the beginning of a line to comment the line. This saves time over time!

To perform a line comment on a line of cold, press Ctrl and hit the / button.

This turns

Into:

6. Toggling Block Comment (Recommended: Bind to a shortcut key)

In addition to toggling line comments we can also toggle comments using the block comment syntax.

For example this block of code:

Turns into:

To do this, the default shortcut is Shift + Ctrl + L

However I recommend to use Ctrl + Shift + / to aline more closely with the line comment shortcut because it feels right.

7. Fast scroll sensitivity (Recommended: Bind to a shortcut key)

Is your mouse scrolling through code slowly than it should? Well you have two options:

1. Set your scrolling sensitivity in your computer's settings.

2. Keep your scrolling sensitivity in your computer's settings but set your scrolling sensitivity in VSCode.

Most of us can easily go with the first option and call it a day but we're already used to the scrolling sensitivity outside of VSCode. Maybe the speed at which we scroll through TikTok content is good the way we like it, or scrolling through our Facebook news feed feels just right as it is.

Well VSCode actually provides a key combination where you can hold down Alt and scroll at the same time to perform faster scrolling, and then letting go of Alt to go back to scrolling at normal speed.

This one is important because it actually doesn't show up in our json settings view mode! So it can be easily missed. In other words some of us will never be able to know that this option exists unless we use the GUI mode.

8. Sorting Lines of Code (Ascend / Descend)

We often find ourselves working with a big object and we would like to sort all the key/value pairs. We especially grow the need to sort them when we're having to search key/value pairs upwards and downwards often.

It would be nice if we can just have these key value pairs sorted alphabetically so we can make it a little easier on our eyes so they don't move too much.

Well, VSCode has a feature to sort lines so we're able to do that, as shown below:

9. Sorting JSON objects (Ascend/Descend)

In addition to sorting lines of code, we can also sort JSON objects. This comes very handy since we often work with JSON objects whether it is from API responses or with manipulating data in personal projects.

Go ahead and install the Sort JSON objects extension and look for a JSON object, then press Ctrl + P, search and click on Sort JSON.

We can right click and choose the option on the menu as well. I only need the Sort JSON option so I usually just disable the other ones.

Conclusion

And that concludes the end of this post! I hope you found this valuable and look out for more in the future!