Tricks, Tools and Tips for Faster Programming in Visual Studio Code.
Over time Visual Studio Code has become an important tool, used daily by many developers, because it is simple, fast, and has many useful features that improve development efficiency, productivity and experience. Part of these features are provided by VS Code extensions that can be added through the extension marketplace.
Also, VS Code includes other out-of-the-box features that are pretty useful and well thought to help developers in their work, but these features are less known and less used in general, also the community is continuously releasing new versions of the editor, where they add new features that are pretty interesting and useful to developers.
In this post, I will show and explain some of these native features that can be very useful to speed up and improve software development in Visual Studio Code.
Multi cursor selection
First, this feature allows you to create multiple cursors anywhere in the code with the mouse. To do this, simply press the Alt key and click on the place where you want to add the cursor (Alt+Click or Option+click on macOS), as you can see in the example below:
Cursors can also be added with several selected fragments by pressing the Alt key while selecting with the mouse or while double-clicking to select the elements, as shown in the following example:
As you can see, this is very useful for bulk editing, but it can also be used in combination with snippets or code completion:
Column (box) selection
In the editor, we can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while dragging with the mouse left click. This also creates a separated cursor for each line selected.
This feature is very useful when you want to edit structured blocks of code or data, and especially when you want to edit a block that is written on the right side of another block that you don't want to edit. Multi cursor helps in this case, but column selection is faster.
Below you can see some examples of all this:
Format document faster
This is a feature that can save a ton of time depending on the way you use it, but always saves time and makes your code faster. You can use it by searching ‘Format Document’ in the Command Palette which can be opened by pressing Ctrl+Shift+P. Also, you can use it directly by pressing Shift+Alt+F
This will format the entire document or the selected code section in case you have one.
To enhance this feature, you can use autoformatting of the code that is copied into the document, or autoformatting of the entire document when it is saved. These two features can be enabled in the VS Code settings window:
This window has a lot of options, so the best way to find these features it's by searching for ‘format’ it on the top search bar in the settings window. You will see the following options:
You can choose the option that best suits your programming preferences. In my case, I only use the Format when pasting option, because many times the copied code has a different format, or simply breaks when pasting it. So it is a very useful tool for me. But Format On Paste it's a pretty interesting option since you can choose the format mode, and only format the modified code when saving. This can be done by enabling Format On Paste and selecting modifications in the Format on Save Mode.
I use the code formatting tool when I program in two ways, the first is to write the code without worrying about formatting and style, I just write the functional code, and when I’m done I use the automatic formatting of the document. This way is the fastest way to write code, but it can also cause some inconsistencies in the style and look of the code, you have to rely on the formatting tool. The other way I code is by paying attention to the style, and applying consistent formatting (manually and automatically with the format tool)while writing the code. This is a much slower way of programming but a bit safer.
My personal preference is the first one because it's way faster, although I sometimes inadvertently program the second way, but always with the help of automatic formatting.
High-performance bracket pair colourization
I have been using the Bracket Pair Colorizer 2 extension for a long time because it saves me a lot of time when it comes to finding the scope of any block of code. \But now VS Code support native bracket pair colorizatrion. This feature can be enabled by setting "editor.bracketPairColorization.enabled": true or searching bracketPairColorizationit in the setting window like this:
Then it will the edit will paint the pairs of parentheses or braces the same colour allowing you to identify them in a simple way.
It is especially useful when we have highly hierarchical data structures or many blocks of code at different levels. For this reason, it is highly recommended to use this extension if we work with JavaScript, React or JSON, since it is very common to nest elements and have code blocks at different levels, due to the nature of the language regarding objects, promises, callbacks and arrow functions. In my case, using this extension saves me a lot of time at every development stack, especially in JavaScript and its frameworks.
Use as few code completion extensions as possible
This is a personal recommendation based on my experience and is that one of the things I have learned programming in Visual Studio Code is that the extensions are quite useful, but I have also learned to install many interesting extensions that are good or better for programming, because for example the extensions of code completion, snippets, IntelliSense, language packs, etc. That if they are installed in excess, cause that the code help and the code completion with ctrl + space becomes useless since it stops predicting what you are going to write, and it doesn’t help to complete faster the code. It becomes a search tool or a live documentation tool, which also takes much longer to show the code help and autocompletes.
Personally, I only use the extensions that are useful for the project I am working on at that moment, for example, if I'm working with a React Native app, I probably use the React Native snippets extension, and are others that are useful in almost any circumstance or project, like path IntelliSense.
Use Enhanced clipboard paste Win + V
This is not a feature of Visual Studio Code, but of Windows 10. And it is a powerful feature for programming, as it is a clipboard with history and synchronization between devices. This means that various items can be saved to the clipboard for later use by pressing the Windows logo key + V which displays a clipboard history listing where you can select what to paste. In addition, this clipboard can be synchronized for pasting text on other devices.
To use this feature, go to Windows settings > System > Clipboard and make sure you have the following settings enabled:
For obvious reasons, this tool is very useful for programming, and in my case, it has saved me a lot of time and multiple headaches.
We could say that the clipboard is one of the most important and most used tools for programmers.
Synchronize Visual Studio Code settings
This feature saves a lot of time when you install or reinstall Visual Studio Code. Because with sync enabled you don’t have to reconfigure any settings, or editor extensions again, as it will be applied every time you log in to your Microsoft or GitHub account. This means that every configuration, setting change and installed extension will be saved and synchronized in these accounts when you activate the sync settings. All this also applies to the GitHub web version of VS Code, but it only works with some extensions and settings, it’s a bit limited at the moment.
To enable the Settings Sync, you have to go to the user icon at the bottom left of the Visual Studio window and press the Turn On Settings Sync option, as you can see below:
Next, select the configuration data to be synchronized, and then log in to the account where the settings will be saved and synchronized, as shown in the following example:
I have several devices and, as a Windows user, I have to deal with reinstallations and formatting of the operating system. So in my case, this simple feature has saved me a lot of time doing configuration and installation tasks, and will surely continue to save me time in the future.
I hope this post has helped you to improve your programming experience in Visual Studio Code. I especially hope that in some way I have helped you to code faster and more efficiently 👌. But if you have any questions or suggestions, comment it the post, and I will answer them as soon as I can.😃👍
You can support me by clicking on the following button:
