Use Visual Studio Code for Angular 2+ development

Are you amazed by Angular 2 but your old editor not? Let me take a brief look on Visual Studio Code, why you should and how you can use this one efficiently.

What is Visual Studio Code?

Visual Studio Code (VS Code) by Microsoft is free, open source editor running everywhere, on Windows, Mac and Linux, too. It is one of the recommended IDEs by Angular team for development.

In this article you find helpful tips and tricks:

  • how you can change default settings
  • list of often used keyboard shortcuts
  • amazing extensions bringing your coding into next level
  • another great resources about VS Code

Note: Article was written, where current version of VS Code was 1.11.2.

Change default settings

Open File -> Preferences -> Settings (Code > Preferences > Settings on Mac). Copy from left column to right “User Settings” and change value. You may find useful these examples:

function setting
disable horizontal scroll “editor.wordWrap”: “on”,
auto save files “files.autoSave”: “afterDelay”,
“files.autoSaveDelay”: 3000,
insert tab instead of spaces when Tab is pressed “editor.insertSpaces”: false,

Visual Studio Code keyboard shortcuts

Because many shotcuts are the same as in other editors, I highlight some of them for you.

shortcut meaning
Ctrl+` open terminal
Alt+up/down move line up/down
Shift+Alt+up/down duplicate line
Alt+left mouse click select lines for multiline editing

If you want to split editor, there is a shortcut Ctrl+\, but you cannot remember it, there is also split icon in top right. Take a look at complete list of shortcuts.

Split Editor

Extensions

You want to be developer ninja, do not you? Well chosen extensions will boost your productivity in a dramatic way. There are many for Angular like:

But why to install it one by one, when you can kill two birds with one stone? Actually, not only two but many with great Angular Productivity Package. Simply press Ctrl+P and paste ext install angular-productivity-pack.

Check your all installed packages with Ctrl+Alt+X and type @installed. Browse marketplace to find other great packages. Feel free to mention them in comment section.

Extensions Part

Further reading

Conclusion

Visual Studio Code is modern editor with many great features pre-installed, and with large number of extensions ready in markeplace. Very good choice for angular coding.