Tutorial: Become vscode poweruser

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

When you open the quick menu:

  1. Just start typing the name of any file in the workspace and find that file for you.
  2. If you use the : symbol and enter a number, it will take you line number on currently opened file.
  3. If you use the @ it will take you to a specific symbol in the opened file.
  4. 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.
  5. 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

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.

Zen coding on HTML

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

File search and Global Search

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

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

Multiple cursors

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

Folded and unfolded symbols.

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

More…

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!

Stoic. Existentialist. Optimistically Nihilist. Snowdenist. Friendly. Confident. Perfectionist. Creative. Playful. Programmer. Philosopher.