The Visual Studio CODE Editor

Les Pinter



Introduction | Installation | Welcome to your office | Settings and Themes | Extensions | Intellisense (Emmet) Conclusion

Introduction

In a pathway named CODE, you can be sure that you'll be writing some code. So you'll need a text editor.

There are lots of editors that would work; the little NotePad.exe that comes with Windows would do. But once you start writing code, you'll soon tire of Notepad's stubborn refusal to help out in the many circumstances where it ought to know what you're trying to do and offer to help.

That's where Visual Studio CODE comes in. CODE is a separate product from Visual Studio 2017. It works with any type of text file - HTML, Cascading Style Sheets, JavaScript, C#, and anything else you need to edit. And for each type of file, it knows what to do. Allow me to explain.

Each type of file has a different extension - the letters after the period - like .html> or .css. The extension tells CODE what the rules are for that type of file. You'll probably be editing mainly .html, .css, .js and .cs files. Those represent web pages, style sheets, JavaScript and C# respectively. In each type of file, CODE knows what to look for, how to format the code, and how to provide IntelliSense (expression completion (which is called Emmet in the CODE editor).

In HTML, there are about 100 tags that appear enclosed in "carets" ("<" and ">"). Tags occur in pairs - <p> goes with </p>. Once you open the <body> section, your editor should know that it needs a </body> tag to close. CODE knows this. Type "</", and it will offer to complete the appropriate closing tag.

Similarly, in a .css (Cascading Style Sheet) file, once you provide a period, a classname and a left curly brace (e.g. ".BigHeading {"), you should see a list of valid attributes. Highlight one and press the Tab or Enter key, and "Emmet (CODE's version of IntelliSense) completes the word for you. No spelling errors! Such a deal!

In a JavaScript file, if you type the name of a class and a period (e.g. "jQuery."), a dropdown will appear just to the right of your cursor with a list of the names of about a hundred class members to choose from. As you type, the letters you've typed are used to filter the list. Eventually, there's only one left. But at any time you can press Tab, and the selected property or method name will be appended to "jQuery.".

But wait, there's more...

CODE is highly customizable. There are hundreds of settings that you can set to change how the editor works. Settings appear inside the Settings.json file, and generally look like "Setting: Value". These are stored in a file called user.settings, which you can open using File, Preferences, Settings. Here's what it looks like:

Fig. 1 - editing user.settings

There are over 500 settings pairs, all of which appear on the left side of the screen while you're editing user.settings, grouped into related categories. For example, there are 33 settings included in the WorkBench category. Just cut from the left and paste on the right.

There are also extensions, little programs that run inside the editor and add functionality. Click on the fifth and last icon at the left side of the screen and the extension installation menu will appear:

Fig. 2 - Installing/Removing extensions

Finally, after you've exhausted the two previous possibilities, you can apply different themes to change how the editor looks. Potentially, every user of CODE on earth could have a different user experience.

Let's get started.

Installation

http://Code.VisualStudio.com provides a link to download VS CODE. A link is added to your %PATH% environment so that you can CD to the directory where you want to start and type "CODE ." to open the editor in the selected folder. You can also open Code from the Start menu and open the folder you want to work with.

You might want to set up the CODE environment before you start using it. You can change settings at any time.

You can run VS CODE from the Start menu, but you can also open the Command window (Start, Run, "Cmd"

, use CD to go to the folder where you want to work, and type
CODE .
to start VS CODE in the selected folder.

Welcome to your office

The CODE environment is like many software environments today:

Fig. 3 - The Editor Environment

At the far left, an Activity Bar (A) of five icons controls what appears in the SideBar (B) - The Explorer, Search, Source Control, Debug or Extensions. In addition, the "Gear" icon at the lower left activates a context menu for launching a variety of options:

Fig. 4 - Context menu of additional options

Editors, as many as you want to have open, are displayed in the Editor Groups area (C). For each open file, a tab containing its name appears at the top of the Editor group. As you would expect, click on a tab to bring its editor to the front.

Keyboard Shortcuts

Every operation that's available from the menu, or from a context menu that you can display by right-clicking on something, can also be launched using some combination of keys - usually Ctrl+ or Alt+, or Ctrl+Shift or Ctrl-Alt, but also function (F-) keys. You can click on the tool icon at the lower left of the screen in the Activity Bar, or you can select Help, Keyboard Shortcuts Reference, which downloads a handy printable PDF from the Microsoft website (https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf). The sooner you memorize them, the sooner you'll amaze your friends at how fast you type.

Web page development, which is much of what developers do these days, involves adding or changing your HTML, changing a style or two, writing or fixing some JavaScript, and then opening the page in a browser. As much as I love VS Code, you should take a look at CodePen. You can see your HTML, CSS and JavaScript on a single screen, with the result continuously updated below:

Fig. 5 - CodePen at work
	(NOTE: CodePen refers to the displayed CSS and JavaScript without a LINK or a SCRIPT
	tag, so if you bring work over from CodePen to your own folder, you'll need to create
	and name a .css and a .js file and copy and paste it to your local files, and add the
	LINK and SCRIPT references to your .html file.)

Settings and Themes

The second selection in the "gear icon" context menu (which you can display by right-clicking on the icon) is Settings. It opens up a two-window editor: The left pane contains about 500 key pairs of settings that you can cut and paste into the right-side window, the user.settings json file. (JSON, or JavaScript Object Notation, consists of such key:value pairs.) They control everything in VS Code. For example, to display a "minimap" of the file you're editing, add this in user.settings:>

  "editor.minimap.enabled": true

The sixth selection in the same context menu, Themes, gives you a range of looks for your editor. Since it's where you'll spend most of your time for the rest of your career, it behooves you to experiment.

Fig. 6 - Theme selector

Extensions

There are hundreds of extensions available for VS Code. If you think of something that doesn't already exist, you can write your own. But before you do that, use Show REcommended Extensions from the context menu that's displayed when you click on the three little dots at the top of the Extensions pane:

Fig. 7 - Extensions

The extensions searchable, and a rating (one to five stars) appears just above the install button at the right of each extension. The number of downloads is also displayed, to give you some idea of how popular the extension is.

Extensions can be a big help in your daily work. The one that draws vertical lines to show you which pairs of parentheses and curly braces appear to match is a lifesaver, if you ever get six deep in a React.js script and accidentally delete too much.

Emmet

Emmet is VS Code's flavor of IntelliSense, the AutoComplete technology that's driven by your current language and defined classes.

Emmet always anticipates. If you're started a <paragraph> tag, the next time you type </, Emmet will suggest &/lt;. Pressing the tab key fills it in at the site of the cursor. Ctrl+Space at any time will produce Emmet recommendations.

Emmet doesn't just work with language elements. For example, if you've attached jQuery.js via a <script> tag, after you type the "$.", which is a surrogate for jQuery, the editor will suggest what you might want to type next:

Fig. 8 - Emmet revealing jQuery PEMs

Emmet will often do a significant portion of the text entry for you, and it won't misspell anything.

Conclusion

Visual Studio CODE may be the last editor you'll ever need. It's fast, customizable and extensible. And it thinks like you do.