VS Code

Visual Studio Code

2018/12/29

2020/11/09 (更新內容)

Java/Spring

Step 1，要先安裝Java Development Kit (JDK) (Oracle JDK / Open JDK)及Maven。 可以參考Getting Started with Java in VS Code，下載installer，利用installer安裝相關的軟體與套件。要執行這個java檔，請點選這個檔案，按右鍵，選擇Run。

也可以利用左手邊的"Run and Debug"，來執行。也可以產生一個launch.json，來執行。(詳參: Running and debugging Java)

HelloWorld.java

public class HelloWorld {

public static void main(String[] args) {

for (int i=0; i< 10; i++){

System.out.println("Hello");

}

}

}

Step 2，可以利用SPRING INITIALIZR產生一個空的spring boot專案，請選用Maven，採用Java，並使用Boot 2.3.1，Group: com.exaple，Artifact:demo，Dependencies: Web。一般來講，需要Web，如果用到資料庫就需要MySQL、JDBC(或者還要JPA)，也可以使用Security與Session。如果沒有先選好所需要的dependencies，未來還需要一些額外的設定。然後，SPRING INITIALIZR會產生一個zip檔，把zip檔解開到自己所想要的檔案夾裡。

如果使用Visual Studio Code，也可以利用VS code的Spring Initializr Java Support extension產生新的spring boot專案 。(可參考: Spring Boot in Visual Studio Code)

Step 3，請安裝Spring Boot Extension Pack、Java Extension Pack。

接下來打開spring boot專案的進入點 (如:src/main/java/com/example/demo/DemoApplication.java)，這是一個空的專案。(詳參: Build Java Web Apps with VS Code & Build Spring Boot Apps with VS Code)

package com.example.demo;


import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;


@SpringBootApplication

public class DemoApplication {


public static void main(String[] args) {

SpringApplication.run(DemoApplication.class, args);

}

}

Step 4 將DemoApplication.java的內容改為:

package com.example.demo;


import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.ResponseBody;


@SpringBootApplication

public class DemoApplication {


public static void main(String[] args) {

SpringApplication.run(DemoApplication.class, args);


}

}

@Controller

class IndexPageController {

@GetMapping(value = "/")

@ResponseBody

public String index() {

return "<h1>Hi!</h1>";

}


}

Step 5 執行專案，可以一樣，點選這個檔案，按右鍵，選擇Run。

也可以利用左手邊的"Run and Debug"，來執行。也可以產生一個launch.json，來執行，利用launch.json可以客製執行的方式。(詳參: Spring Boot in Visual Studio Code、Java build tools in VS Code (Maven、Gradle))

執行後，打開瀏覽器:

http://localhost:8080/

可以看到

Hi!

另外，vs code有一些外掛(extension)，常用的是: Spring Boot Extension Pack，這個pack裡包括一些常用的外掛:

  • Spring Boot Tools

  • Spring Initializr Java

  • Spring Boot Dashboard

還有一些Java常用的外掛，常用的是: Java Extension Pack，這個pack裡包括一些常用的外掛:

  • Language Support for Java™ by Red Hat

  • Debugger for Java

  • Java Test Runner

  • Maven for Java

  • Java Dependency Viewer

  • Visual Studio IntelliCode

推薦java外掛:

  • Java Code Generator

    • Generator GUI

    • Generate Setters & Getters

    • Generate toString()

    • Generate Constructor

    • Generate Constructor Using Fields

    • Generate Equals And HashCode

    • Generate Fluent Setters

    • Generate Logger Debug

還有一些Git常用的外掛

  • Git Graph

  • Git Lens

最後養成好的寫程式風格(coding style)，在vscode裡可以使用CheckStyle for Java (詳參: Java formatting and linting)

目前最普遍的就是使用Sun的coding convention(Code Conventions for the Java Programming Language)以及Google的coding style(Google Java Style Guide)。Sun的Code Convention算是最耳熟能詳的，但是，自從Oracle併購了Sun之後(1999年)，就不再繼續維護這個部份了，所以，後來大家就基於Sun的Code Convention繼續更新內容，目前最多人採用的就是Google的coding style。

就有一個很基本的rest了，接下來就是要跟前端的react連連看。

React

利用VS Code (Using React in VS Code)開發react，要先安裝node.js，利用node.js的npm來管理所需要的套件。如果是ㄧ個新的專案，要先開一個新的資料夾，然後啟動vs code，啟動之後，選「檔案」、「開啟資料夾」選擇剛剛新增的資料夾。

然後，選「檢視」、「整合式終端機」，在終端機下安裝create-react-app (CRA) (詳參官方文件: Getting Started)

npm install -g create-react-app

利用create-react-app來產生一個新的react專案在專案的路徑裡

create-react-app .

create-react-app會產生並下載相關檔案。利用create-react-app有個好處，會幫我們安裝很多好用的套件，例如: babel、ESLint、Prettier、webpack。

因為react和spring的檔案結構都不太一樣，一般而言，開發時也都可以獨立開發，兩個專案要放在兩個獨立目錄下。當然，也可以利用maven去啟動npm，設定會有點複雜(詳參: Example of a Spring Boot project with a React frontend)。

(待續) React + REST

JavaScript

Python