首页 > 编程知识 正文

vscode美化插件,vscode主题怎么改

时间:2023-05-05 16:34:28 阅读:35092 作者:4733

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 相关参考或链接

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。