Supercharge your development experience with these must-know VSCode tricks

Tech Daily Feb 23, 2020

The choice of code editor does not make or break a good programmer. You can use Atom, Sublime Text, Emacs, Vim or even nano to edit your code. You can also choose to use pen and paper to manage spreadsheets, if you're good enough, you'll get the job done.

That being said, Microsoft's Visual Studio Code is a fantastic piece of software. I rarely say this about Microsoft products but VSCode is probably the best software for writing JavaScript out there. I have tried vim, atom, sublime text, brackets and many other editors and IDEs. All of them get the job done, but VSCode just makes life easier.

VSCode probably isn't that great when it comes out of the box to be honest. But these are some things I have learned the hard way, and a lot of them I had learned from seeing other great peers who were using a different editor.

What is unique about VSCode?

  1. The excellent plugin ecosystem. You got a problem? You got a plugin.
  2. JSON Based configuration makes life easier.
  3. Smart autocomplete a.k.a IntelliSense (works best for JS)
  4. Strong integration of git.
  5. Everything is searchable.

Learn these keyboard shortcuts and you'll be up to speed in no time

Vscode has an integrated terminal

1. Integrated terminal (with choice of terminal)
To toggle the terminal from your editor press Ctrl+ ` (backtick (`) is the key above tab)
You can't toggle it from within the terminal so you must place your cursor in the editor and press Ctrl+` to hide the terminal|

On the top right, you can find a dropdown, along with a + button to add and switch between terimals

2. Split the integrated terminal
To split the integrated terminal, you need to press Ctrl+Shift+5

3. Copy selection Up/Down  (Custom Shortcut)
If you're a developer, you will need to duplicate lines (or selection of lines)

VSCode does not come with a shortcut on linux to copy lines up or down. For that reason, open VSCopde, press Ctrl+K and Ctrl+S consecutively (or go to File > Preferences > Keyboard Shortcuts )

In the search bar, type copy, double click the Copy Line Down and Copy Line Up options, and enter your preferred key combination. I prefer Shift+Alt+Up and Shift+Alt+Down for that purpose.

4. Move lines Up/down
Just as often we want to copy a line, we can choose to move a line or selection up or down. VSCode comes with a default shortcut for this, to move a line or selection up or down, it's as simple as holding down the Alt key and press Up or Down arrow.

5. Find in file (and Find and Replace)
To find in a file, press Ctrl+F and to Find and Replace, press Ctrl+H
Protip: if you have to find occurences of a work or identifier, highlight the word (double click) and then press Ctrl+F you wouldn't need to type it.

6. Find in Project (Global search)
To search in the entire project, you need to press Ctrl+Shift+F this, searches your entire project directory across all files.

7. Open an existing Project
By pressing Ctrl+R you can open any recent project in your current workspace. I often need to have multiple projects open, so I keep opening multiple windows and open projects within them.

8. Open a new editor window
That comes with Ctrl+Shift+N, combined with the above shortcut, I can open multiple projects in no time. Imagine clicking File > New and then File > Open that many times.

9. Open the command palette
You can open the command palette either by pressing Ctrl+E or Ctrl+P.

Now you can type in any file name to quickly find it. This is one feature, that absolutely saves a lot of time.

You can also type > in the command palette (or press Ctrl+Shift+P ) to find a lot of quick configurations.

10. Split Editor
to split the editor horizontally, press Ctrl+\

11. Toggle the sidebar
Don't let that sidebar distract you, press Ctrl+B and toggle it when you need.

Learn to use multi-cursor effectively.

Imagine you have some amount of text, and you need to replace the word bulbasaur with pikachu everywhere within the block of code, you can't use Find and Replace easily, as it will replace all appearences of bulbasaur with pikachu within the file.

  1. Add cursors on selected word.
    If you press Ctrl+D after highlighting text, the next matching occurance will get a cursor. Keep pressing Ctrl+D and keep adding cursors. Press Ctrl+U to undo a cursor.
  2. Add cursors to next/previous line.
    By pressing Ctrl+Shift+Up or Ctrl+Shift+Down you can add cursors above or below. It will come in handy when you are trying to build options for a dropdown.

Install GitLens plugin

To be totally honest, I haven't learned the depth and breadth of GitLens yet, but lets you see the diffs, compare any two versions against commit or tags, see all the branches (without checking out) and the most I enjoy, shows the blame and change for the line under my cursor. It is really awesome.

For the purists out there, git cli is pretty functional, but once you see your diffs in VSCode, you simply can't go back.

Install Clipboard History Plugin

This nifty plugin will record a history of all the copy operations you have made and when you paste using Ctrl+Shift+V it will show a dropdown of the clipboard history in chronological order.

Install Live Server plugin (for front end)

Working on a static front end file? or need to serve the dist folder? Go to the folder, open you index folder and in the bottom panel press Go Live.

It will open a Live Server, and let you serve static files. I use it to sometimes share files to my friends on the same network as well. But python -m SimpleHTTPServer 8000 works better for that.

Were they helpful?

So, these are the techniques I learned over time for VSCode that makes my life that much easier.

All the shortcuts that I have written, I actually use them daily. I could have just ripped them off of docs but I actually use them. There are many more shortcuts that I have custom created but those are actually not that necessary and are very specific for my use case and how I use the editor.

VSCode is a very useful editor. I don't want to get to the VSCode vs Atom vs Sublime territory. Editors are tools, and I have no emotional attachments for them. VSCode lets me be work efficiently. There are many people who use emacs, sublime or even vim, that's what they're comfortable using.

The only thing that is unique to VSCode is GitLens and this saves a lot of time for me personally. Highly recommended.

Sohan Basak

Hi, I am Sohan. A software engineer by profession, I am really passionate about algorithms, AI/ML, Maths and Physics. Play the guitar as a hobby, the maths behind music is fascinating.