This tutorial is for vscode users who are looking for some cool tricks that their code editor can perform, this is a basic tutorial to introduce the following features:
1. Quick Menu (Goto line, Open file & Command Pallet)
2. Fold / Unfold code
3. Zen coding
4. Quick find / Global find
5. Code Selection (word, line & block selection)
6. Quick actions (Comment code, duplicate line, quick change name)
7. Multi-cursor actions
8. Many shortcuts
Just reading the blog is not enough, the blog will only introduce you to the features, you need to follow the instructions in tutorial available on GitHub to fully grasp the actions. Now, let’s get started.
Quick Menu
Quick menu can help perform a lot of actions, from opening files to executing commands.
When you open the quick menu:
- Just start typing the name of any file in the workspace and find that file for you.
- If you use the
:symbol and enter a number, it will take you line number on currently opened file. - If you use the
@it will take you to a specific symbol in the opened file. - If you use the
>symbol, it becomes command pallet a command pallet to which can help perform any command, from installing an extension to opening terminal. - It doesn’t end there, If you use
?it will open a help menu where you can find a list of useful things that the quick menu can perform.
Zen coding
Some actions are so common that we don’t manually need to create snippets for them, the snippets come out of the box, for example typing html5 and pressing enter would yield the basic HTML structure to start writing your code.
But that’s not all. You can type any HTML structure in zen and vscode will convert it to HTML, here is an example of creating multiple elements.
While HTML5 is just an example, vscode can help quicken structuring in a lot of languages with the help of extensions & snippets. In fact you can very easily write your own snippets to perform common actions and those snippets can even have variables that you can enter that the time of using that template.
Quick find / Global find
A find feature with regex can be very useful tool to clean your data or simply extract information in a very large amount of data.
Sure enough, vscode has a very powerful search.
In file search, you have the options to match the entire word exactly or search for word part, search match case, find only in selected code of the file and regex. We even have a find and replace option that works in conjunction to regex.
In global search, on top of all the features above, we can search only in open editors or any file in the workspace, include and exclude files based on name which supports regex as well!
Quick actions
Many advanced tasks that would otherwise take some time can be done with vscode quickly, example you can simply hit f2 (default) to rename a variable and vscode will update all the instances of that variable, mind you, if you have a global and local variable with the same name and vscode can differentiate between the two variables.
Similarly, there are options duplicating a line or block without updating your clipboard. Quickly commenting or un-commenting a section of the code depending on your language. The tutorial goes over some of these features.
Multi-cursor actions
Did you know you can edit multiple lines at the same time using vscode?
It’s a very powerful feature specially when you want to make the same edit at multiple places. Not just that, you can select file at different locations matched with regex to update a pattern of text in the file.
It might not sound like it, but once you get used to it, you’ll be using it all the time!
Fold / Unfold
When dealing with large files, fold / unfold can provide a quick way to navigate in a file.
In vscode, you can quickly fold all the blocks or just one block.
While a lot of editors provide this feature, it’s still an under appreciated feature that a lot developers don’t know.
Code Selection & Movement
It is a basic expectation from editors these days to provide powerful movement and selection features. From selecting word & line to selecting a code logical block and quickly moving between them, vscode has shortcuts for all of them and the tutorial provides a quick glimpse of the same.
More…
This is just the tip of the ice burg, we can do live debugging of the code or even run testcases or scripts straight from vscode. There is so much more and the tutorial provides some additional tasks that you can look into to learn about some advanced features of vscode.
If you found this useful let me know, I’ll write a blog about advanced features of vscode.
I hope you learned a trick or two from this blog. Happy Coding!
