• 4 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 12/12/19

Use the Visual Studio Code Editor

You saw that we can write code on a basic text editor, but what about using an editor that is made just for software development?  It is called a code editor!  

Visual Studio Code

Visual Studio Code is a lightweight and fast code editor that allows you to add extensions, which means you can integrate many languages and features (which is called functionalities).  Although it is not an IDE, it can be mistaken for one because there are lots of available extensions, or in other words, add-ons, to enhance it.  These extensions provide the developer with the option to install:

  • an editor - to write code in

  • a debugger - to help locate bugs or errors in your code 

  • a compiler - to transform your code into something your computer can read 

It’s also lightweight, meaning that it simple, fast, and easy to use. It's ideal for smaller coding projects - like the ones you'd do for yourself!

Installing Visual Studio Code

 You can download and install Visual Studio code for free at the official website. This is a fairly straightforward process:

  • Click on the big download button for Windows, Linux, or Mac, depending on what type of operating system you use. 

  • A zip file will download.  Click on the file. 

  • Visual Studio Code will install and an icon will appear (which you can drag onto your desktop).  Click on the icon. 

  • When the pop-up asks you whether you should open the program, click on "open." 

Using Visual Studio Code

Once you have it downloaded and installed, launch the program. Let’s take a look at the application.

Visual Studio Code 

VS Code has support for Java development and offers extensions, which gives additional functionality to just your regular text editor.  With VS Code, not only do you get language support for Java, you have the option to download extensions to increase the functionality of your code editor based on your needs! Let’s take a look and see!

The code editor

You can go to File -> New File and open up the code editor.

The Code Editor on VS Code
The code editor on VS Code

Here is the code editor.  It should look like any other text editor with the name of your file at the top and a space to type in your data.  That’s not very interesting, is it?

Now, here is how it looks when I type in the code for TestJava:



public class HelloWorld {

   public static void main(String[] args) {

       System.out.println("I want to try VS Code");

          }

}



 

TestJava on VS Code without language support
TestJava on VS Code without language support

OK, that wasn’t so interesting.  The ends of our curly braces popped up, and there were some suggestions, but so what?  Well, to really get the best use out of it, we'll need something called language support, which helps identify elements of your code based on the programming language you're using. For that, we have to turn our file into a Java file. 

  1. Go ahead and open a new file by clicking File, the selecting New File.

  2. Click on File -> SaveAs ->TestJava.java

Now, type the code below into the editor:

 

public class TestJava {

   public static void main(String[] args) {

       System.out.println("I am using VS Code!");

          }

}

VS Code with Language Support
VS Code with language support

A completely different experience!  Check that out! Now when you type your code in, you will see how color coding, for better visibility as well as auto suggestions, which really help write your code faster. On top of that, it helps you to avoid making silly errors, like forgetting an end tag or curly brace.

Additional Visual Studio Code features

Let’s take a look at some of the features that make Visual Studio Code such a powerful (and free) tool that you can use for software development on your home computer!

The left side panel features a file explorer, search bar, debugger, and an extension option, but this last one is especially interesting and useful.

The extensions tab

Extensions are small programs that you can add on to Visual Studio Code in order to enhance functionality and customize it for your needs.  Let’s take a look at what we can do with Java on our editor!

Start by clicking on the bottom icon called Extensions in the left side panel.  This is the marketplace for extensions that can be installed on Visual Studio Code.

When you look under Enabled, it will show the extensions that have been installed.  As you see, I have a few Java extensions installed for Java language support.

Extensions Tab for VS Code
Extensions tab for VS Code

On the left side, you will see the extensions that I have enabled to make the Java language support work.  You can find extensions by typing them into the search bar on the top and and it will automatically search the marketplace.  It’s just like looking for apps to install on your phone.

If you type Java in the search bar on top, it will show you all the available extensions for Java:

Java Extensions in the VS Code Marketplace
Java extensions in the VS Code marketplace

Here, I’ve typed in Java to show you all of the possibilities!

Summary

In this chapter, we learned about Visual Studio Code, notably that:

  • it's lightweight, meaning it's best for small code projects.

  • you can add a plugin to enable auto-complete and color coding.

  • it provides an option to add plug-ins for extra features.

VSC is a great place to start, but for development projects or web applications, a simple code editor falls short of all the functionality you need. In the next chapter, we are going to find an even better tool that software developers use to code Java in the real world and on large projects:  the integrated development environment.

Example of certificate of achievement
Example of certificate of achievement