iT邦幫忙

2

筆記 - 安裝 VS code 以及開發 Spring boot 相關套件

  • 分享至 

  • xImage
  •  

安裝 VScode 程式開發工具

早期主要以Eclipse 作為開發Java程式的工具,並提供可以下載外掛(Plugin)的擴充功能,且每一季有規律的發布新版本,是目前還是很適合開發Java程式的工具。後來開發Web系統時,依專業將前後端框架分離開發,而前端開發多選擇VScode作為其程式編輯器,並加載(extension)擴充各種功能,所以VSCODE現在受歡迎作為Java系統開發工具之一。

下載 VScode跨平台原始碼編輯器

  1. 下載URL: https://code.visualstudio.com/download

選擇下載版本(建議 User Installer本版),並一預設值執行安裝:
https://ithelp.ithome.com.tw/upload/images/20251102/201394774Ozqb1FQKx.png

https://ithelp.ithome.com.tw/upload/images/20251102/20139477MQ6z3ww0jk.png

安裝 vscode 開發套件

Vscode 提供眾多的擴充功能加載(extension),這裡是開發Spring Boot 必須以及個人習慣的一些套件提供參考。

(1) 安裝 Java開發套件(其相依的Extension會一起安裝,是Java專案必須套件)

下載URL: https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack
https://ithelp.ithome.com.tw/upload/images/20251102/201394778Zp9N7mlGp.png

系統提示是否開啟 VSscode ,點選 "開啟 Visual Studio Code"
https://ithelp.ithome.com.tw/upload/images/20251102/20139477tpfenJUidp.png

Vscode被開啟,並顯示選擇套件相關內容與訊息,點選 "Install" 安裝。
https://ithelp.ithome.com.tw/upload/images/20251102/20139477qSlvr9MgDV.png

確認安裝:套件相關內容從 "Install" 變為 "Disable" "Uninstall"。
https://ithelp.ithome.com.tw/upload/images/20251102/20139477VTVlxb3LTx.png

其他套件安裝步驟都相同,這裡只介紹套件URL與網頁,以供確認所選套件(有很多雷同套件名稱)。

(2)安裝 Java Platform Extension for Visual Studio Code

下載URL: https://marketplace.visualstudio.com/items?itemName=Oracle.oracle-java
https://ithelp.ithome.com.tw/upload/images/20251103/20139477m8tJ8IAYgC.png

(3) 安裝Spring boot開發套件(其相依的Extension會一起安裝,是Spring boot Java 專案必須套件)

下載URL: https://marketplace.visualstudio.com/items?itemName=vmware.vscode-boot-dev-pack
https://ithelp.ithome.com.tw/upload/images/20251102/20139477idp6QYUwrc.png

(4) Dependency Analytics (建議,會幫忙檢查使用套件是否有弱點)

下載URL: https://marketplace.visualstudio.com/items?itemName=redhat.fabric8-analytics
https://ithelp.ithome.com.tw/upload/images/20251102/20139477QQtbEF4ct5.png

(5) Lombok Annotations Support for VS Code (建議,會幫忙產生Getter,setter程式碼)

下載URL:https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-lombok
https://ithelp.ithome.com.tw/upload/images/20251102/20139477Dg9Md2GOSa.png

(6) XML (建議,會幫忙檢查Xml語法)

下載URL:https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml
https://ithelp.ithome.com.tw/upload/images/20251102/20139477Eixv7iWiWy.png

(7) Copy filename (建議,方便取得專案程式名稱)

下載URL:https://marketplace.visualstudio.com/items?itemName=bradzacher.vscode-copy-filename
https://ithelp.ithome.com.tw/upload/images/20251102/20139477xVrdKvgn5a.png

(8)SQL Database(Microsoft)(建議依專案需求,設定完成後,可以直接操作 MS SQL 指令)

下載URL:https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql
https://ithelp.ithome.com.tw/upload/images/20251102/20139477npgUdKeMfQ.png

