把VS Code打造成Java開發IDE
阿新 • • 發佈:2020-09-24
近期,公司推行正版化,本人使用的是JetBrains教育版,是不允許進行商業開發的,因此開啟了艱難的備用IDE選型之路。最終,我選定了輕量級的Visual Studio Code(以下簡稱VS Code)。
> 各種IDE選型比較的過程就不贅述了,Eclipse、NetBeans、Srping Tools Suite等等,只能說青菜蘿蔔各有所愛。
## 外掛淘沙
眾所周知,VS Code是一款輕量級的通用編輯器,和Eclipse一樣全靠海量的外掛擴充套件,網上各類外掛推薦文章又都是面向VS Code的最大IDE使用者群-前端開發人員的。
無奈之下只能逐一試驗,又開始了一輪外掛淘沙的過程,最終篩選出幾十款外掛,詳見[vscode-java-dev-tools-pack/README.md](https://github.com/larva-zhang/vscode-java-dev-tools-pack/blob/master/README.md)。
## 定製Extension Pack
外掛是篩選出來了,但是幾十款外掛總不能每次都一個一個去點選安裝吧,而且也難以維護。
幸而VS Code自身提供了一種叫Extension Pack的外掛,這種外掛的目的就是為了彙集一批外掛到一起而設計的,安裝了一個Extension Pack就會自動安裝Pack內的全部外掛。
VS Code提供了一套nodejs工具用於輔助開發者建立擴充套件,同時[官方文件](https://code.visualstudio.com/api)中提供了簡單明瞭的文件說明以及豐富的samples,samples包括Command、Color Theme、Tree View等等,本文僅做Extension Pack的示例。
### 環境準備
環境依賴 nodejs 以及 Git,以MacOS為例,通過Homebrew安裝:
```bash
brew install node git
```
然後通過 npm 安裝[Yeoman](https://yeoman.io/)和[VS Code Extension Generator](https://www.npmjs.com/package/generator-code):
```bash
npm install -g yo generator-code
```
### 工程初始化
呼叫Yeoman生成新的Extension Pack
```bash
$ yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create?
New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
❯ New Extension Pack
New Language Pack (Localization)
```
回車後會提問是否要將當前已安裝的擴充套件安裝到新的Extension Pack中,選擇Yes會報錯
```bash
? What type of extension do you want to create? New Extension Pack
? Add the currently installed extensions to the extension pack? Yes
Error code
Command failed: code --list-extensions
/bin/sh: code: command not found
```
這是因為我的VS Code並不是通過命令列安裝的,如果要使用code命令就需要通過命令列安裝VS Code,然後重新執行`yo code`。
> MacOS上通過Homebrew安裝vs code:
>```bash
>brew cask install visual-studio-code
>```
當然也可以選擇不自動安裝已有擴充套件,同樣可以順利進行後面的配置。
```bash
? What type of extension do you want to create? New Extension Pack
? Add the currently installed extensions to the extension pack? No
? What's the name of your extension? vscode-java-dev-tools-pack
? What's the identifier of your extension? vscode-java-dev-tools-pack
? What's the description of your extension? Some Java develop support tools extension pack.
? Initialize a git repository? Yes
create vscode-java-dev-tools-pack/.vscode/launch.json
create vscode-java-dev-tools-pack/package.json
create vscode-java-dev-tools-pack/vsc-extension-quickstart.md
create vscode-java-dev-tools-pack/README.md
create vscode-java-dev-tools-pack/CHANGELOG.md
create vscode-java-dev-tools-pack/.vscodeignore
create vscode-java-dev-tools-pack/.gitignore
create vscode-java-dev-tools-pack/.gitattributes
Your extension vscode-java-dev-tools-pack has been created!
To start editing with Visual Studio Code, use the following commands:
cd vscode-java-dev-tools-pack
code .
Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.
For more information, also visit http://code.visualstudio.com and follow us @code.
```
通過Yeoman工具,我們配置了`name`、`identifier`、`description`,並且工具自動生成了一個本地git倉庫,工程目錄結構如下:
```bash
$ tree -a -L 1
.
├── .git
├── .gitattributes
├── .gitignore
├── .vscode
├── .vscodeignore
├── CHANGELOG.md
├── README.md
├── package.json
└── vsc-extension-quickstart.md
```
* `CHANGELOG.md` 釋出變更記錄,在Visutal Studio Code Marketplace的詳情頁中有該檔案的連結。
* `README.md` 在Visutal Studio Code Marketplace的擴充套件詳情,作用類似GitHub Page。
* `package.json` 擴充套件的 manifest檔案,定義了擴充套件的相關屬性。
* `vsc-extension-quickstart.md` 針對生成的工程中檔案的簡易說明文件。
### package.json
作為`Extension Pack`型別的VS Code 擴充套件來說,只需要維護`package.json`就行,`package.json`中的各項欄位可以參考VS Code的官方文件[Extension Manifest](https://code.visualstudio.com/api/references/extension-manifest)。
也可以參考我的[vscode-java-dev-tools-pack/package.json](https://github.com/larva-zhang/vscode-java-dev-tools-pack/blob/master/package.json),這是一個比較完整的Demo。
### package & publish
微軟關於外掛打包釋出可以參考文件[Publishing Extensions](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)。
微軟提供了`vsce`這款命令列工具方便開發者進行打包和釋出:
```bash
npm install -g vsce
```
安裝完成後,cd到工程目錄下,進行打包生成`.vsix`檔案
```bash
$ vsce package
DONE Packaged: /Users/larva-zhang/vscode-java-dev-tools-pack/vscode-java-dev-tools-pack-0.0.1.vsix (7 files, 16.7KB)
```
> 注意版本號,是根據package.json檔案中的version來生成的,version必須是major.minor.stage的格式
package成功後,需要去vs code建立一個`publisher`,推薦通過瀏覽器訪問[management page](https://marketplace.visualstudio.com/manage)建立,比較直觀。
> 也可以通過vsce命令列建立,詳見[Create a publisher](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher)
有了`publisher`後就能進行publish了,還是在[management page](https://marketplace.visualstudio.com/manage)頁面,通過上傳`.vsix`檔案的方式即可,當vs code校驗通過後就會發布到[Visual Studio Code Marketplace](https://marketplace.visualstudio.com/)。
> publish同樣可以通過vsce命令列進行,詳見[Log in to a publisher](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#log-in-to-a-publisher)
## 總結
外掛安裝完成後還是需要逐一去配置除錯的,這個沒法自動化,畢竟各人喜好不同,不過大多數外掛都是開箱即用的。
作為開源的輕量級通用編輯器,VS Code的Java開發體驗確實不如JetBrains,但和Eclipse一樣勝在開源免費,所以還是可堪一用的。
最後給我的Extension Pack打個廣告[Java Dev Tools Pack
](https://marketplace.visualstudio.com/items?itemName=larva-zhang.vscode-java-dev-tools-pack),如有好的外掛推薦也歡迎提PR