Markus Feng

Markus Feng

Williams College '21

Setting Up a Windows Development Environment Part 2 - Visual Studio Code

6 minute read

This is a part of a series on Setting Up a Windows Development Environment.

Introduction

A central part of a typical development environment is the code editor. There are many choices of editors, each with its own set of features and user experience. Using the right editor for a task can be a tremendous boost to productivity, because a well crafted editor lets you focus more of your time and mental energy on the content of what is being edited.

In this post, I’ll go through the process of installing Visual Studio Code, a Graphical User Interface (GUI) code editor. Make sure to follow along with your own machine if you want to experience the benefits of using the tools on your own machine. If you have any questions about any of the information here, or find any mistakes, feel free to contact me with my email to the left.

What is Visual Studio Code?

Visual Studio Code, also known as VSCode, is an open source Graphical User Interface (GUI) code editor developed by Microsoft. VSCode provides a huge amount of features for programming and software development, including language support for a wide variety of programming languages, a fully-featured debugger, Git integration, and powerful search functionality, among many others.

VSCode also contains a sizable selection of free extensions to increase the functionality of the editor as needed. These include extensions for language support, debugging tools, and aesthetic customization, among many others. You can browse the extension store for VSCode here.

For more information about VSCode, visit its official documentation here.

Installation

  1. Proceed to the Visual Studio Code website (https://code.visualstudio.com/).
  2. Choose the “Download for Windows - Stable Build” option to download the latest stable version of VSCode.
    • Stable builds are generally better tested and have fewer bugs, but might not contain some of the features currently in development that would be present in a nightly/cutting edge build.
  3. Double click on the VSCodeUserSetup executable in your Downloads folder to begin installing VSCode.
  4. Follow the on screen instructions to complete the installation of VSCode.
    • Note: One optional feature of VSCode is that it allows you add “Open in VSCode” as an option in the right click menu on files and folders in the Windoes explorer. If you want this feature enabled, make sure to check the two “Add ‘Open with Code’ action” boxes in the “Select Additional Tasks” screen of in the installation process.
  5. At this point, VSCode should automatically open for you.

Note: At some point, if you are using VSCode with a Git repository, VSCode may display the message Git not found. Install it or configure it using the 'git.path' setting. If this shows up, follow the steps in the Adding Cmder Git to VSCode section to add Git support.

Installing Extensions

  1. Click on the Extensions tab in left sidebar of VSCode (indicated by an icon with four squares).
  2. Search for the extension that you want to install.
    • If you are developing in some programming language, you usually want to install the extension to support that language. Here are some of the ones that I use:
      • C/C++ by Microsoft
      • Python by Microsoft
      • Java Extension Pack by Microsoft
        • You will also need to have the Java Development Kit (JDK) installed in order to program in Java on the computer. If you do not have one installed, VSCode will prompt you and give you a link to install a recent version of OpenJDK, the open source JDK.
      • LaTeX Workshop by James Yu
        • You will need to have a distribution of LaTeX installed in order to compile LaTeX documents. On Windows, I recommend using the MiKTeX distribution of LaTeX, since it makes using LaTeX and installing new packages on the fly very easy.
  3. Click on the “Install” button and let VSCode perform the installation. It’s that simple!

Cmder Integration in VSCode

One of the features of VSCode is that it contains support for an integrated terminal that is displayed at the bottom of the VSCode window by default. This terminal can be opened by using the keyboard shortcut Ctrl + ~ when in a VSCode window. By default, the terminal that comes with VSCode is the Windows command prompt. If you followed the previous tutorial to set up the Cmder console emulator, you can opt to use the Cmder console instead for the integrated terminal.

(Steps adapted from here)

  1. Press Ctrl + , to open VSCode settings.
  2. Search for settings.json in the “Search settings” box.
  3. Click on the “Edit in settings.json” button.
  4. You should see a pair of open brace ({) and close brace (}) if your settings.json file is empty. If you already have other VSCode user settings, they would appear here. Paste the following text in your settings.json between the braces. 
     "terminal.integrated.shell.windows": "cmd.exe",

 "terminal.integrated.env.windows": {
 "CMDER_ROOT": "[cmder_root]"
 },
 "terminal.integrated.shellArgs.windows": [
     "/k",
     "%CMDER_ROOT%\\vendor\\bin\\vscode_init.cmd"
 ],
  5. Replace the text [cmder_root] with the path to the folder with the Cmder installation. Make sure to replace any backslashes (\) in the path with two backslashes. For example, if your path to the Cmder installation is C:\Users\name\Documents\cmder, then your settings.json file should look something like this: 
     {
 "terminal.integrated.shell.windows": "cmd.exe",

 "terminal.integrated.env.windows": {
 "CMDER_ROOT": "C:\\Users\\name\\Documents\\cmder"
 },
 "terminal.integrated.shellArgs.windows": [
     "/k",
     "%CMDER_ROOT%\\vendor\\bin\\vscode_init.cmd"
 ],
 }
    • One way to find the path of your Cmder installation is to open the Cmder installation folder in Windows File Explorer, right click on the cmder folder name in the address bar (the bar that begins with This PC), and choose the option “Copy address as text”. Then you can paste this address into VSCode. Don’t forget to replace the backslashes (\) with two backslashes.
  6. Save your changes to the settings.json file.
  7. Now, if you press Ctrl + ~ to launch the integrated terminal, you should see the Cmder terminal appear at the bottom of your VSCode workspace. To tell that it’s the Cmder terminal, the prompt If you already have a standalone Cmder window open, close that first to ensure that the integrated terminal becomes activated.

Adding Cmder Git to VSCode

Because Cmder comes bundled with own version of Git, we do not need to install a separate standalone version (though you are welcome to if you want). The following steps explain how to tell VSCode where the Cmder git installation is located, so you can use the VSCode Git integration features.

(Steps adapted from here)

  1. Press Ctrl + , to open VSCode settings.
  2. Search for settings.json in the “Search settings” box.
  3. Click on the “Edit in settings.json” button.
  4. If you followed the previous step, you should see the contents you have previously added to the settings.json file. Paste the following text in your settings.json file, after your existing text, but before the closing brace. 
     "git.enabled": true,
 "git.path": "[cmder_root]\\vendor\\git-for-windows\\cmd\\git.exe",
  5. Once again, replace the text [cmder_root] with the path to the folder with the Cmder installation. Make sure to replace any backslashes (\) in the path with two backslashes.
  6. Restart VSCode. At this point, if you open a folder with a Git repository and see a git branch symbol with the branch name in the bottom left (e.g. master), then you have successfully set up Git in VSCode.

This is a part of a series on setting up a Windows Development Environment. Stay tuned for more updates in the future!

More Information

Alternative Editors

If you like to explore an alternative to VSCode, here is an incomplete, subjective listing of text editors that are popular among programmers. Note that the ones in this list are mostly language-agnostic editors; there are many other editors that are designed for a specific language, such as IDLE (for Python) or Eclipse/Netbeans (for Java):

  • Terminal Based
    • These editors run on and live in a terminal. One major advantage of these editors is that they can be run remotely with only terminal access.
    • Emacs
    • Vim
    • Nano
  • Graphical User Interface (GUI) Code Editors
    • These editors are generally more lightweight than full-blown Integrated Development Environments. They provide a good selection of features, while boasting faster startup times and lower memory usage.
    • Visual Studio Code is generally considered to be a GUI Code editor.
    • Sublime Text
    • Atom
    • Notepad++
  • Integrated Development Environments (IDEs)
    • These editors are the heavyweight alternative to GUI Code Editors. They pack in a ton of features for developers, but may require more resources, including license fees (though these may be waived for educational or noncommmercial use).
    • Visual Studio
    • Jetbrains IDEs (e.g. IntelliJ IDEA, PyCharm)

You may also enjoy