近期，公司推行正版化，本人使用的是JetBrains教育版，是不允許進(jìn)行商業(yè)開(kāi)發(fā)的，因此開(kāi)啟了艱難的備用IDE選型之路。最終，我選定了輕量級(jí)的Visual Studio Code（以下簡(jiǎn)稱VS Code）。

各種IDE選型比較的過(guò)程就不贅述了，Eclipse、NetBeans、Srping Tools Suite等等，只能說(shuō)青菜蘿卜各有所愛(ài)。

插件淘沙

眾所周知，VS Code是一款輕量級(jí)的通用編輯器，和Eclipse一樣全靠海量的插件擴(kuò)展，網(wǎng)上各類插件推薦文章又都是面向VS Code的最大IDE用戶群-前端開(kāi)發(fā)人員的。

無(wú)奈之下只能逐一試驗(yàn)，又開(kāi)始了一輪插件淘沙的過(guò)程，最終篩選出幾十款插件，詳見(jiàn)vscode-java-dev-tools-pack/README.md。

定制Extension Pack#
插件是篩選出來(lái)了，但是幾十款插件總不能每次都一個(gè)一個(gè)去點(diǎn)擊安裝吧，而且也難以維護(hù)。

幸而VS Code自身提供了一種叫Extension Pack的插件，這種插件的目的就是為了匯集一批插件到一起而設(shè)計(jì)的，安裝了一個(gè)Extension Pack就會(huì)自動(dòng)安裝Pack內(nèi)的全部插件。

VS Code提供了一套nodejs工具用于輔助開(kāi)發(fā)者創(chuàng)建擴(kuò)展，同時(shí)官方文檔中提供了簡(jiǎn)單明了的文檔說(shuō)明以及豐富的samples，samples包括Command、Color Theme、Tree View等等，本文僅做Extension Pack的示例。

環(huán)境準(zhǔn)備

環(huán)境依賴 nodejs 以及 Git，以MacOS為例，通過(guò)Homebrew安裝：

brew install node git
然后通過(guò) npm 安裝Yeoman和VS Code Extension Generator：

npm install -g yo generator-code

工程初始化

調(diào)用Yeoman生成新的Extension Pack

$ 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)

回車后會(huì)提問(wèn)是否要將當(dāng)前已安裝的擴(kuò)展安裝到新的Extension Pack中，選擇Yes會(huì)報(bào)錯(cuò)

? 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

這是因?yàn)槲业腣S Code并不是通過(guò)命令行安裝的，如果要使用code命令就需要通過(guò)命令行安裝VS Code，然后重新執(zhí)行yo code。

MacOS上通過(guò)Homebrew安裝vs code：

brew cask install visual-studio-code

當(dāng)然也可以選擇不自動(dòng)安裝已有擴(kuò)展，同樣可以順利進(jìn)行后面的配置。

? 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.

通過(guò)Yeoman工具，我們配置了name、identifier、description，并且工具自動(dòng)生成了一個(gè)本地git倉(cāng)庫(kù)，工程目錄結(jié)構(gòu)如下：

$ tree -a -L 1
.
├── .git
├── .gitattributes
├── .gitignore
├── .vscode
├── .vscodeignore
├── CHANGELOG.md
├── README.md
├── package.json
└── vsc-extension-quickstart.md

• CHANGELOG.md 發(fā)布變更記錄，在Visutal Studio Code Marketplace的詳情頁(yè)中有該文件的鏈接。
• README.md 在Visutal Studio Code Marketplace的擴(kuò)展詳情，作用類似GitHub Page。
• package.json 擴(kuò)展的 manifest文件，定義了擴(kuò)展的相關(guān)屬性。
• vsc-extension-quickstart.md 針對(duì)生成的工程中文件的簡(jiǎn)易說(shuō)明文檔。
  

package.json

作為Extension Pack類型的VS Code 擴(kuò)展來(lái)說(shuō)，只需要維護(hù)package.json就行，package.json中的各項(xiàng)字段可以參考VS Code的官方文檔Extension Manifest。

也可以參考我的vscode-java-dev-tools-pack/package.json，這是一個(gè)比較完整的Demo。

package & publish

微軟關(guān)于插件打包發(fā)布可以參考文檔Publishing Extensions。

微軟提供了vsce這款命令行工具方便開(kāi)發(fā)者進(jìn)行打包和發(fā)布：

npm install -g vsce

安裝完成后，cd到工程目錄下，進(jìn)行打包生成.vsix文件

$ 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)

注意版本號(hào)，是根據(jù)package.json文件中的version來(lái)生成的，version必須是major.minor.stage的格式

package成功后，需要去vs code創(chuàng)建一個(gè)publisher，推薦通過(guò)瀏覽器訪問(wèn)management page創(chuàng)建，比較直觀。

也可以通過(guò)vsce命令行創(chuàng)建，詳見(jiàn)Create a publisher

有了publisher后就能進(jìn)行publish了，還是在management page頁(yè)面，通過(guò)上傳.vsix文件的方式即可，當(dāng)vs code校驗(yàn)通過(guò)后就會(huì)發(fā)布到Visual Studio Code Marketplace。

publish同樣可以通過(guò)vsce命令行進(jìn)行，詳見(jiàn)Log in to a publisher

總結(jié)

插件安裝完成后還是需要逐一去配置調(diào)試的，這個(gè)沒(méi)法自動(dòng)化，畢竟各人喜好不同，不過(guò)大多數(shù)插件都是開(kāi)箱即用的。

作為開(kāi)源的輕量級(jí)通用編輯器，VS Code的Java開(kāi)發(fā)體驗(yàn)確實(shí)不如JetBrains，但和Eclipse一樣勝在開(kāi)源免費(fèi)，所以還是可堪一用的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。