Skip to content

Instantly share code, notes, and snippets.

@Winand

Winand/TUTORIAL.md

Created December 23, 2021 14:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Winand/508b5318779392b2163a022437946ca4 to your computer and use it in GitHub Desktop.
Save Winand/508b5318779392b2163a022437946ca4 to your computer and use it in GitHub Desktop.
Download ZIP
Tutorial - разработка на Java в VS Code
Raw
TUTORIAL.md

Tutorial - Build a Java application in Visual Studio Code

Содержание

Среда разработки

  • Cтандартный контейнер VS Code с Java 8, Maven и node.js lts/*

Расширения:

  • Extension Pack for Java
    • Debugger for Java
    • Language Support for Java(TM) by Red Hat
    • Maven for Java
    • Project Manager for Java
    • Test Runner for Java
    • Visual Studio IntelloCode
  • AsciiDoc - для просмотра файлов .adoc
  • TabOut

Tutorial

  • Установить расширение Spring Initializr Java Support
  • В панели команд (F1 или CtrlShiftP) выбрать Spring Initializr: Create a Maven Project...:
    • Spring Boot 2.5.7
    • Java
    • Group Id: com.example
    • Artifact Id: demo
    • Jar
    • Java version: 8
    • Dependencies:
      • Spring Boot DevTools
      • Spring Web
      • дополнительные можно добавить позднее, щелкнув ПКМ по pom.xml, и выбрав "Add Starters..."
    • Расположение в корневой директории воркспейса (будет создана папка с именем как указано в Artifact Id)

После создания проекта он не появился в панели Java Projects даже после нажатия на кнопку Refresh там. Помогла команда Reload Window, затем открытие какого-либо файла java.

Запуск приложения осуществляется командой mvn spring-boot:run в корневой директории приложения [в статье не сказано, что нужно перейти в папку, скорее всего, предполагается открыть папку с проектом как корневую в VS Code]. При необходимости загружаются зависимости, затем производится запуск веб-сервера для разработки. По адресу localhost:8080 отображается страница 404, т. к. в приложении ещё не объявлены никакие пути.

Для быстрого доступа к файлам можно нажать CtrlP (или F1 и стереть >), затем написать, например, Demo.

  • Установить расширение Java Extension Pack [уже установлено]
  • Установить расширение Spring Boot Extension Pack:
    • Spring Initializr Java Support [уже установлено]
    • Spring Boot Tools
    • Spring Boot Dashboard

VSC: "Java Extension Contribution has changed... reload required"

Если открыть файл DemoApplication.java, в правой части панели открытых файлов появляются кнопки Run Java, Debug Java.

В статье говорится, что на этом этапе VSC должен был задать вопрос "This Project contains Java, do you want to import it?" -> "Always". Однако проекты импортировались в Java Project автоматически при открытии первого java-файла

Spring Boot Dashboard позволяет запускать/останавливать приложения из панели Explorer > Spring Boot Dashboard. Также можно запустить приложение из панели Explorer > Java Projects.

Создание REST controller

Создать файл MyController.java в папке src/main/java/com/example/demo. [В статье говорится про путь src/com/infoworld/demo, но в созданном шаблоне приложения присутствуют также каталоги .../main/java/...] VSC автоматически создаст заготовку класса MyController в новом файле. К классу нужно добавить аннотацию @RestController (автодополнение должно предлагать варианты по ходу написания, при необходимости его можно вызвать принудительно сочетанием CtrlSpace).

Внутри класса начать писать Get..., автодополнение предложит сниппет GetMapping - обработчик GET запроса. Внести изменения:

  • В аннотации заменить значение value="/"
  • К аннотации аргумента @RequestParam добавить (required = false)
  • Возвращать строку "test"
    • Исправить тип возвращаемого значения на String
    • Исправить return "test"

При сохранении приложения оно автоматически перезагружается, если ранее было запущено (см. Debug Console в VS Code).

Svelte

В корневой директории проекта выполнить команды:

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

После запуска (npm run dev) по адресу http://localhost:5000 будет открываться страница с надписью "Hello World!".

В статье предполагалось создать папку vs-java-frontend не внутри папки с проектом. После этого необходимо добавить её в воркспейс, щёлкнув ПКМ в окне Explorer, и выбрав Add Folder To Workspace...

Установить расширение Svelte for VS Code.

Открыть файл App.svelte

При открытии первого .svelte файла VS Code предложил активировать плагин для TS/JS и перезагрузить окно: "TypeScript Svelte Plugin enabled. Note that changes of Svelte files are only noticed by TS/JS files after they are saved to disk. Please reload VS Code to restart the TS Server."

Добавить внутрь элемента <script> код:

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

Запрос выше не работает из-за CORS, т. к. отличаются порты. Добавление в fetch параметра {mode: 'no-cors'} позволяет выполнить запрос, но не прочитать ответ. Можно на стороне сервера добавить аннотацию @CrossOrigin (origins={"http://localhost:5000", "http://127.0.0.1:5000"}) над @GetMapping(value="/").

Конфигурация Java

В окне Configure Java runtime (F1>"Java: Configure Java runtime" или Explorer > Java Projects > ... > Configure Java runtime) отображается информация о среде Java в каждом проекте, также можно установить новую версию JDK.

В статье показана старая версия окна Configure Java Runtime

Отладка

Для запуск отладки щёлкнуть ПКМ по файлу DemoApplication.java и выбрать Debug Java.

Также отладку можно запустить:

  • аналогичной кнопкой на панели вкладок
  • из панели Spring Boot Dashboard
  • щёлкнув ссылку "Debug" в коде DemoApplication.java

Тесты

Открыть файл DemoApplicationTests.java.

Тесты можно запустить следующими способами:

  • ПКМ по файлу DemoApplication.java, выбрать Run/Debug Java
  • В файле слева от кода щёлкнуть зелёную кнопку (ПКМ для дополнительных опций)
  • Из панели Testing (иконка колбы)

Во время работы тестов вывод производится в Debug Console. В статье показано окно Java Test Report, возможно, его нет в текущих версиях VSC?

Краткий обзор

  • Открыть локальную директорию, где будет размещён проект
  • Установить расширение Remote - Containers
  • Выполнить F1 > Remote-Containers: Reopen in Container
    • Создать контейнер Java 8 со следующими настройками:
      • Debian OS version: buster
      • Node.js version: lts/*
      • Install Maven
  • Установить расширения:
    • Extension Pack for Java
      • Debugger for Java
      • Language Support for Java(TM) by Red Hat
      • Maven for Java
      • Project Manager for Java
      • Test Runner for Java
      • Visual Studio IntelloCode
    • Spring Boot Extension Pack
      • Spring Initializr Java Support
      • Spring Boot Tools
      • Spring Boot Dashboard
    • Svelte for VS Code
    • (опционально) AsciiDoc - для просмотра файлов .adoc
    • (опционально) TabOut
  • Запустить команду F1 > Spring Initializr: Create a Maven Project... (или Explorer > Java Projects > + > Spring Boot > Maven):
    • Spring Boot 2.5.8
    • Java
    • Group Id: com.example
    • Artifact Id: demo
    • Jar
    • Java version: 8
    • Dependencies:
      • Spring Boot DevTools
      • Spring Web
      • дополнительные можно добавить позднее, щелкнув ПКМ по pom.xml, и выбрав "Add Starters..."
    • Расположение в корневой директории воркспейса (будет создана папка с именем как указано в Artifact Id)
  • Открыть файл CtrlP > DemoApplication.java для активации расширений Java
  • Запустить проект из панели Explorer > Spring Boot Dashboard
  • Создать новый файл Java, сохранить как MyController.java. По умолчанию будет предложена папка src/main/java/com/example/demo
  • К сгенерированной VSC заготовке класса MyController добавить аннотацию @RestController. Всплывающая подсказка предложит добавить импорт.
  • Внутри класса начать писать Get..., автодополнение предложит сниппет @GetMapping - обработчик GET запроса.
  • Внести исправления в функцию @GetMapping:
    • В аннотации заменить значение value="/"
    • К аннотации аргумента @RequestParam добавить (required = false)
    • Возвращать строку return "test", соответственно исправить тип возвращаемого значения на String
    • Добавить @CrossOrigin(origins={"http://localhost:5000", "http://127.0.0.1:5000"}) над @GetMapping
  • Открыть http://localhost:8080, удостовериться, что сервер возвращает строку "test"
  • В корневой директории проекта выполнить команды:
npx degit sveltejs/template vs-java-frontend
cd vs-java-frontend
npm install
npm run dev
  • Открыть http://localhost:5000, убедиться, что сервер возвращает страницу "Hello World!"
  • Открыть файл CtrlP > App.svelte
  • Добавить внутрь элемента <script> код:
async function loadData() {
    let response = await fetch("http://localhost:8080");
    name = await response.text();
}
loadData();
  • Перезапустить npm run dev
  • Открыть http://localhost:5000, убедиться, что сервер возвращает страницу "Hello test!"
  • Для запуска отладки приложения Spring воспользоваться Explorer > Spring Boot Dashboard
  • Для запуска тестов воспользоваться Explorer > Testing
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment