Visual Studio Code

In preparation for our fall, 2016, CMWEB 240 class on developing web pages using the .Net environment, I have been briefly reviewing Visual Studio Code (version 1.3). This is a different product from the traditional Visual Studio and has a significantly UX/UI experience than Visual Studio. You can download a copy here. As far as I can tell, this more experimental version is presently free. One aspect I particularly like about the tool is that you can run it on a number of operating systems (Windows, of course; also Mac [OS X], Debian, Ubuntu, RedHat, Fedora, and CentOS). Let’s investigate the interface a bit.

After downloading (to a Mac in my case), you extract the zip archive and place the application in the appropriate spot (in my case the Applications folder). The shipping version relies on a number of extensions (for example, if you prefer the Vim editor, there is an extension for that). There is also a significant amount of documentation (which should be helpful for students and those just getting started).

Let’s first examine the editor. Refer to the screen capture below. Panel [1] is the file and folder explorer. One can then have up to three files being edited at the same time. In this case, I have a json file, a SASS file and the resulting CSS file [numbers 2 – 4]. I have found this side by side editing to be very helpful. If I do a build, the output (including errors) appears in the area marked [5] below.

Screen capture of Visual Studio Code editor

One of the features I like about this editor is that it opens with the same configuration of files as when you closed it. It is quite easy to pick up where you left off.

You can also take advantage of the command palette (CMD+Shift+P) to work with preferences. You can start typing (for example, the word user) and the list of choices shortens to 1.

Overview of commands available

User settings are stored in a .json file (as are most of the preferences). You can also search (CMD+Shift+F) and further configure your search (CMD+Shift+J). You can even use regular expressions in your search (across files and folders).

Search interface

The status bar also contains a fair amount of useful information.

Status Bar information

In this case, we see the type of encoding and the type of file we are editing (in addition to the location of the cursor).

By default, there are smart editing for both JavaScript and TypeScript languages. Many other languages are supported by extensions. Here is a simple example of the smart editing capabilities. In this case, I have just created a JS file and typed the keyword var on line 2. I immediately see a number of choices.

Smart editing

One can also see swatches of the chosen color (if one uses hex values). It would appear that neither hsla nor rgba are fully supported (out of the box). Here is an example of the colors chosen:

Color swatches when one is coding CSS

There is support for multiple cursors (Opt+Click). For example, you can edit multiple HTML <span> element details at once. In this case, I added the CSS class button to all 4 elements at once. I do like the ability to work with multiple cursors. Since you control where you click, the multiple cursors do not need to be adjacent to each other.

Editing using multiple cursors

Yes, there are many more features. I simply wanted to introduce this tool to readers. If you are working with the .Net framework, I encourage you to try this editor out.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social media & sharing icons powered by UltimatelySocial