“This is the 30th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

For years, Java development has been dominated by three ides — Eclipse, InelliJ IDEA, and NetBeans. But we have other good options. Among the growing number of general-purpose multilingual Code editors, Visual Studio Code has emerged as a leader with impressive Java support. VS Code also provides first-class support for other technology stacks, including front-end JavaScript frameworks, Node.js, and Python.

Should Visual Studio Code be your next Java IDE? This article showed you how to use Visual Studio Code to build an enterprise-class Java back end with Spring and connect it to the Svelte JavaScript front end.

Set the Spring Boot

To complete the tutorial, you will need to have Java and Maven installed. If you don’t already have one, you’ll need to install the latest Visual Studio Code distribution for your system. This is a simple installation process.

Now let’s jump right into a new project. You will use Spring Initializr to create a new Spring Boot Web application. Open VS Code and click on the extension icon in the lower left corner. This will let you search for available plug-ins (there are many). Type “Spring Init” and you will see that Spring Initializr Java supports extensions. Install it as shown in Figure 1.

Figure 1. Installing the Spring Initializr extension

Once installed (which won’t take long), you can use it from the Command line, which you can access from Ctrl-Shift-P (or from the main menu, View -> Command Palette). Open the command line, type “Spring init”, and you will see the newly installed command. Run it.

Now follow the guide. You can accept most of the defaults.

When adding dependencies, add Spring Boot Web and Spring DevTools. You can add more dependencies later by right-clicking on the POM file and selecting “Add Initiator”. You also have to choose a location for the project; Just choose a convenient location on your local drive.

Once the New project has been created and loaded into your workspace, you can open a command-line Terminal by typing Ctrl-Shift- ‘or from Terminal -> New Terminal.

On the terminal, enter MVN spring-boot:run. The first time you do this, Maven downloads the new dependency. When complete, the development server will be up and running. You can verify this by opening a browser and going to Localhost :8080. You’ll see a default “Not Found” error page because we haven’t defined any routes yet, but this will verify that the server is up and listening.

You can press Ctrl-shift-p and type “Demo” to bring up the demoApplication. Java file for quick access. Open it and you’ll see a typical stand-alone Spring Boot launcher application.

Now we will install the Java extension pack, which provides us with various features such as IntelliSense and context-sensitive resource creation. Go back to the Extensions menu, type “Java Extensions “, and then install the Java extensions pack. Finally, add the Spring Boot extension package. Now you’ll notice that VS Code provides run and debug commands in the source file when you open the demoApplication.java file.

Importing a 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 this is done, VS Code can do things like auto-complete for Java.

Let’s add a REST controller. Open the File view (upper left of the left menu), right click/SRC /com/jay/demo, and select “New File”. Name the file myController.java, as shown in Listing 1.

Java in listing 1.vs code

package com.jay.demo;
public class MyController {

}
Copy the code

First, annotate the class with @RestController. Note that after installing the extension, you have full auto-complete support. Also note that you can always request IntelliSense and autocomplete by placing the cursor where you need help and then typing Ctrl-space, which will cause VS Code to offer suggestions based on your current location. If you’ve used Eclipse, you’ll be familiar with it, and this is the same hotkey.

In the new MyController class, start typing “Get…” , you’ll get an autocomplete GetMapping fragment; Go ahead and select it. This will create a basic GET map, which we will modify, as shown in Listing 2.

Listing 2 shows the basic GET mapping

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

Now if you open localhost:8080, you’ll see a simple “test” response. Notice that the server is automatically reloading the changes due 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 selecting Terminal -> split-Terminal. In the new terminal, go to a convenient directory (outside the Java project) and create a new Svelte front end with the commands shown in Listing 3.

Listing 3 Front end scaffolding for Svelte

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

You should now be able to browse to LocalHost :5000 and see Svelte’s greetings page.

Add the front end to the workspace

Next, right-click under the Demo project in File Explorer and select “Add Folder to Workspace”. Navigate to the front-end project we just created with Svelte. This 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 you used to add the Java extension above. Once the extension is installed, VS Code will be able to handle both the JavaScript framework on the front end and Java on the back.

Connect the front end and back end

We can test front-end to back-end communication by opening the app.svelte file with Ctrl-shift-p and changing the script to look like Listing 4. Listing 4 back-end communication

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

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 tag.

Java runtime configuration

To get information about and configure your Java runtime, you can open the command line (Ctrl-shift-p) and open “Configure Java Runtime”. You should see a screen similar to Figure 2. Figure 2. Configuring the Java runtime

Note that VS Code already detects which JDK you have installed and determines which projects are using which version. It also allows you to install new versions from within the IDE.

Debugging Java

Debugging your Java in VS Code is also easy. If the demo application is running, stop it. Right click on the DemoApplication file and select Debug. Spring Boot will run in debug mode.

Open MyController and double-click the red dot on line 14 to the left to set a breakpoint. Now reload the localHost :5000 page. The breakpoint will be caught, and you will see a screen similar to figure 3.

Figure 3. Debugging a Java file

Note that the menu bar allows you to continue, enter, step, etc. From here you have full code debugging capabilities, including the ability to get variable states and run commands from the debug console at the bottom.

Run the test

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

The test will run and a check mark will become available – this allows you to see the results of the test run, as shown in Figure 4.

Figure 4. Viewing JUnit results

 

Save workspace Configuration

When you close VS Code, it will prompt you to save the workspace configuration, suggesting the name workshop.code-workspace. Save the configuration, and when you open the project again, you’ll find that all the Settings are in place.

Java VS code

The Java capabilities found in Visual Studio Code are comparable to those found in more traditional Java ides, with the right extensions installed. The difference is. VS Code tends to be lighter, more responsive, and generally works without fuss.

This speed and ease combined with the ability to seamlessly work with other technology stacks — meaning you don’t have to shift to a new environment or deal with configurations — makes VS Code a compelling choice for Java development.

Thank you for watching, if you are interested, you can pay attention to me, convenient to check the follow-up articles, learn together, common progress, thank you!