Visual Studio Code - Best practices

31 januari 2018 - 2 minuten leestijd

There are many good editors. Choosing an editor that suits you can be quite tricky. I really like VS Code! It works easily and is free, open-source, and available on both OS X and Windows.

GIT integration

VS Code has a built-in source control. It offers simple actions such as switching branches or comparing changes. With the extension Git History the integration becomes even more powerful and you can easily view the log, history or branches and compare commits.

Open Command Palette

Command Palette

The most important key combination you should know is ⇧ + ⌘ + P or Ctrl + Shift + P for Windows. This will open the Command Palette that gives you access to all available functions. This way you can clone a repository, create an extra branch or search for a file in a few simple steps.

Emmet

Emmet is a snippet tool that saves a lot of time in your HTML & CSS workflow by working with abbreviations. This tool is integrated into VS Code, making it super tasty!

Example Emmet input:

   div>ul>li

Output result

<div>
    <ul>
        <li></li>
    </ul>
</div>

Emmet snippet:

<!

Output result

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>   
</body>
</html>

IntelliSense (auto complete)

IntelliSense goes beyond syntax highlighting. It automates the completion of a syntax!

Go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules. - Microsoft

Extensions

Extensions are additional features or themes that can be downloaded from the marketplace. Here are some cool extensions that I use.

Auto close tag
Automatically add an HTML / XML close tag, the same as Visual Studio IDE or Sublime Text
Auto rename tag
Automatically renames paired HTML / XML tags
Beautify
Beautifies code in Visual Studio Code
Git History
View git log, file history, compare branches or commits
One Dark Pro theme
Atom's iconic One Dark theme for Visual Studio Code
vcode icons
Icons for Visual Studio Code

Be sure to check the tips that Microsoft itself offers!