高手!他竟然把VSCode玩成了IDEA的效果!
近期,公司推行正版化,本人使用的是JetBrains教育版,是不允许进行商业开发的,因此开启了艰难的备用IDE选型之路。最终,我选定了轻量级的Visual Studio Code(以下简称VS Code)。
各种IDE选型比较的过程就不赘述了,Eclipse、NetBeans、Srping Tools Suite等等,只能说青菜萝卜各有所爱。
# 插件淘沙
众所周知,VS Code是一款轻量级的通用编辑器,和Eclipse一样全靠海量的插件扩展,网上各类插件推荐文章又都是面向VS Code的最大IDE用户群-前端开发人员的。
无奈之下只能逐一试验,又开始了一轮插件淘沙的过程,最终筛选出几十款插件,详见
https://github.com/larva-zhang/vscode-java-dev-tools-pack/blob/master/README.md
# 定制Extension Pack
插件是筛选出来了,但是几十款插件总不能每次都一个一个去点击安装吧,而且也难以维护。
幸而VS Code自身提供了一种叫Extension Pack的插件,这种插件的目的就是为了汇集一批插件到一起而设计的,安装了一个Extension Pack就会自动安装Pack内的全部插件。
环境准备
环境依赖 nodejs 以及 Git,以MacOS为例,通过Homebrew安装:
brew install node git
然后通过 npm 安装Yeoman和VS Code Extension Generator:
npm install -g yo generator-code
工程初始化
调用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)
回车后会提问是否要将当前已安装的扩展安装到新的Extension Pack中,选择Yes会报错
? 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:
brew cask install visual-studio-code
当然也可以选择不自动安装已有扩展,同样可以顺利进行后面的配置。
? 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仓库,工程目录结构如下:
$ 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
https://code.visualstudio.com/api/references/extension-manifest
也可以参考我的vscode-java-dev-tools-pack/package.json,这是一个比较完整的Demo。
https://github.com/larva-zhang/vscode-java-dev-tools-pack/blob/master/package.json
package & publish
微软关于插件打包发布可以参考文档:
https://code.visualstudio.com/api/working-with-extensions/publishing-extension
微软提供了vsce这款命令行工具方便开发者进行打包和发布:
npm install -g vsce
安装完成后,cd到工程目录下,进行打包生成.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)
注意版本号,是根据package.json文件中的version来生成的,version必须是major.minor.stage的格式
https://marketplace.visualstudio.com/manage
也可以通过vsce命令行创建,详见:
https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher
有了publisher后就能进行publish了,还是在management page页面,通过上传.vsix文件的方式即可,当vs code校验通过后就会发布到Visual Studio Code Marketplace。
publish同样可以通过vsce命令行进行,详见:
https://code.visualstudio.com/api/working-with-extensions/publishing-extension#log-in-to-a-publisher
# 总结
02.
03.
04.