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.
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.
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 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></li> </ul> </div>
<!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 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
- 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!