Back in July 2015, we talked to you about Atom, a wonderful Open Source editor created and maintained by Github!
Today, we want to discuss Visual Studio Code, known to insiders as VS Code. This delighful surprise was concocted by Microsoft in April 2016.
I’ve known about VS Code for a while and after working with it for several days, I decided to write this article.
It didn’t take me long to get into it. I even created a new extension, Highlight Bad Char – which makes unsafe characters that can crash compilers and interpreters visible – just for fun.
We were all a little skeptical when we first heard about this Made In Microsoft text editor. All the frustrating experiences we had had with Visual Studio software were still fresh in our minds. We had learned to distrust any tool with the words Visual and Studio in its name.
Despite my prejudices – not to mention bitterness – I courageously set off on a VS Code adventure… and to my surprise, I greatly appreciated this new tool.
Advantages
I didn’t think I would be able to modify any Microsoft product – at least not like Sublime Text or Atom.
Boy, was I ever wrong! VS Code has a rich marketplace that offers counterparts to Atom and Sublime Text packages (not to mention some like Emmet, which are already integrated into VS Code).
Customizing this tool – which has been well provided for by its creators – is easy thanks to its configuration file (settings.json).
However, the real advantage to VS Code is its performance! It’s simply incredible, and all the more so considering that it is based on Atom’s Electron. Nothing bugs, from IntelliSense to the autocomplete/search system, to multiline editing extremely large files.
What packages do we use?
Must Have
- Debugger for Chrome: Integrated with Remote Chrome Debugger protocol.
- Atom Keymap: Ports Atom keyboard shortcuts.
- One Dark Theme: Based on Atom’s One Dark Theme.
- Project Manager: Manages projects inside VS Code.
- Path Intellisense: Autocompletes filenames
- Material Icon Theme: Styles the treeview with Material icons.
- EditorConfig for VS Code: Allows editorconfig files to be used.
- Highlight Bad Chars: Highlights bad characters in source files.
- PHP DocBlocker: Integrates DocBlock comments for PHP files.
Linter
Syntax Highlighting
- Swig: for Swig files
- Twig Pack: for Twig files
- Apache Conf: for Apache configuration files
- Gitignore: for .gitignore files
- Cucumber: for Gherkin files
Tools & Snippet
- Drupal Syntax Highlighting: For Drupal specific file types.
- WordPress Snippet: Shortcuts for WordPress development
- ACF-Snippet: Shortcuts for WordPress and ACF development.
- Ionic2-snippets: Shortcuts for Ionic2 development.
Bonus
- PHP Intellisense - Crane: Advanced autocompletion for PHP.
- Settings Sync: Synchronizes VS Code configuration with Git repository.
- Color Highlight: Highlights web colors in editor.
- Copy Relative Path: Adds contextual manual to copy relative path from files.
- Auto Close Tag: Automatically adds HTML/XML close tags.
- Align: Aligns code to make it more readable.
- Open in Github: Provides commands to open current files on Github (blame, file, history, etc.).
What’s missing
VS Code is truly an excellent text editor! It’s updated almost every week and the development team listens to its community.
If things go on this way, it has a glorious future ahead of it.
If things go on this way, it has a glorious future ahead of it.
Nevertheless, there are still a few things missing:
Coloring file statuses in treeview (according to the Git index) https://github.com/Microsoft/vscode/issues/178.
Supporting multiple folders in the same project
https://github.com/alefragnani/vscode-project-manager/issues/46 and https://github.com/Microsoft/vscode/issues/396.
https://github.com/alefragnani/vscode-project-manager/issues/46 and https://github.com/Microsoft/vscode/issues/396.
Customizing mouse shortcuts
https://github.com/Microsoft/vscode/issues/3130.
https://github.com/Microsoft/vscode/issues/3130.
Using the MacOS feature to hide the title bar and tab alignment (see Chrome and Atom)
https://github.com/Microsoft/vscode/issues/12377.
https://github.com/Microsoft/vscode/issues/12377.
Assigning colors to Sass Variables.
Colorize is supposed to integrate this function in the near future, and could therefore replace Color Highlight.
https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize.
Colorize is supposed to integrate this function in the near future, and could therefore replace Color Highlight.
https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize.
Don’t hesitate to speak up about any issues that seem vital to you for this project. The developers will take your concerns into consideration in their Roadmap.
Conclusion
After several days of tests, configuration and intensive fine-tuning, I have to admit that Microsoft has produced an excellent tool, even if there are still a few holes (see above).
VS Code is quick, attractive and easy to use and boasts a community that is 100% committed. Without a doubt, it has what it takes to entice all types of developers.
Nevertheless, I won’t be giving up Atom anytime soon, slow as it may be. For now, the missing functionalities are, in my opinion, too significant, and would have a major impact on my workflow. I’m confident that the development team will soon resolve these points. I will gladly give VS Code a second try with the hope of adopting it one day!
Nevertheless, I won’t be giving up Atom anytime soon, slow as it may be. For now, the missing functionalities are, in my opinion, too significant, and would have a major impact on my workflow. I’m confident that the development team will soon resolve these points. I will gladly give VS Code a second try with the hope of adopting it one day!
Once it matures, I believe that VS Code has what it takes to get ahead of Atom, thereby proving that Electron technology can be used to create attractive programmes (despite all the naysayers) that are also highly efficient.
If you’re also super hyped up about this editor (or not) leave a comment on this article.
Bonus
Visual Studio Code replacement icon
https://dribbble.com/shots/2436746-Visual-Studio-Code-replacement-icon
https://dribbble.com/shots/2436746-Visual-Studio-Code-replacement-icon
Iteration Plan
The VS Code team is incredibly transparent when it comes to their development. You can easily find their Roadmaps on the Github repository.
The VS Code team is incredibly transparent when it comes to their development. You can easily find their Roadmaps on the Github repository.
Our configuration file (settings.json) -
⌘ + ,
Updates
28.04.2017 As discussed on their blog, Atom is working on the its text editor’s performance
Will its global performance be improved or only its startup time? Only time will tell.
Will its global performance be improved or only its startup time? Only time will tell.
*This article is in no way sponsored by Microsoft. We’re just a bunch of developers writing articles about the latest trends and tools, as well as our passions. =)