怎样在VSCode中自定义主题和配色?界面美化完全指南

推荐的vscode主题有dracula official、one dark pro、monokai pro、synthwave ’84等;手动调整配色需编辑settings.json文件,使用workbench.colorcustomizations和editor.tokencolorcustomizations修改ui和代码高亮颜色;用户配置文件通常位于windows的%appdata%codeusersettings.json、macos的$home/library/application support/code/user/settings.json、linux的$home/.config/code/user/settings.json;分享自定义主题需创建扩展项目,打包生成.vsix文件并发布到市场或直接分享。

怎样在VSCode中自定义主题和配色?界面美化完全指南

个性化你的vscode,让它看起来更像你!自定义主题和配色是实现这一目标的关键。

怎样在VSCode中自定义主题和配色?界面美化完全指南

修改VSCode主题和配色,可以通过安装主题扩展,或者手动调整设置文件,定制出独一无二的编码环境。

VSCode主题市场里有哪些值得推荐的主题?

VSCode的主题市场简直是个宝藏!说几个我个人特别喜欢的,以及一些选择主题的思路。

怎样在VSCode中自定义主题和配色?界面美化完全指南

首先,Dracula Official 绝对是经典。它以深色背景为主,色彩鲜明,对比度适中,长时间编码眼睛也不会太累。而且,Dracula 家族的配色方案几乎覆盖了所有主流编辑器和工具,如果你想保持开发环境的统一性,选它准没错。

然后是One Dark Pro,atom 编辑器的经典主题移植到了 VSCode 上。它的色彩搭配非常柔和,整体感觉很舒服,代码高亮也很清晰。如果你喜欢比较温和的配色方案,One Dark Pro 会是不错的选择。

怎样在VSCode中自定义主题和配色?界面美化完全指南

Monokai Pro 也是一个很受欢迎的主题。它在经典的 Monokai 配色基础上进行了优化,色彩更加鲜艳,对比度更高,看起来更有活力。如果你喜欢比较醒目的配色方案,可以试试它。

除了这些经典主题,还有很多小众但很有特色的主题。比如,SynthWave ’84 是一种复古风格的主题,色彩鲜艳,带有霓虹灯效果,如果你喜欢这种风格,可以尝试一下。还有一些主题是根据电影、游戏等设计的,比如 Material Theme、Nord 等,可以根据自己的喜好选择。

选择主题的时候,除了看配色,还要注意代码高亮是否清晰,对比度是否适中,以及是否支持常用的编程语言。可以多尝试几个主题,找到最适合自己的。

如何手动调整VSCode的配色方案?

想完全掌控VSCode的配色?手动调整才是王道!步骤其实很简单:

  1. 打开 VSCode 的设置(File -> Preferences -> Settings),或者直接按 Ctrl + ,(windows/linux)或 Cmd + ,(macos)。
  2. 在搜索框中输入 “workbench.colorCustomizations”。
  3. 点击 “Edit in settings.json” 链接,打开 settings.json 文件。

现在,你就可以在 settings.json 文件中添加自定义的配色方案了。workbench.colorCustomizations 是一个 JSON 对象,你可以在其中指定各种 UI 元素的颜色。

例如,要修改编辑器背景色,可以添加以下代码:

"workbench.colorCustomizations": {     "editor.background": "#282c34" }

这里的 #282c34 是一个十六进制颜色代码,代表深灰色。你可以根据自己的喜好修改颜色代码。

除了编辑器背景色,你还可以修改其他 UI 元素的颜色,比如:

  • activityBar.background: 活动栏背景色
  • sideBar.background: 侧边栏背景色
  • statusBar.background: 状态栏背景色
  • titleBar.activeBackground: 标题栏背景色(激活状态)

要修改代码高亮的颜色,需要使用 editor.tokenColorCustomizations 属性。这个属性也是一个 JSON 对象,你可以在其中指定不同代码元素的颜色。

例如,要修改变量的颜色,可以添加以下代码:

"editor.tokenColorCustomizations": {     "textMateRules": [         {             "scope": "variable",             "settings": {                 "foreground": "#abb2bf"             }         }     ] }

这里的 scope 属性指定了要修改的代码元素,settings.foreground 属性指定了颜色。textMateRules 是一个数组,你可以添加多个规则来修改不同代码元素的颜色。

手动调整配色方案需要一定的耐心和尝试,但一旦你找到了自己喜欢的配色,编码体验会大大提升。

VSCode主题配置文件的存放位置在哪里?

VSCode主题配置文件的位置取决于你的操作系统和VSCode的安装方式。一般来说,可以分为全局配置和用户配置两种。

  • 全局配置: 全局配置会影响所有用户和所有VSCode实例。通常不建议直接修改全局配置,因为它可能会被VSCode更新覆盖。
  • 用户配置: 用户配置只影响当前用户,并且优先级高于全局配置。我们通常修改的是用户配置文件。

用户配置文件通常位于以下位置:

  • Windows: %APPDATA%CodeUsersettings.json
  • macos: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json

你可以直接在VSCode中打开用户配置文件,方法是在设置界面搜索 “settings.json”,然后点击 “Edit in settings.json” 链接。

除了 settings.json 文件,还有一些其他的配置文件也与主题相关,比如:

  • keybindings.json: 键盘快捷键配置文件
  • extensions.json: 扩展配置文件

这些文件都位于用户配置目录下。

了解了配置文件的位置,你就可以更方便地管理和备份你的VSCode配置了。

如何将自己定制的VSCode主题分享给其他人?

想把你的神仙配色分享给小伙伴?没问题!

首先,确保你的主题配置已经保存到 settings.json 文件中。然后,你需要创建一个 VSCode 扩展项目,将你的主题配置打包成一个扩展。

  1. 安装 Yeoman 和 VSCode 扩展生成器:

    打开终端,运行以下命令:

    npm install -g yo generator-code

    yo 是 Yeoman 的命令行工具,generator-code 是 VSCode 扩展生成器。

  2. 创建 VSCode 扩展项目:

    在终端中运行以下命令:

    yo code

    然后按照提示选择 “New Color Theme”,输入扩展名称、主题名称等信息。

  3. 修改主题文件:

    在生成的扩展项目中,找到 themes 目录下的主题文件(通常是一个 .json 文件)。将你的主题配置复制到这个文件中。

  4. 修改 package.json 文件:

    打开 package.json 文件,修改以下属性:

    • name: 扩展名称
    • displayName: 扩展显示名称
    • description: 扩展描述
    • publisher: 你的发布者名称
    • contributes.themes: 主题配置信息
  5. 打包扩展:

    在终端中运行以下命令:

    vsce package

    vsce 是 VSCode 扩展管理器,需要先安装:

    npm install -g vsce

    打包完成后,会生成一个 .vsix 文件,这就是你的 VSCode 扩展包。

  6. 发布扩展:

    你可以将 .vsix 文件分享给其他人,让他们手动安装。也可以将扩展发布到 VSCode 扩展市场,让更多人使用。

    要发布到扩展市场,你需要注册一个 azure devops 账号,并创建一个发布者。然后在 VSCode 中登录你的 Azure DevOps 账号,使用 vsce publish 命令发布扩展。

虽然步骤有点多,但只要跟着教程一步一步操作,就能成功发布你的主题。

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享