Add to VSCode guide

[damithc]

I've added an empty VSCode guide at https://se-education.org/guides/tutorials/vscode.html

This page is supposed to provide helpful info for VSCode users, similar to what we have provided for Intellij.
However, VSCode is not supported officially by our courses, which means this guides will be an 'unofficial community resource'.
For the moment, let's keep it as one page, but we can split it into multiple pages later.

Feel free to send PRs to add content to this page, one section at a time. Perhaps best to post in this issue first to propose your content, to avoid PR overlap.

[ruishanteo]

Proposing to add a section for Importing a Gradle project:

If the project comes with Gradle support, you will see a build.gradle file in your project root.

Install the Extension Pack for Java extension to enable support for Java extensions.
Go to Extensions → Search 'Extension Pack for Java' → Install

1. Open Visual Studio Code.

2. If you are in the welcome screen, Click Open. Otherwise, click File -> Open.
   i. Select the project directory, and click Open.

3. Confirm the correct Java version is being used for Gradle, as follows:

(a) Confirm the project JDK is set to the one you are supposed to use for the project, as giving in the panel below:

i. Open the Command Palette by pressing Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
ii. Type "Java: Configure Java Runtime" and select it.
iii. Check that the JDK version matches the one required for your project. If not, you can install the required JDK and configure it.
Note: MacOS users need to download Azul Zulu compatible with their machine and Java17, with the Java Package specified as JDK FX

(b) Confirm the correct JVM is used for Gradle, as given in the panel below:

  1. Install the Gradle Extension: Search for "Gradle" in the Extensions view (Ctrl+Shift+X), and install a Gradle extension if you haven’t already (e.g., Gradle for Java).
  4. Open settings.json: You can find it by opening the Command Palette (Ctrl+Shift+P or Cmd+Shift+P), then typing "Preferences: Open User Settings (JSON)".
  5. Add or modify the following settings to configure the JVM for Gradle:

  ```
  {
    "java.configuration.runtimes": [
      {
        "name": "JavaSE-17",
        "path": "/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home"
      }
    ],
    "java.import.gradle.java.home": "/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home"
  }
  ```

7. After the importing of the project is complete (which could take a few minutes), you will see the Gradle Tab in the VSCode interface e.g., look for the elephant icon on the left and click it.

[damithc]

@UdhayaShan1 You also had plans to add something similar (in #61), right? Any thoughts about @ruishanteo's proposed content?

[brein62]

Can confirm that the above suggestion by @ruishanteo to import a Gradle project works and produces a Gradle toolbar in VS Code in both my Windows and Mac machines.

Running the run, clean and shadowJar commands using the Gradle toolbar works as expected with the same results as running Gradle in the terminal and in IntelliJ.

Overall, all the content is essential to ensuring the Gradle toolbar works and runs properly, especially the setting up of project JDK and JVM since Gradle toolbar needs to run with compatible JDK and JVM versions with the Java project or else the Java compilation or running of the program may fail.

Screenshot

[brein62]

Proposing to add a section for Configuring Checkstyle in VSCode:

Install the CheckStyle for Java extension in VSCode to allow CheckStyle to alert you about code style problems as you write code.

Setting up Checkstyle for Java projects in VSCode

This is assuming the two Checkstyle files (checkstyle.xml and suppressions.xml) are stored in the ./config/checkstyle directory by convention.

1. Open Visual Studio Code and download the extension using Extensions -> Search 'CheckStyle for Java' -> Install.

2. Open the project directory in Visual Studio Code using File -> Open Folder....

3. Set up the extension to use the Checkstyle files as follows:
   a. Check if the ./.vscode/settings.json file exists. If not, create a folder .vscode in the project root directory and add a file settings.json within the .vscode folder. This file contains configuration settings for projects in Visual Studio Code.
   b. Add these configuration settings to the settings.json file:

{
  "java.checkstyle.configuration": "${workspaceFolder}/config/checkstyle/checkstyle.xml",
  "java.checkstyle.properties": {
    "config_loc": "${workspaceFolder}/config/checkstyle"
  }
}

4. Add .vscode to your .gitignore by adding these few lines into .gitignore:

# VSCode files
/.vscode/

5. Now you should be able to edit your code with Checkstyle violations being detected as you edit in the Problems tab in VSCode:
   

[damithc]

All who proposed additions to the VSCode guide, feel free to submit PRs if there are no similar PRs already.