Why I ditched Sublime for VS Code
I have been very happy with Sublime Text (v3) for a long time. However, this week I dove into TypeScript for Vue and their docs mentioned the use of Visual Studio Code (or VSCode) as their (free) editor of choice, having syntax highlighting and so on. So I thought it was time to give this editor a try.
I am very impressed with the intuitive interface and how fast it is (lightweight). With only a handful of extensions and half an hour of intro videos I was ready for my next project!
In this post I’ll describe the setup for VS Code that improved my workflow coming from a Sublime background. Note that because I work a lot with Laravel (PHP) and Vue (JS), my setup and choice of extensions is generally biased in the direction of these languages and frameworks.
Please note that all shortcuts presented in this post are for Mac users.
Download
VS Code is free to download. Download and installation instructions can be found online.
Extensions
Extensions are written by the community and add all kinds of functionality to the editor. Working a lot with PHP (Laravel) and Javascript (Vue and occasionally jQuery), I value the following extensions a lot:
- Vetur (Vue and TypeScript syntax highlighting)
Even Less is highlighted in single file Vue components! - jQuery Code Snippets 0.0.1 (Don Jayamanne)
Typing ‘jq’ yields a list of snippets. Very handy for quick ajax calls. - Vue VSCode Snippets 1.3.0 (Sarah Drasner)
Type ‘vbase’ to scaffold a Vue single file component and much more I haven’t even tried yet. - PHP Intellisense 2.3.10 (Felix Becker)
Advanced auto completion and refactoring support for PHP.
command + shift + o shows the methods of the current class. This command is similar to Sublime’s command + r
I noticed there are specific Laravel extensions as well (Laravel Blade snippets, Laravel Artisan and Laravel Docs to name a few), but I haven’t tested them yet.
Shortcuts
The Emmet plugin is included out of the box! Furthermore, most shortcuts I know from Sublime still work (copy line, paste line, cut line, multiple cursors (use option key instead of command)). There is an online pdf for print which lists the majority of useful commands.
However, as with Sublime, many shortcuts use multiple keyboard keys which makes it less useful for those hurting from repetitive strain injury. So I recommend use them with care.
Settings
The default settings of VS Code are easily customised. You can either open the settings panel via the VS Code menu or with a shortcut (command + ,). The only changes I applied were for ‘word-wrap’ and for ‘previewing files’. Changing these settings was as simple as
- Enable word-wrap in editor: open VSCode preferences > Settings (command + ,) and type ‘word wrap’ in the search bar. Editor word wrap is off by default. I turned it on. This yields normal line lengths which is much better in my opinion.
- Open file without preview: open VSCode preferences > Settings (command + ,) and type ‘preview’ in the search bar. Workbench > Editor: Enable Preview is on by default. I turned it off. This opens a file without preview. When disabled, a previewed file needs to be persisted by an extra mouse click which annoyed me a lot.
Integrations and handy features
Working with VS Code also improved my workflow. Below are some features that I really like in VS Code.
- VS Code is Git aware: you can see your current branch and the ‘state’ of your working dir (in the bottom bar). You can even create a commit from inside the editor via the Git icon in the vertical menu bar on the outer left side of the editor.
- Opening a project is much simpler compared to Sublime 3 and VS Code remembers them. You even have a shortcut for closing a project (command + K, F).
- VS Code ships with a built-in terminal (even ZSH) where you can run npm scripts (e.g., npm run watch-poll).
- VS Code also features Intellisense: for a number of languages it helps out with Types and function arguments (this can do a lot more that I still have to discover).
Conclusion
After trying this new editor for approximately two weeks I must say this is definitely the best editor I have ever used. Clean and lean at first, but very rich with lots of features. Coming from Sublime, this editor really improved my workflow!
Originally published at www.blog.plint-sites.nl on March 8, 2019.
