Visual Studio Code: End‐to‐End Editing and Debugging Tools for Web Developers
Published by
John Wiley & Sons, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256www.wiley.com
Copyright © 2019 by John Wiley & Sons, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978‐1‐119‐58818‐4
ISBN: 978‐1‐119‐58830‐6 (ebk)
ISBN: 978‐1‐119‐58821‐4 (ebk)
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per‐copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750‐8400, fax (978) 646‐8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748‐6011, fax (201) 748‐6008, or online at http://www.wiley.com/go/permissions
.
Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Web site may provide or recommendations it may make. Further, readers should be aware that Internet Web sites listed in this work may have changed or disappeared between when this work was written and when it is read.
For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762‐2974, outside the United States at (317) 572‐3993 or fax (317) 572‐4002.
Wiley publishes in a variety of print and electronic formats and by print‐on‐demand. Some material included with standard print versions of this book may not be included in e‐books or in print‐on‐demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com
. For more information about Wiley products, visit www.wiley.com
.
Library of Congress Control Number: 2019944259
Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc., is not associated with any product or vendor mentioned in this book.
BRUCE JOHNSON is a partner at ObjectSharp Consulting and has been working in the computer industry for 33 years (has it really been that long?). During that time, he has gone from writing UNIX code for mainframes and minicomputers to focusing on PCs and Windows. It was really the advent of Visual Basic and the World Wide Web in the early 1990s that triggered that change. But since then, he has been working on projects that are at whatever the leading edge of Windows technology happened to be. This means he has built rich client applications, web applications, services, and APIs. And there has been a sprinkling of database and front‐end development thrown in for good measure. Just because.
As well as having fun with building systems, Bruce has spoken hundreds of times at conferences and user groups throughout North America. He has been a Microsoft Certified Trainer (MCT) and the co‐president of the Metro Toronto .NET User Group. He has also written columns and articles for numerous magazines. For all this activity, Bruce was also a Microsoft MVP for more than ten years. At the moment, he's already working on the outline for his next book.
BENJAMIN PERKINS is currently employed at Microsoft in Munich, Germany, as a Senior Escalation Engineer for IIS, ASP.NET, and Azure App Services. He has been working professionally in the IT industry for over two decades. He started computer programming with QBasic at the age of 11 on an Atari 1200XL desktop computer. He takes pleasure in the challenges that troubleshooting technical issues has to offer and savors the rewards of a well‐written program. After completing high school, he joined the United States Army. After successfully completing his military service, he attended Texas A&M University in College Station, Texas, where he received a Bachelor of Business Administration in Management Information Systems. He also received a Master of Business Administration from the European University.
I'D LIKE TO THANK MY four children, Curtis, Gillian, Cameron, and Kyle, for their love and support. They are teenagers or young adults now, so getting time alone to write wasn't a challenge. In fact, it was a regular request of theirs. But they have always been supportive of my writing projects and I am incredibly proud of them. My life would be much less rich without them.
My children are not the only people in my life who have been supportive of my writing. There is one other, whose modesty and desire for privacy prevents me from acknowledging them by name, who has been a large part of my impetus to write, not just this book but others. They know who they are and how grateful I am for their support.
Writing a book is a strange combination of lonely and collaborative. Much of the text is written while sitting late at night at a desk or on weekend mornings in a coffee shop. But once the first draft is complete, it gets passed into the hands of some incredibly talented people. And those people are the reason why the prose is grammatically correct, in the active voice, and flows in a logical sequence. It has always been a pleasure to work with the editors, technical editors, and copy editors of Wiley, and this book was no exception. I'm incredibly grateful for their help and attention to detail. They are a big reason why you can read what I have written.
In a surprisingly short period of time, Visual Studio Code has become very popular among web developers. Part of that is because it's fast, lightweight, and is available on the three main platforms (Windows, Mac, Linux). But it also boasts several features that set it apart from the competition. This includes support for IntelliSense, refactoring capabilities, and an extensive ecosystem of extensions. But even beyond the features that help developers craft code, there is also debugging support. It's possible to open a .NET Core project from within Visual Studio Code and get end‐to‐end execution and debugging functionality.
The goal of this book is to help developers become not just familiar, but productive in Visual Studio Code. It starts with an introduction to the editing features of the workspace and continues with the more advanced functionality (including refactoring and key bindings). The book finishes with an extensive look at the extensibility of Visual Studio Code, so that you can add whatever functionality you need to make you days more productive.
Here is a glance at what's in each chapter.
The goal of the book is to provide the information needed by an existing web developer to be able to use Visual Studio Code to do full‐stack development. The book remains agnostic on the language being used to develop the web application, although the examples are done in JavaScript, with occasional snippets of C# and Python.
I am making certain assumptions regarding the reader here:
In general, I expect that most of the readers of this book will be existing developers who are intrigued by what they have heard about Visual Studio Code. For that group, the purpose of the book is to provide a basis for using the tool to do their development tasks. However, it's not like current Visual Studio Code users are ignored. For them, the goal of the book is to expand their knowledge of how the tool works and the extensions that are available. Regardless of which group a reader falls into, lots of information will be immediately useful and ultimately invaluable.
We welcome your comments and questions! If you think you've found a mistake in the book, please tell us at errata@wiley.com
. You can download the companion files that accompany each chapter from www.wiley.com/go/visualstudiocode
and for any feedback you have about this project, you can contact me any of these ways:
@LACanuck
bjohnson@objectsharp.com
The choice of the editor used by any developer is an incredibly personal one. The reason to pick one over the rest depends on a collection of attributes typically related to the tasks they perform on a daily basis. Developers look for functionality, keystroke shortcuts, code snippets, colorations, and more that allow them to stay productive.
Dislodging developers from their choice is not easy. Any change in editors is going to result in an immediate loss of productivity. After all, it takes time to become familiar with the features offered and have them become a natural part of the coding “flow.” As a result, it takes a special level of “better” for a developer to switch editors.
For this reason, the success of Visual Studio Code speaks volumes for its features and functionality. Although it has been officially released for just three years (it left public preview in April 2016), it has quickly become one of the top editors in terms of popularity, competing with Sublime Text, Atom, and UltraEdit for the top spot.
But that doesn't matter to you, the reader. What you care about more is what Visual Studio Code can do to help you be productive. As a developer, it is frequently the small things that make the biggest difference—knowing how to add code with a single keyboard chord, being able to do client and server debugging on your Node.js
project, or language‐sensitive code completion. Any, all, or none of those might matter, but the goal of this book is to help you find the five or ten features that matter to you and that will make you excited to use Visual Studio Code.
Visual Studio Code is a cross‐platform editor. In this instance, cross‐platform means that a version is available to run on Windows (7, 8, and 10), macOS, and Linux. The installation process is similar for each, and the starting point is the same in all cases: https://code.visualstudio.com/Download
. Figure 1-1 shows what the download page looks like presently, but it's naturally subject to change.
The most efficient starting point for a Windows installation is to download the desired installer. You have six possible options—three different installers each of which is available in 32‐bit and 64‐bit formats, divided along two separate attributes. First, you can choose from three installer types—System, User, and Zip:
AppData\Local\Programs
in your user directory. Because this is actually the preferred installer, you will be asked if you want to uninstall any versions that had been installed using the System Installer.When Visual Studio Code is installed using one of these two installers, you will automatically be notified when an update is available. The pace of change for Visual Studio Code means that updates are delivered approximately once a month.
AppData\Local\Programs
by the User Installer. Once you have opened the file, you can copy the contents to whatever location you prefer. However, you're responsible for creating any links to the executable (called code.exe
) that you want to place on your desktop or task bar. Also, you won't automatically receive updates. If you wish to use a more recent version, you'll need to download a new ZIP file and copy the files over again.The second attribute available for the installer has a value of either 32‐bit or 64‐bit. This refers to the width of the data units supported by the CPU on your device. If you are running 32‐bit Windows, choose the 32‐bit version of the desired installer. If you are running 64‐bit Windows, you can choose either the 32‐bit or 64‐bit version.
For both the System and User Installers, running the installation program provides a similar experience. The following screens make up the installation process:
C:\Users\<your username>\AppData\Local\Programs\Microsoft VS Code
. For the System installation, it is placed in C:\Program Files (386)\Microsoft VS Code
. The (386) part of the directory is left off if you're running on a 32‐bit operating system.
PATH
environment variable. This allows Visual Studio Code commands to be invoked from within a command‐line tool. Keep in mind that it takes a restart of your computer for any changes to PATH
to take effect.
The basic steps involved with installing Visual Studio Code on Linux are the same regardless of the distribution you are using:
However, the specifics within each of these steps do depend on your distribution. The precise instructions for a number of different distributions are described in the following sections.
All of the figures in this section were captured from within Ubuntu, so you might see something slightly different in your own environment. Also, be aware that you need to have a desktop installed in your Linux environment in order to run Visual Studio Code.
The installation flow for Ubuntu or Debian is quite similar to Windows or macOS:
https://code.visualstudio.com/download
. Figure 1-6 shows what this web page looks like.
cd ~/Downloads
apt
utility:
sudo apt install ./<file>.deb
At this point, Visual Studio Code should be ready to go. Execute code
from within Terminal to launch the application (see Figure 1-8).
Another way to get the installation files for Visual Studio Code is through a YUM repository. Microsoft maintains a YUM repository that contains the current stable 64‐bit version of Visual Studio Code.
To install the key and the YUM repository, execute the following commands on your Linux machine:
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio
Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\
ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" >
/etc/yum.repos.d/vscode.repo'
The first command imports the key to the repository into your environment. The second adds the Microsoft repository as a recognized YUM repository. This is accomplished by creating a file (called vscode.repo
) and putting it in the /etc/yum.repos.d
directory.
Once this is done, you can update the YUM package cache by executing the following command:
yum check-update
Now you're ready to actually install Visual Studio Code. The yum install
command initiates the installation:
sudo yum install code
When the command is finished, Visual Studio Code is ready to run.
For these distributions, the YUM repository is the best choice for getting Visual Studio Code. What differs are the commands that need to be executed. The following commands install the key and repository:
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio
Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ntype=r
pm‐md\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" >
/etc/zypp/repos.d/vscode.repo'
These next two commands will update the package cache and install Visual Studio Code:
sudo zypper refresh
sudo zypper install code
Another package manager that is occasionally found in the Linux world is Nix. Although Microsoft doesn't maintain a Nix package, a community‐managed version is available at https://github.com/NixOS/nixpkgs/blob/master/pkgs/applications/editors/vscode/vscode.nix
.
To install Visual Studio Code using Nix, set the allowUnfree
option in your config.nix
file to true. Then execute the following command:
nix-env -i vscode
The starting point for installing Visual Studio Code on macOS is, like Windows, the Visual Studio Code download page (found at https://code.visualstudio.com/Download
and shown on Safari in Figure 1-9).
Click the Mac option on the right‐hand side to start the download. When it has finished, open the download section on your browser and open the downloaded file. You will be greeted with a warning message indicating that the file you're trying to open came from the Internet (Figure 1-10).
Click the Open button to expand the downloaded file. Because the download is a ZIP file, this means that the contents become visible. Drag the Visual Studio Code.app
file to the Applications
folder. This makes Visual Studio Code available in your Launchpad.
If you want to add Visual Studio Code to your dock, right‐click the icon and choose Options ➣ Keep In Dock (Figure 1-11).
Although it is not essential to being able to use Visual Studio Code, it is instructive to understand the underpinnings that allow it to work across the disparate platforms that it supports. That is especially true if you have any thoughts about trying to create extensions for Visual Studio Code, a topic that is covered in Chapter 10, “Creating Your Own Extensions.”
First, Visual Studio Code is an open‐source project. This means that the source code is readily available for anyone to look at. Or even contribute to, if you have the desire. You can find the source at https://github.com/Microsoft/vscode
.
Visual Studio Code is based on a framework called Electron. Electron was designed to allow for the creation of desktop applications using the front‐ and backend components of a web application. On the frontend side, JavaScript, HTML, and CSS are used to create the user interface functionality. The interface is rendered using Chromium.
On the backend, Node.js is used to serve the user interface component and provide any additional functionality. This combination of technologies allows it to run on the desktop of three major platforms: Windows, macOS, and Linux.
Electron was originally created by GitHub and, ostensibly, its primary purpose was to support the Atom text editor. But its usage didn't stop there. It is currently used in a wide variety of applications, ranging from integrated development environments (IDEs) to music players to games.
Though Electron is the foundation on which Atom was built, Visual Studio Code does not use Atom as its editor. Instead, it uses the same text editor that is found in Azure DevOps (formerly named Visual Studio Team Services, which was formerly Visual Studio Online). The text editor is called Monaco. It is also open‐source and available separately from Visual Studio Code (you can find the repository at https://microsoft.github.io/monaco‐editor
).
Additional common functionality is implemented through a number of other channels. For example, colorization is provided through Monarch, a library that allows you to specify a syntax highlighter using a declarative syntax. What's even better is that the syntax is expressed using JSON, something that is likely to be familiar to most web developers.
As another example, language‐specific functionality, like auto‐completion, formatting, and diagnostics, are implemented in a separate language server. This server runs in a process separate from Visual Studio Code, the goal being to minimize any impact on the IDE that performing continual lexographical analysis could have. Visual Studio Code communicates with these servers (there is typically one for each language you are editing) using the Language Server Protocol (LSP).
You've seen how to install Visual Studio Code on the different operating systems that it supports. Once the application is ready, the user experience is very consistent across the platforms. That has to do with how Visual Studio Code was built (that is, on the Electron platform).
In subsequent chapters, you'll learn how to customize the IDE to more closely fit your own working style. You'll also see how Visual Studio Code works hard to make your development process easier and faster.