Build a Java application in Visual Studio Code

For years, Java development has been dominated by the big three IDEs: Eclipse, InelliJ IDEA, and NetBeans. But we have other good options. Among the large field of generalized, polyglot code editors that have been gaining mindshare, Visual Studio Code has become a standout, and offers impressive Java support. VS Code also delivers first-class support of other technology stacks including front-end JavaScript frameworks, Node.js, and Python.

Should Visual Studio Code be your next Java IDE? This article gives an introduction to using Visual Studio Code to build an enterprise Java back end with Spring and connect it to a Svelte JavaScript front end.

Set up Spring Boot

To build along with this tutorial, you will need to have Java and Maven installed. You will also need the latest Visual Studio Code distribution for your system, if you don’t already have it. It is a simple install process.

Now let’s jump right in with a new project. You are going to use Spring Initializr to create a new Spring Boot Web app. Open VS Code and click the extensions icon on the bottom left. This will let you search for available add ons (and there are a lot of them). Type in “spring init” and you’ll see the Spring Initializr Java Support extension. Install it as seen in Figure 1.

Figure 1. Installing the Spring Initializr extension

IDG

Once installed (it won't take long), you can use it via the command palette, which is accessible with Ctrl-Shift-P (or View -> Command Palette from the main menu). With the command palette open, type “spring init” and you’ll see the newly installed command. Run it.

Now follow along with the wizard. You can accept most defaults like language Java; Java Version 12; artifact id “demo”; group id “com.infoworld”; packaging “JAR”; and the rest. When adding dependencies, add Spring Boot Web and Spring DevTools. (You can add more dependencies later by right-clicking the POM file and selecting “add starters.”) You’ll also select a location for the project; just select a convenient spot on your local drive.

Once the new project is created and loaded into your workspace, you can open a command line terminal by typing Ctrl-Shift-` or choosing Terminal -> New Terminal from the main menu.

In the terminal, type mvn spring-boot:run. The first time you do this, Maven will download your new dependencies. When that’s done, the dev server will be running. You can verify this by opening a browser and going to localhost:8080. You will see a default “not found” error page because we haven’t defined any routes yet, but this verifies that the server is up and listening.

You can quickly access files by hitting Ctrl-Shift-P and typing “Demo” to bring up the DemoApplication.java file. Open it, and you’ll see a typical standalone Spring Boot starter app.

Now we’re going to install the Java extension pack, which gives us a variety of features like IntelliSense and context-sensitive resource creation. Back in the extensions menu, type “Java extension,” and install the Java Extension Pack. Finally, add the Spring Boot Extension Pack.

Now you’ll notice when you open the DemoApplication.java file, VS Code helpfully offers run and debug commands right in the source file.

Import the Java project

At this point, Visual Studio Code understands Java, and will prompt you: “This Project contains Java, do you want to import it?” Go ahead and choose “Always.” Once that is done, VS Code will be able to auto-complete and so forth for Java.

Let’s add a REST controller. Open the file view (top left in the left-side menu), right-click on /src/com/infoworld/demo, and select “New File.” Name the file MyController.java. You’ll notice the VS Code has stubbed out your class for you as seen in Listing 1.

Listing 1. Java stub in VS Code

package com.infoworld.demo;
public class MyController {
}

Begin by annotating the class with @RestController. Notice that, with the installed extensions, you have full auto-complete support.

Inside the new MyController class, start typing “Get...” and you’ll get an auto-complete snippet for GetMapping; go ahead and select it. This will create a basic GET mapping that we’ll modify, as seen in Listing 2.

Listing 2. Basic GET mapping

@RestController
public class MyController {
  @GetMapping(value="/")
  public String getMethodName(@RequestParam(required = false) String param) {
      return "test";
  }
}

Now if you open localhost:8080, you’ll see a simple “test” response. Things are moving along smoothly.

Notice that the server is automatically reloading changes, thanks to Spring DevTools and spring-boot:run.

Create a Svelte front end

Now let’s open a new terminal — you can run terminals side-by-side by choosing Terminal -> Split-Terminal. In the new terminal, go to a convenient directory (not inside the Java project) and create a new Svelte front end, with the commands shown in Listing 3.

Listing 3. Svelte front-end scaffolding

npx degit sveltejs/template vs-java-frontend
cd vs-java-frontend
npm install
npm run dev

Now you should be able to browse to localhost:5000 and see the Svelte greeting page.

Add the front end to the workspace

Next, right-click in the file explorer, under the Demo project, and select “Add folder to workspace.” Navigate to the front-end project we just created with Svelte. That will add the front end to VS Code as part of the project workspace, so we can edit it.

Now add the Svelte for VS Code extension to VS Code using the same process as when you added the Java extensions above. Once the extension is installed, VS Code will be able to handle both the front-end JavaScript framework and the back-end Java.

Connect the front and back ends

We can test the front-end communication to the back end by using Ctrl-Shift-P to open the app.svelte file and modifying the script element to look like Listing 4.

Listing 4. Hitting the back end

<script>
            export let name;
            async function loadData(){
                        let response = await fetch("http://localhost:8080");
                        name = await response.text();
            }
            loadData();
</script>

Listing 4 runs a function that fires a simple GET request to our back-end endpoint and puts the response into the name variable, which is then reflected in the markup.

Java runtime configuration

To get information about and configure your Java runtime, you can open the command palette (Ctrl-Shift-P) and open “Configure Java runtime.” You’ll be presented with a screen like Figure 2.

Figure 2. Configuring the Java runtime

IDG

Notice that VS Code has detected your installed JDKs and determined which projects are using which version. It also allows you to install new version from within the IDE.

Debugging the Java

Debugging your Java in VS Code is also simple. Stop the demo app if it is running. Right-click on the DemoApplication file and select Debug. Spring Boot will run in debug mode.

Open MyController and double click on the red dot to the left of line 14 to set a break point. Now reload the localhost:5000 page. The breakpoint will catch and you’ll see a screen like Figure 3.

Figure 3. Debugging a Java file

IDG

Notice the menu bar allows you to continue, step into, step over, etc. You have full code debugging capabilities from here, including the ability to get variable state and run commands from the debug console at the bottom.

Running tests

Now open the DemoApplicationTests.java file, which was created by Spring Initializr. Notice there is a “Run tests” open. Click this. (You can also right-click the file and choose “Run Java.”) 

The tests will run and a checkmark will become available — this allows you to view the test run results, as seen in Figure 4.

Figure 4. Viewing JUnit results

IDG

Saving the workspace configuration

When you close VS Code, it will prompt you to save the workspace configuration, suggesting a name of workspace.code-workspace. Save the config, and when you open the project again, you will find all of your settings in place.

VS Code for Java

The Java capabilities found in Visual Studio Code are comparable to those in the more traditional Java IDEs, with the right extensions installed. The difference: VS Code tends to be more lightweight and responsive, and things usually just work with a minimum of fuss.

This speed and ease combined with the ability to seamlessly use other technology stacks — meaning you don’t have to shift gears to a new environment or wrangle with configuration — make VS Code a compelling option for Java development.