Choosing an IDE when you first start learning to code doesn’t seem such a big deal. Most of them are free, easy to install and efficient. Let’s look at how to make the most ouf of your text editor.
In this post, I’m going to review some tips and techniques as well as some of the most important features of Microsoft Visual Code.
VS Code is one of the best IDEs out there. You can check my previous post on how the major text editors stand against one another.
Visual Code 101
1) First you’ll need to install it by going on the download page here.
2) Once VSC is installed, here are some basic addons you can look into:
Git. Although VSC does come with a built-in Git tool (more on that later), it will require Git to be installed for it to work. You can install Git here.
NodeJS. You’ll also want to make sure you have NodeJS installed on your computer at this point. Link is here.
Chrome Debugger. Using Chrome Dev tools is of course pretty handy but this extension brings all the tools into VS Code for clarity (Chrome is only rendering your code so all the editing and testing is kept under your IDE’s umbrella). Check out this nifty extension here.
3) At this point, you have a working setup and you can start your first projects.
Or you can start installing some additional extensions. Here are some of my favourites:
Auto Close Tag
Git History allows you to view history of the current branch, all branches. Compare commits, view details of the commits, compare changes against previous files. It provides you with a nice graph view of your changes on files. Check it out here.
IntelliSense for CSS class names will offer suggestions of class names as you type them based on the CSS files of your workspace. The nice think is that it supports and recognise CSS classes placed in ‘link’ tags so for example, if you link Bootstrap to your page, it will see it and suggest Bootstrap class names as you type them. Check it out here.
SVG Viewer allows you to preview your SVG files. If you don’t work with SVGs, well you should, it’s scalable, it doesn’t ever pixelate, it’s the future. You can check that extension here.
There are many other useful extensions you should check out, for example if you’re into React (like me) there are many linters you can use to improve on your workflow.
Now let’s look into the UI.
VS Code User Interface:
VS Code UI
Like many other code editors, VS Code features a a Navigation bar on the left, editor space on the right and a status bar at the bottom.
You can move the Side Bar to the right hand side (View > Move Side Bar Right) or toggle its visibility (⌘B).
Side by Side Editing
You can have up to three editors open side by side. If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:
- Ctrl (Mac: Cmd) click on a file in the Explorer.
- ⌘\ to split the active editor into two.
- Open to the Side from the Explorer context menu on a file.
- Click the Split Editor button in the upper right of an editor.
- Drag and drop a file to the either side of the editor region.
- Ctrl+Enter (Mac: Cmd+Enter) in the Quick Open (⌘P) file list.
Minimap - outline view
A Minimap (outline view) gives you a high level overview of your source code which is very useful for quick navigation and code understanding. A file's minimap is shown in the right side of the editor. You can click or drap the shaded area to quickly jump to different sections of your file.
If you would like to disable minimap, you can set "editor.minimap.enabled": false in your user or workspace settings
The Explorer is used to browse, open, and manage all of the files and folders in your project. VS Code is file and folder based - you can get started immediately by opening a file or folder in VS Code.
After opening a folder in VS Code, the contents of the folder are shown in the Explorer. You can do many things from here:
- Create, delete, and rename files and folders.
- Move files and folders with drag and drop.
- Use the context menu to explore all options.
Tip: You can drag and drop files into the Explorer from outside VS Code to open them up.
Zen Mode lets you focus on your code by hiding all UI except the editor (no Activity Bar, Status Bar, Side Bar and Panel) and going to full screen. Zen mode can be toggled using View menu, Command Palette or by the shortcut ⌘K Z. Double Esc exits Zen Mode. The transition to full screen can be disabled via zenMode.fullScreen. Zen Mode can be further tuned by the following settings: zenMode.hideStatusBar, zenMode.hideTabs, zenMode.fullScreen and zenMode.restore.
Finally, your VS Code workflow will be vastly improved by learning and using its keys-shortcuts.
If you'd like to modify the default keyboard shortcuts, see Key Bindings for details.
- ⌥⌘→ go to the right editor.
- ⌥⌘← go to the left editor.
- ⌃Tab open the next editor in the editor group MRU list.
- ⌃⇧Tab open the previous editor in the editor group MRU list.
- ⌘1 go to the leftmost editor group.
- ⌘2 go to the center editor group.
- ⌘3 go to the rightmost editor group.
- ⌘K ⌘← go to the previous editor group.
- ⌘K ⌘→ go to the next editor group.
- ⌘W close the active editor.
- ⌘K W close all editors in the editor group.
- ⌘K ⌘W close all editors.
Note that if you are used to Atom, Sublime or another editor's key binding, you can search the VS Marketplace for the relevant extension. It will replace the built-in shortcuts with the ones commonly linked to a given editor.
VS New Features!
You can add a folder to a dedicated Workspace to gather your directories into one place. You can name and save your Workspaces.
You can link folders but also settings to specific workspaces.
Specific syntax highlighting for a specific workspace. The JSON file for workspace settings is just a flat file you can share with team or modify.
You can learn about how to use workspaces here.
VS Code now highlights edited files based on status.
You can hover over the highlight colour in the gutter, click on it to open an editor showing what the changes/additions were.
You can stage changes one by one via the mini editor. Changes staged that way are ready to be committed right away.
Vertical docking for panels:
View > Integrated Terminal will show it at the bottom but you can now click on the “Move to the Right” button to have your terminal on the side.
This is super cool! You can not only fold portions of code but also create “Regions” so encapsulate code portions between comments with a specific formatting (//#region section -> #end region) and VS Code will make that portion foldable.
This can be pretty neat when working in a team, you can assign a portion of code to a person by commenting it like #region John-toTest.
Note that this might not fully supported on all languages so you’re fee to contribute to that on GitHub.
For visual examples and more info on those features, check out Kenneth Auchenberg's video:
This is the beginning of a new series on how to get the most out of your text editor.
Make sure you share this post if you found it interesting! :)