vs代码% 20 % E8 % 87 % aa % E5 % b8 % a6 % E7 % 9a % 84 % E5 % 87 % A0 % E6 % AC % be4 % b8 % bb % e9 % a2 % 98 % e9 % 83 % 23 f % E5 % a6 % 82 % E6 % 9e % 9c % E6 % 83 % B3 % E5 % af % B9 % be % 88 % E5 % a4 % E8 % E5 % 88 % 86 % 20 % B2 % a1 % E5 % AE % 9a % E5 % 88 % B6 % E8 % 87 % aa % E5 % B7 % B1 % E7 % 84 % 20vs code % 20 % E4 % b8 % bb % e9 % 25 % 20a % 84 % E3 % a9 % E5 % B1 % E5 % 8a % 9f % E8 % 83 % BD % e9 % 83 % BD % E5 % 8f % E4 % bb % a5 % e9 % 80 % BD % E8 % 87 % 20b % a5 % E6 % 9e % 84 % 0a % 20 % E5 % af % B9 % E4 % ba % 8e % 20 % E4 % b8 % bb % e9 % a2 % 98 % ef % BC % 25 % 206 % E6 8e % 20f % E8 % BF % B0 % 0a % 20 package.JSON % 20 % E4 % b8 % bb % e9 % a2 % 98 % E3 % 81 % E5 % 9b % be6 % A0 % 87 % % be4 % 209 a % 84 % E7 % 9b % ae5 % BD % 95 % 28 % e9 % 9e5% BF % 85 % e9 % a1 % bb % ef % BC % 8c % E5 % 8f % 96 % E5 % 9 % E5 % 25 % 20 % ef % BC % 8c % E5 % 8f % 96 % E5 % 86 % B3 % E4 % ba % 8e % 20 package.JSON % 20 % E4 % b8 % ad % E7 % 94 % 90 % ab % E5 % a6 % 82 % 25 % 20 % 20 code % 20 % E5 % ba % 93 % E4 % b8 % ad % E4 % BD % E7 % A8 % E7 % 84 % E6 % 89 % % AC % AC % 205 % 88 % 86 % ef % BC % 8c % E5 % 8f % af % E4 % bb % a5 % e9 % 80 % BF % 87 % E5 % B3 % E8 % af % 20e.JSON % % 20e-defaults % 27 % 2c % 0a % 20 % 27显示名称% 27: % 20 % 27 % 25显示名称% 25 % 27 % 2c % 0a % 20 % 27描述性名称3360 % 271.0 % 27c % 0a % 20 % 27 % 20t % 27 % 27 % 20 % 27 engines % 27: % 20 % 7b % 27 vs code % 273360 % 20 % 2777360 7 % 2c % 0a % 20 % 27 % E3 % 83 % AC % E3 % 83 % 99 % E3 % 83 % ab % 27: % 20 % 27 dark % 20 % 28 deer % 20 c % 0a % 20 % 7b % 0a % 20 % 273360 % 20 % 27 high % 20 contrast % 27 % 2cc % 0a % 20 % 273360 % 20 % 27hc-black b % 0a % 20 % 7b % 0a % 27id % 273360 % 27vs-minimal % 27 % 27c % 20 % 29 % 27 % 2c % 20 % 27 path % 27: % 20 % 27. 5 % 8a % 9f % E8 % 83 % BD % E6 % 88 % 96 % E5 % 90 % ab % E4 % B9 % ef % BC % 9a % 20 name % 20 % 206 % 89 % a9 % E5 % B1 JSON % 20 % E4 % b8 % ad % E7 % 9a % 84 % E5 % ad % 97 % E6 % AE % b5 % 0a % 20描述% E6 % 8f % 20 % E5 % 88 % 86 E4 % bb % B6 % E5 % 95 % E5 % ba % 97 % E4 % b8 % ad % E5 % BF % ab % e9 % 80 % 9f % E8 % BF % 87 % E6 % bb % abf % 25
从插件商店下载的插件路径为:C:Users%username%.vscodeextensions,MacOs 和 linux 上为 ~/.vscode/extensions。我们可以选择系统自带主题 theme-defaults 作为基础开始。
主要修改配置文件中的 name、displayName、description 和 description.themes 字段内容,然后在 themes 目录中定制主题配色文件。主题配色可以综合参考官方自带主题、第三方主题或流行的开源主题,进行自定义配置。主题目录则可以放在 系统自带插件路径 下,每次重启 vscode 后该主题配置即会生效。
可以使用快捷键快速切换主题体验效果。切换选择主题快捷键为:ctrl+K ctrl+T。
3 自定义 vscode 字体
好看的主题还需要搭配好看的字体。最适合编码使用的是等宽字体。windows 系统自带的 Consolas 等宽字体本身就挺不错。另外推荐使用如下开源的等宽字体:
自定义 vscode 字体的方法为,在用户配置文件中添加如下配置(示例):
"editor.fontFamily": "'Fira Code', 'Noto Sans CJK SC Medium', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
4 vscode 插件开发
如果你想开发一个完整的插件,打包提供给他人使用或发布到插件商店,以下信息或有一定的参考作用。
vscode 插件开发的基本步骤如下:
环境准备
开发或配置插件功能
插件打包
插件发布
4.1 环境准备
yeoman 和 generator-code 是 vscode 官方推荐的插件开发辅助工具,用于以引导方式生成一个插件的基础目录和文件。
安装:npm install -g yo generator-code
4.2 开发插件
创建插件目录及文件(可以基于已有的插件文件创建并修改)。或基于 yo 进行引导式生成,执行命令:yo code,然后按引导操作即可。
基于基础文件进行功能开发或修改,完成插件的功能后,可以将插件放到系统自带目录中,重启 vscode,如无错误,即可发现插件可以选择启用。
4.3 插件打包
可以使用 vsce 将开发好的插件打包成 .vsix 文件,提供给他人安装。
安装 vsce: npm install -g vsce
在插件目录执行打包命令: vsce package
如顺利则会生成 .vsix 文件。在插件面板选择从 VSIX 文件安装,选择该生成的文件,即可安装该插件。
4.4 插件发布
可以借助 vsce 将插件发布到 vscode 的插件商店。
首先需要拥有一个微软账户。打开该地址并登陆(没有则注册一个): https://login.live.com
创建一个令牌(Token):进入组织主页 -> 右上角Security -> New Token,注意 Scopes 选项选择 Full access
复制创建的Token,然后切换到命令行窗口,执行如下命令注册一个 publisher: vsce create-publisher < 要注册的唯一账户名>
$ vsce create-publisher lzwme
Publisher human-friendly name: (lzwme)
E-mail: xxxx@live.cn
Personal Access Token: ****************************************************
DONE Created publisher 'lzwme'.
按提示操作,如顺利则账户创建成功。
如果你以前已经创建过一个账户,则可以执行如下命令进行登录:vsce login。
在插件目录执行如下命令发布: vsce publish
主题扩展 lzwme.lzwme-eye-care 就是通过上述方法自定义的一个练手主题插件,具体的主题配色主要是参考流行开源主题聚合得到。你可以通过 vscode 的插件商店搜索 Eye Care Themes 或 lzwme 进行安装体验。
其源码仓库地址为: https://github.com/lzwme/eye-care-vscode-theme
5 相关参考或链接