使用快捷键 Ctrl+Shift+P, 输入 Open settings, 选择非default的settings.json文件点击:
尝试添加以下配置:
可以看到tab.activeBackground这个属性将当前使用文件的标签背景渲染为红色了。
其余相关配置参考:Visual Studio Code User and Workspace Settings
里面有上百种颜色方案,这既让人兴奋又不知所措。
这些颜色属性大致可以分为两大类:
方便我们之后发布在VS Code 主题市场,需要它的扩展/自定义模板文件。
https://github.com/microsoft/vscode-generator-code
https://www.npmjs.com/package/generator-code
参考以上文档,下载依赖:
npm install -g yo generator-code
全局安装方便日后管理。
启动生成器:
yo code
你需要回答几个必要的问题,使用方向键+enter选择即可(后面蓝字是填写内容)。
回答完毕,它将在本地初始化一个git 仓库(文件名为第三个选项所填内容)。
当然打开文件,你会发现这有600来行,如果死脑筋的话,可能明天就要埋了。难道要一个一个看着改吗?这里有个小技巧!——使用Theme Debugger来预览颜色效果。
它会弹出一个新窗口,一旦做了任何改动,重启debugger就能看到效果了。
另外还有个问题,我们如何知道一个属性和作用范围是映射到theme的那一地方呢?(一些关键字的替换也是不知道的)
第二个技巧就是命令面板开启Token and Scopes Inspector,如下:
鼠标悬浮在selector上,弹出相关信息(语种,类型,前景色,背景色,对比度,文本匹配范围)
这里添加了一个属性,发现Extension Development Host 对应的窗口边框变成了定义的颜色。
逐一遍历属性并修改是很头疼的,毕竟谁也不想做费时又费力的事。
在线主题颜色生成器:VS Code Theme Color Generator - Coder Coder
按照个人喜好设计,最后将定义好的theme json文件复制粘贴就好了。如果你不知道怎样选取颜色,推荐到 Coolors - The super fast color palettes generator!上找找灵感,或者到 Image to Colors Palette Generator - Extract Colors from Image寻找合适的视觉体验。
填写好相关信息,点击Continue。
经过验证后,定向到个人仪表板界面:
点击用户头像旁边的User settings,选择Personal access tokens(用于身份认证)。
点击 +New Token,按以下信息填入(不懂的自行百度吧):
别忘了拷贝你的token哦!!!
导航至https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true
只需要填写Basic information即可:
点击Create(可能需要验证)。
回到主题扩展文件中,完善package.json中的消息:
以及自定义好README.md文件内容。
万事俱备,只差最后一哆嗦了。
参考官网: Publishing Extensions | Visual Studio Code ExtensionAPI
vsce,“Visual Studio Code Extensions”的缩写,是一个用于打包、发布和管理 VS Code 扩展的命令行工具。
安装vsce命令:
npm install -g vsce
以Publisher身份登录:
vsce login <YourPublisherName>
随后要求你输入token进行验证。
打包为一个xxx.vsix文件( 输出在根目录):
vsce package
发布命令:
vsce publish
大功告成!!!
在vscode market, Manager Publisher & Extensions中查看:
在marketplace.visualstudio中展示的详情:Menon Dark - Visual Studio Marketplace
以上就是我开发vscode主题扩展的初体验,如果喜欢的话,可以试试这个主题哦!
参考资料: