hexrcsVS Code is perhaps the most popular free and open-source code editor/lightweight IDE in the world right now. Here are 5 tricks guaranteed to boost your productivity!
#1 - Refactoring With "Rename Symbol"
We don't always give variables, functions or attribute keys the right name they deserve when we first come up with them. Quite often, when we are doing refactoring, we need to rename some of those to better ones.
Say we want to change a dictionary/object foo to counter in our code, but it has already been used numerous times throughout the entire project, across many different files. We also would like to change its attribute key bar to value, so that we have counter.value instead of foo.bar. How do we proceed?
A naive way to do that is to simply to do a global search-and-replace via the search panel (shift + cmd + F on macOS, or shift + ctrl + F on Windows and Linux). That can be swift, but can also be unsafe - if we happen to have another variable called food, then the simple replacement would take effect on this variable too. counterd, oops!
These named entities are called "symbols". And the most straightforward and "correct" way to do this is to use the "rename symbol" feature in VS Code. Place the cursor on the "symbols" that we want to rename, then hit F2 (also on macOS). We will be greeted with a text field next to the symbol we want to rename. This way, all references to this name throughout the entire project will be correctly renamed. If we use this on a React component, the JSX markup tag will be renamed too!
#2 - Shortcuts For Editing
An editor is not only where we type things - but also where we move chunks of text around.
Have you noticed that if you hit the standard copy/paste/cut shortcuts without selecting anything, VS Code will invoke that action on the whole line? This is great for editing entire lines of text.
There are also other shortcuts dedicated to duplicating and moving lines around.
alt + up or alt + down will simply move the line your cursor is currently placed on up or down. shift + alt + up or shift + alt + down will duplicate the line and place it above or below the current line. These shortcuts also work when you have selected multiple lines. On some Linux distros though, these combinations might conflict with the default systemwide keymapping. In that case, you will have to reassign them in VS Code's settings.
The best thing ever however, is shift + ctrl + cmd + right/left for expanding or shrinking block selection. Try it out in the middle of a nested code block and you will know what I mean! The Windows/Linux equivalent is shift + alt + right/left.
#3 - Multi Cursor Magic
One of my favorite productivity trick in VS Code is its multi cursor support. If you have used Sublime before, you already know how dope this is!
First of all, we can use alt + mouse click to insert cursors. If you made a mistake somewhere, you can use cmd + U or ctrl + U to undo the cursor insertion. If the text blocks we want to multi-select are already neatly aligned vertically, we can just use cmd + alt + up or cmd + alt + down (replace cmd with ctrl on Windows or Linux) to insert cursors directly above or below the current position.
If you want to select the next occurrence of the word (text separated by spaces or special characters) currently under cursor or text of the current selection, cmd + D will do the job.
Super neat for doing mass rename, delete or copy-paste, especially when working with markup languages!
#4 - Fast Keyboard Navigation
Navigating with the keyboard is a breeze. You can use:
-
ctrl + G(on macOS too) to Go To Line... -
ctrl + P(replacectrlwithcmdon macOS this time!) to Go To File... -
ctrl + shift + O(replacectrlwithcmdon macOS) to Go To Symbol....
Man, I love the third one! It will bring you right to where you declared that function or variable - the symbol. You can then take it from there. 😉
Another nice shortcut is ctrl + - or shift + ctrl + - on Mac (alt + left/right on Windows/Linux) to just jump back or forth to previous cursor locations, ideal if combined with those Go To shortcuts!
#5 - DIY Code Snippets
If you have been using VS Code for a while, you may have got some code snippet extensions already installed from the marketplace. Code snippets are shorthands that you can type to expand to entire pieces of code. They are also often smart enough to place your cursor right at the key positions where you can directly change the placeholder function name or similar things.
But, the code snippets that suit you the best are always going to be handmade and homebrew. Making our own code snippets for VS Code is not that hard at all!
Just go to the Code > Preferences > User Snippets on a Mac or File > Preferences > User Snippets on a Windows/Linux, and you can select a language (or global scope) you can write your own snippets!
Snippets follow this format:
{
// ...
"Name of the snippet": {
"prefix": "helo", // the shorthand to invoke the snippet
"body": [
"print('Hello, $1');",
"$2"
],
"description": "Prints 'Hello, blahblahblah' to terminal"
}
// ...
}
Note that the $1, $2 etc. simply means placeholder key positions which you can use Tab key to jump to when the snippet is invoked. To move the cursor outside the snippet and make Tab key go back to normal, just press Esc.
Bonus - Install The IntelliCode Extension
Microsoft has recently launched a more advanced IntelliSense extension for VS Code, powered by machine learning. Check it out from their extension marketplace!
The extension currently supports JavaScript, TypeScript, Python, and Java. Having coded with IntelliCode since its preview release, this little extension has been a huge time + frustration saver for me! :)
Originally posted on my blog, where I publish random stuff on web dev, flutter and sometimes ML every two weeks or so.
You can also find me on Twitter @hexrcs :)
