DailyJS

Visual Studio Code

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

node editors Microsoft

Visual Studio Code

Posted by Alex R. Young on .
Featured

node editors Microsoft

Visual Studio Code

Posted by Alex R. Young on .

Visual Studio Code

Yesterday Microsoft released Visual Studio Code, or VSCode for short. It's an editor for Windows, Linux, and Mac OS, and is aimed at web developers. That doesn't just mean ASP.NET, but also Node.js.

The Node features include IntelliSense, debugging, linting, and outlining. Some of these features extend to other web technologies, like HTML, CSS, LESS and SASS. And, it even understands tasks with bundled support for autodetecting Gulp files. On a Mac you can press Shift-CMD-P then search for "Run Tasks" to get a parsed list of Gulp tasks.

Visual Studio Code also has Git integration, which I found to be perfectly manageable although I still quickly reached for my terminal when doing anything beyond basic commits.

If you're not familiar with Microsoft's JavaScript-related technologies, then you'll need to familiarise yourself with some of the basic TypeScript concepts. For example, VSCode is capable of providing IntelliSense suggestions thanks to TypeScript definition files. These files contain metadata for JavaScript objects and function signatures. This makes sense when you consider Microsoft's languages, like C#, have details about types for method signatures. IntelliSense is able to provide a match for a method, but also make it more meaningful with details on the parameters based on the type.

To really make the most of VSCode, you'll need to find the right TypeScript definition files. Microsoft's Node tutorial explains how to quickly set this up for Node itself, but you can also help the editor provide IntelliSense for projects like Express and AngularJS. The way you do that is to install definition files, and the best source I know of is DefinitelyTyped. There's a package manager for definition files called TSD.

The editing features are comparable to Atom and Sublime Text -- VSCode supports bracket matching, multi-cursor editing, snippets, go to definition, go to symbol, gutter indicators, peek (a Visual Studio feature that shows you another file in a panel), split windows, find in project, and symbol renaming. It's very powerful and will strongly appeal to those of you with previous experience working in Windows-based editors.

I say Windows-based editors because the keyboard shortcuts, even on a Mac, are very reminiscent of Visual Studio. Some of the text selection and deletion shortcuts that I instinctively use in Mac-based editors do things that I didn't expect, so it'll take me a while to get used to VSCode.

Another issue I have is I don't like the typings folder that VSCode adds to the current directory for the TypeScript definition files. I'd rather that was system-wide, because I don't want to accidentally commit it to my project. I could add a global ignore for it, but the folder name seems too generic for that. Also, I really don't like the idea of adding code comments for the definition files, I'd much prefer the editor to remember which definition files I use for a given project.

VSCode is definitely an impressive editor. As a Vim user for over 15 I'm unlikely to switch, but I enjoyed trying it out, and the JavaScript support is compelling. It's worth trying if you're a JavaScript programmer.