Experiencing Visual Studio Code

At the recent Build conference, Microsoft released Visual Studio Code, which is an Atom-like cross-platform code editor, supporting Windows, Mac and Linux. Similar to Sublime Text and Atom, Visual Studio Code includes powerful features, such as syntax highlighting, keyboard support with customizable bindings, command palette, IntelliSense and so on. It is so exciting to see Microsoft getting started to embrace open source development and provide free software. Is it worth using Visual Studio Code for development? Let’s try it out.

code_welcome

Markdown Preview

Visual Studio Code supports Markdown preview very well. We can first split editor by pressing ctrl+**, and then press **ctrl+shift+v to activate preview mode on the right panel. When editing the Markdown file on the left panel, the preview will be updated in real-time.

code_markdown

IntelliSense

IntelliSense is one of the highlights that built in Visual Studio for years. Now Microsoft brings the fantastic functionality to Visual Studio Code too. It makes me feel I’m using a light version of Visual Studio other than a text editor.

code_intellisense

References

When writing code in C# or TypeScript, we can search references by pressing shift+F12. This is fairly efficient for developers who often writes code with a text editor.

code_reference

Version Control with Git

In Visual Studio Code, it is pretty convenient to diff code and commit changes with Git.

code_version_control

Debugging Node.js

By default, there is no built-in debugger in Atom. We need to manually install debuggers for different programming languages. The preview version of Visual Studio Code has integrated a debugger for Node.js. Switch to debugging mode, and click configuration to generate launch.json. Name your application and set the file for debugging:

{
	"version": "0.1.0",
	// List of configurations. Add new configurations or edit existing ones.  
	// ONLY "node" and "mono" are supported, change "type" to switch.
	"configurations": [
		{
			// Name of configuration; appears in the launch configuration drop down menu.
			"name": "Dynamic Web TWAIN",
			// Type of configuration. Possible values: "node", "mono".
			"type": "node",
			// Workspace relative or absolute path to the program.
			"program": "server.js",
			// Automatically stop program after launch.
			"stopOnEntry": true,
			// Command line arguments passed to the program.
			"args": [],
			// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
			"cwd": ".",
			// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
			"runtimeExecutable": null,
			// Environment variables passed to the program.
			"env": { }
		}, 
		{
			"name": "Attach",
			"type": "node",
			// TCP/IP address. Default is "localhost".
			"address": "localhost",
			// Port to attach to.
			"port": 5858
		}
	]
}

Press F5 to see how it works.

code_debug

There are still many amazing features that I haven’t tried yet in Visual Studio Code. I do believe that Microsoft will make it more powerful and much better over time.

Search Blog Posts