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.
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?
- The excellent plugin ecosystem. You got a problem? You got a plugin.
- JSON Based configuration makes life easier.
- Smart autocomplete a.k.a IntelliSense (works best for JS)
- Strong integration of git.
- Everything is searchable.
Learn these keyboard shortcuts and you'll be up to speed in no time
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
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+S consecutively (or go to
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+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
5. Find in file (and Find and Replace)
To find in a file, press
Ctrl+F and to Find and Replace, press
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
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
New and then
Open that many times.
9. Open the command palette
You can open the command palette either by pressing
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
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
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.
- Add cursors on selected word.
If you press
Ctrl+Dafter highlighting text, the next matching occurance will get a cursor. Keep pressing
Ctrl+Dand keep adding cursors. Press
Ctrl+Uto undo a cursor.
- Add cursors to next/previous line.
Ctrl+Shift+Downyou 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.