(9) Oracle Database (建議依專案需求,設定完成後,可以直接操作 Oracle SQL 指令)

下載URL:https://marketplace.visualstudio.com/items?itemName=Oracle.sql-developer
https://ithelp.ithome.com.tw/upload/images/20251102/20139477ZO1LfTu1K4.png

(10) MySQL Database (建議依專案需求,設定完成後,可以直接操作 Mysql SQL 指令)

下載URL:https://marketplace.visualstudio.com/items?itemName=Oracle.mysql-shell-for-vs-code
https://ithelp.ithome.com.tw/upload/images/20251102/20139477cnqm44MSeL.png

(11) Auto Rename Tag (建議,方便當變更Xml tag 時,自動配對更改)

下載URL:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
https://ithelp.ithome.com.tw/upload/images/20251102/20139477gZNSmG13uV.png

(12) Auto Close Tag (建議,方便當新增Xml tag 時,自動產生配對)

下載URL:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
https://ithelp.ithome.com.tw/upload/images/20251102/20139477na6fI9hqxB.png

(13) Notepad++ keymap(建議,使用習慣了 Notepad++的 直欄編輯)

下載URL:https://marketplace.visualstudio.com/items?itemName=ms-vscode.notepadplusplus-keybindings
https://ithelp.ithome.com.tw/upload/images/20251102/20139477t2dfU3Hn0c.png

(14) Server Connector(建議,安裝Web 應用程式伺服器開發測試需要)

下載URL:https://marketplace.visualstudio.com/items?itemName=redhat.vscode-community-server-connector
https://ithelp.ithome.com.tw/upload/images/20251102/20139477BMHXWvrGfo.png

(15) vsc-postman(建議,測試Web API 應用程式需要)

下載URL:https://marketplace.visualstudio.com/items?itemName=breaking-point.vsc-postman
https://ithelp.ithome.com.tw/upload/images/20251102/20139477jmWIc92rYx.png

以上安裝的Extension,建議取消Auto Update 以及先Disable

https://ithelp.ithome.com.tw/upload/images/20251102/201394774pqTKfthtd.png

建立專案後,依專案需求再開起 Enable(Workspace),這樣不必每個案次啟動 VS Code時,將所有 Extension都Load進Memory浪費系統資源與時間。

https://ithelp.ithome.com.tw/upload/images/20251102/20139477eHC2m518rG.png

Eclipse 使用習慣了,主要Build Path 功能於 Vscode 的調整設定

如果專案由Maven管理,建議調整於(pom.xml)檔案,Vscode會自動設定引用,若在此調整,可能最後打包(Package)及佈署(Depoly)時可能會產生問題。

VScode 開啟 Configuration:
點選 "Java Project"視窗最右三個點,開啟"Configure Java Runtime

https://ithelp.ithome.com.tw/upload/images/20251103/20139477cJswcJ9AaR.png

(1) 依專案指定JDK版本

Eclipse:

https://ithelp.ithome.com.tw/upload/images/20251103/20139477HoCO0qNaXJ.png

Vscode:

https://ithelp.ithome.com.tw/upload/images/20251103/20139477p77SNktXIZ.png

(2) 指定引用 jar 檔案 (Build Path)

Eclipse: 增加引用Jar檔案

https://ithelp.ithome.com.tw/upload/images/20251103/20139477Yk1MHTgekt.png

Vscode: 增加引用Jar檔案(Add Library)

https://ithelp.ithome.com.tw/upload/images/20251103/201394778IBKhp9Qz9.png

(3) 專案的source 以及 target (Build Path)

Eclipse: 編輯既有Source (Output folder) 以及 新增Source

https://ithelp.ithome.com.tw/upload/images/20251103/20139477uCCM251REU.png

VScode:編輯既有Source

https://ithelp.ithome.com.tw/upload/images/20251103/20139477Tdy6nzwkOk.png

VScode:新增Source

https://ithelp.ithome.com.tw/upload/images/20251103/20139477zdp2PKQqSh.png


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言