VS Code 界面缩放和编辑器字体设置

VS Code界面大小和编辑器字体设置

目录

• 一、VS Code 的两种设置方法
• 二、图形化界面配置
• 三、setting.json配置
• 四、字体下载安装方法

一、VS Code 的两种设置方法

本文主要介绍VS Code的主界面缩放和编辑器字体类型大小的设置方法。在此之前先介绍 VS Code 的“设置”方法。

VS Code 的设置通常有两种方法，一种使用 UI 界面，一种使用配置文件 setting.json，如下图一，图二所示。需要注意的是，我们的配置参数是有作用域的，从图一可以看出。左上角有用户，工作区和文件夹作用域，一般在用户/工作区修改参数后，会有一个提示“同步至工作区/用户”，点击即可，如果设置未生效，记得重启编辑器。

：似乎用户配置的优先级是较高的，大家可以多尝试。

图1. VS Code的设置界面

图2. VS Code的setting.json文件

二、图形化界面配置

前面我们介绍了 VS Code 的设置方法，下面将介绍 界面缩放 和 编辑器字体 的设置方法。

1. 界面缩放设置

   • 快捷键：'ctrl' + '+'，'ctrl' + '-'分别控制主界面缩放程度的增大，减小。
   • 快速搜索设置项的快捷键'ctrl' + 'shift' + 'p'。
   • 进入设置后搜索：Window: Zoom Level，参数：0表示100%，1表示125%，0表示85%。

2. 编辑器字体设置

   • 设置字体类型：
     • 设置->文本编辑器->字体：Font Family：'Jetbrains Mono', 'Microsoft YaHei UI', monospace。
     • 上面给的参数中第一项为首选字体，是我们编辑器代码所使用的字体；第二项为备用字体，一般用于中文显示；第三项为通用字体族，作为保底选项。
   • 设置字体大小：
     • 设置---文本编辑器---字体---Font Size。
   • 字体下载方法见本文最后一章。

   如图3所示：

   

   图3. 字体/界面缩放设置界面

三、setting.json配置

• 首先配置文件的打开方式如下

  • ctrl shift p搜索Open User Setting(JSON)。
  • 图形化配置界面每个配置项左侧有个小齿轮，点击小齿轮。
  • 点击将设置复制为JSON文本。
  • 复制到setting.json即可。

  // setting.json
  {
      "window.zoomLevel": 0,				// 缩放参数 0
      "editor.fontWeight": "normal",
      "editor.fontFamily": "'Jetbrains Mono', 'Microsoft YaHei UI', monospace",
      									// 字体类型
      "editor.fontSize": 20,				// 字体大小
  }
  

四、字体的下载安装方法（Windows）

这里我们以一种字体为例来介绍最简单的安装方法。刚好今天发现一个还不错的字体 Maple Mono。

1. 无论什么字体，首先要找到其 .ttf 格式的安装文件，一般在 GitHub。

   Maple Mono 的 GitHub 地址 点击此处。在项目的 GitHub 主页一般都有一个 readme 介绍界面，这个界面通常会提供说明和下载链接，如下图所示。

   

   图4. GitHub 项目界面

   跟随提示来到下载界面如下图所示：

   

   图5. GitHub 字体项目下载界面

   直接下载懒人包即可。下载完成之后解压缩，全选所有的 ttf 文件，鼠标右键点击安装即可。

   

   图6. 字体安装

   2. 此时字体已经安装在电脑上了，前面我们介绍了字体在 VS Code 上的设置方法，打开设置界面，配置字体类型如下图所示。setting.json 代码：

   "editor.fontFamily": "'Maple Mono NF CN', 'Menlo', 'Monaco', 'Courier New', 'monospace'",
   "editor.fontLigatures": true,
   "editor.fontSize": 20,
   

   

   图7. 字体在 VS Code 配置

   至此，字体就配置好了，还是很方便的，如果有想要的字体不知道 Font Family 应该怎么填，直接微信或者百度搜索改字体名字加安装方法，会有很多介绍！

---

Make a Little Progress Every Day!