My fourth tutorial will focus on the first custom UI element - editable textbox
VSCode is one of the most popular code editors, skilled use of VSCode can greatly improve our programming efficiency. This post consisted of some tips I found very helpful when working with VSCode, which I hope will help you too.
We might want to type the same thing in different places at the same time.
VS Code supports multiple cursors for fast simultaneous edits. You can add secondary cursors (rendered thinner) with
Alt+Click. Each cursor operates independently based on the context it sits in.
A common way to add more cursors is with
Ctrl+Alt+Up that insert cursors below or above.
Ctrl+Dselects the word at the cursor or the next occurrence of the current selection.
Ctrl+F2to select all of the next occurrence of the current selection
Place the cursor in one corner and then hold
Shift+Alt while dragging to the opposite corner:
It will open a contextual menu for you with the auto-suggestion to navigate between files. Remember, do
Ctrl+F and search for the file usually won’t return any result.
You can open multiple files from Quick Open by pressing the
Right arrow key. This will open the currently selected file in the background and you can continue selecting files from Quick Open
It is similar to the Chrome shortcut to reopen a tab after you have close it.
Also, when you do
Ctrl+P as above, it will show the most recently open file on top of the list.
You can navigate symbols inside a file with
Ctrl+Shift+O. By typing
: the symbols will be grouped by category. Press
Down and navigate to the place you want.
You could also activate that by
Ctrl+P and then type
@. It will behave exactly as you type
Some languages support rename symbols across files. Press
F2 and then type the new desired name and press
Enter. All usages of the symbol will be renamed, across files.
It will update the name inside the same file as well.
Quickly shrink or expand the current selection. Trigger it with
Here’s an example of expanding the selection with
Sometimes we want to move some code or text as a whole up or down. Press
Alt+Up to move the text up; Press
Alt+Down to move the text down.
|Import Cost||Display import/require package size in the editor|
|Debugger for Chrome||Debug your code in VSCode while running the web page|
|Angular Language Service||Editor services for Angular templates|
|Code Spell Checker||Help catch common spelling errors while keeping the number of false positives low|
|Indenticator||Highlights your current indent depth|
|C# To TypeScript||Quickly convert the class/interface from C# to TypeScript equivalent. Super helpful and save time for front end dev. Usually, we have to do it manually|
|ES7 React/Redux/GraphQL/React-Native snippets||Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax|
|Angular Snippets (Version 9)||Angular version 9 snippets by John Papa|
|GitLens — Git supercharged||Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more|
|Markdown All in One||All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)|
|Paste JSON as Code||Copy JSON, paste as Go, TypeScript, C#, C++ and more.|
|psioniq File Header||Configurable file header comment block and changes tracking.|
|Version Lens||Shows the latest version for each package using code lens|
|WakaTime||Metrics, insights, and time tracking automatically generated from your programming activity.|