Web Developer
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.
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:
- https://github.com/johnpapa/vscode-angular-snippets
- https://github.com/jakethashi/vscode-angular2-emmet
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.
Further reading
- Documentation: https://code.visualstudio.com/docs
- Other tips and tricks: https://github.com/Microsoft/vscode-tips-and-tricks
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.