Visual Studio Code Features Part 1

WRITTEN BY GARETH DUNNE @JSDIARIES

Visual Studio Code

In the last year Visual Studio Code has been constantly improving and its becoming more renown in the software development community. Coming from someone who originally used Sublime I now only use Visual Studio Code ,this is mainly because of a more diverse implementation of its own Intellisense features for languages such as TypeScript (which is is also what Visual Studio Code is written in) .

By pressing Ctrl+Space we are able to we access a huge list of member accessors/methods that you would otherwise not be aware of or that you might have to look up.

This saves you time and shows you description/explanation of the parameters or method accessers without disengaging you from your work environment. Some Intellisense features are not included in Visual Studio by default.

Although Visual Studio Code supports most languages out of the box you can usually find your desired language by searching for it in the extensions tab and then finding the support link on their detail page.

In comparison to other text editors such as Sublime, Brackets and Atom, Visual Studio Code has brought some core functionality from its full IDE counterpart. It brings much of this useful functionality and removes some of the more obscure features that would go unused by most day to day developers.

It is also available on Mac and Linux so non Windows users are now able incorporate a stripped down version of Visual Studio in their operating system. Lets run through some of these features included in the most recent version as of the publishing date of this post. The Microsoft devs are also kind enough to give us new monthly versions of Visual Studio Code with new features every month or so.

If you are looking for a font with a bit more pop in Visual Studio Code you could do worse than:

https://github.com/tonsky/FiraCode#terminal-support.

This add on gives your dev environment some pretty nice icons and symbols which enable your attractive code to be more attractive. It’s a win–win situation.

On a more serious note this may in fact actually increase your productivity, if your eyes are scanning across a code base, symbols and operators might stand out as more defined if they are in contrast to everything else beside it so this one is definitely worth a shot. On a more personal note I prefer the default VSC syntax highlighting over other editors such as Sublime.

I just think that every function, parameter, data annotation, keywords etc are suitably highlighted with an appropriate color, especially the dark theme. In contrast to this I thought the sublime color schemes were quite bright, neon and flashy although I was a big fan of the material design theme for it.

Check it out here.

https://github.com/equinusocio/material-theme

Visual Studio Code comes with full debugging support to view your code being compiled step by step or at certain specified breakpoints if you so choose. Go to the extensions tab and search for any debugging type extensions. These extensions can be specific to languages such as C# or Node.js.

When an extension like this installed VSC is given an debug adapter which defines a debug type. When debugging begins VSC looks up that adapter based on its type and launches the exe as a separate process. This is how the debugging begins.

To start the process we should navigate to the debugging tools by clicking the fourth option in our Visual Studio Code sidebar. This will bring you the debug screen like so:

By assigning a configuration and launch the debugging you should see your launch.json file. This contains all the attributes for your debugging session. You can also view which properties are available by using VSC Intellisense ctrl + space.

VSC has implemented a extensive but user friendly debugging interface. If you have any experience of debugging in its big brother IDE or have even just debugged with Java, C# in other environments they aren’t world apart. VSC debugging features highlight its rich array of options in comparison to other text editors.

At the moment I use VSC debugging capabilities to debug Typescript through VSC and Chrome for an Angular 2 application. For more information on debugging TypeScript check out this blog post from one of the Microsoft devs.

Jaime Tarquino https://blogs.msdn.microsoft.com/jtarquino/2016/01/24/debugging-typescript-in-visual-studio-code-and-chrome/

The ability to debug in a IDE like environment opens up a lot of opportunities for developers as previously using languages like C# in a text editor was unheard of because of the lack of debugging options. For more detailed instructions on debugging in Visual Studio Code check out the official documentation here: https://code.visualstudio.com/Docs/editor/debugging

Visual Studio Code allows you to link your Git repository with relative ease. It is the 3rd option in the user friendly navigation bar on the left hand side of the editor.

The button initializes the init () function Git command It will add all your files into your repository. As someone who is more used to using Visual Studio IDE’s team sharing services, having GIT implemented seamlessly into the user interface is incredibly useful and appreciated.

The notifications on what files are available to check in/commit to your local repository is an insightful tool-tip. You can later full push your changes to your GIT account from your local repository. By clicking the icon with the 3 small circle in a horizontal line we get access to full list of Git commands

 

Sidenote

If you have ever tried to use the snipping tools to capture a internal menu but it kept disappearing every time you clicked new than fear not. When you are trying to make some sort of documentation and have the snipping tool open just press CTRL + Fn + PrntScrn. This will activate the snipping tool and you capture your snip from there with the menu in screen. This is an old but relevant tip for the creation of any documentation or blog post. Kudos to Micheal Greene for reminding of this :

https://blogs.technet.microsoft.com/migreene/2007/05/12/how-to-use-the-snipping-tool-to-capture-context-menus/