Visual Studio code, or VSCode for short, is a light-weight text editor developed by Microsoft. It is surprisingly good for a Microsoft product, which is.. surprising for most developers. It is built upon Electron framework and it’s incredibly fast. Even StackOverflow survey voted VSCode as the number one development environment in 2018. So if you are looking for a new text editor, look no further.
Getting started
In order to experience the full power of VSCode, I recommend you to install Git first. Then you can download VSCode for Windows, Linux or MacOS from its website at https://code.visualstudio.com/
The installation process depends on what OS you’re using, but overall they should be fast. When you start the editor you should see its welcome screen. Let’s explore the left side toolbar first.
Explorer
The first button from the top is the explorer, and it’s the main file navigation for VSCode. We will use this menu to open files for editing.
Click on the “Open Folder” button and select your project folder. The content of the project will appear on another sidebar at the left side.
Search
The second button from the top is the search button, and it is used for.. you guessed it. Searching for text in a specific directory.
The search sidebar menu is smart, and it can include or exclude files by extension, so you can write something like directory/*.js to include or exclude all .js files from the search. If include/ exclude is not shown, then you can click on the three dots button “…”
We can also perform a search and replace from this sidebar menu, by clicking on the arrow ▷ symbol beside the search textbox.
The three symbols on the right side of the search textbox are used for advanced search, either for matching case, matching whole word, or regular expression.
Source Control
This is one of the best feature from VSCode. The third icon of the toolbar is used for checking files version status. VSCode comes with Git support out of the box, so to use Git, simply click on the Git icon at the top right of the sidebar.
Then we can begin tracking files and their statuses. “U” in the right side of the file name means “Untracked” files, while “D” means “Deleted” and “M” means “Modified”. When hovering around the sidebar list of changes, there is extra menu in which we can discard or stage changes.
Debugger
The fourth icon is the debugger. Just like an IDE, VSCode can help with debugging your code while running and setting breakpoints. It’s a complex feature with its own documentation, so please check it out at https://code.visualstudio.com/docs/editor/debugging
Extensions
Just like the popular Sublime Text, VSCode also allow developers to extend its functionality by creating add-ons or plugins. They provide extra power for specific tasks. The Extension sidebar also shows recommended extension for you based on what files you are working with the most. For an example, since I worked with markdown files a lot, VSCode will recommend the markdownlint extension.
You can select to install any extension you choose.
The Terminal
Now that we have explored the toolbar, let’s move into the Terminal. Since VSCode is targeted for editing web development code, that means developers will likely to use the terminal to run npm start or yarn install frequently. You can open a terminal directly from inside VSCode by right-clicking on a file or folder and click “Open Terminal”
You can have as many terminal tab as you like, and you can even change your default terminal
Command Palette
If you ever want to know the extend of VSCode’s capability, then use the Command Palette. It’s just like Google search, but for everything inside the editor. To access it, use CTRL + SHIFT + P shortcut.
Here you can do everything you can think of with VSCode. Try typing “terminal” or “theme” and the list of available action will show up.
Themes
If the default appearance of the editor looks off for you, then you can change them from the Settings toolbar > Color Theme. I personally used the Monokai theme. Themes are also downloadable from the extension menu. Just search for “theme” and you’ll be seeing all available themes in no time.
Extensions for web developers
Some of the best extension for web developers that I recommend are:
- Prettier — opinionated code formatter that make sense and good for reading
- ESLint — ES syntax checker that checks your JavaScript code for errors
- CSSPeek — Look into CSS definition from HTML class and edit it
- Bracket Pair Colorizer — Improve brackets visual significance in your code by coloring theme
- Indent Rainbow — colors the indentation levels of your code to improve readability
There might be more extensions you can find around the Internet, but this is enough for starting out.
Keymap extensions
If you’re switching from Atom or Sublime, you might be already used to their shortcuts. Well then just bring them with you to VSCode! You can install keymap extensions to import settings and keybindings from another text editor. I used one for Sublime Text, but you might come from a different editor, so you can take a look at https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Downloads
Conclusion
That will be everything you need to know to start using VSCode. If there’s anything else you’d like to know, you can do a Google search and I’m sure you’ll find some answer to what you’re looking for. If not, you can email me and I will help you as best as I can.
