近期，公司推行正版化，本人使用的是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