VS Code 设置好看的字体：Operator Mono

文章目录

一、字体资源地址

1. 链接

​​FiraCode 和 Operator Mono 字体下载地址​​

2. 资源下载

• Git下载

git

• zip包下载
  ​​​https://gitee.com/gblfy/font/repository/archive/master.zip​​

二、效果图

话不多说，先上图，看看效果是不是大家需要的，咱们再继续往下看：

2.1. JS 代码效果

2.2. CSS 文件效果

2.3. HTML 文件效果

这里的白色背景主题是可以更换的，主要是字体，如果觉得我这个白色背景丑的，请不要在意这些细节，哈哈哈

三、安装字体

这里需要安装两种字体，由于 Operator Mono 需要建立在 Fira Code 字体的环境基础上，所以也要安装 Fira Code 字体，然后安装 Operator Mono。

3.1. 字体列表

3.3. 安装方式

• windows 环境
  进入目录双击字体安装即可



• Mac 上如何安装字体的图文
  按住​​cmd + space​​，搜索“字体册”，然后打开：



• 点击 ​​+​​号，在弹窗中选中字体所在的文件夹，然后确定即可：

3.3. VSCode 配置

键入​​Ctrl + P​​​（快速打开）时，可以按名称打开任何文件。
打开 settings.json
添加内容如下（推荐直接覆盖即可）：

{
    "workbench.iconTheme": "vscode-icons",
    "vsicons.dontShowNewVersionMessage": true,
    "editor.fontSize": 18,
    "editor.formatOnSave": true, // #每次保存的时候自动格式化
    "editor.codeActionsOnSave": { // #每次保存的时候将代码按eslint格式进行修复
      "source.fixAll.eslint": true
    },
    "editor.fontFamily": "Operator Mono",
    "editor.fontLigatures": true, // 这个控制是否启用字体连字，true启用，false不启用，这里选择启用
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "name": "italic font",
                "scope": [
                    "comment",
                    "keyword",
                    "storage",
                    "keyword.control.import",
                    "keyword.control.default",
                    "keyword.control.from",
                    "keyword.operator.new",
                    "keyword.control.export",
                    "keyword.control.flow",
                    "storage.type.class",
                    "storage.type.function",
                    "storage.type",
                    "storage.type.class",
                    "variable.language",
                    "variable.language.super",
                    "variable.language.this",
                    "meta.class",
                    "meta.var.expr",
                    "constant.language.null",
                    "support.type.primitive",
                    "entity.name.method.js",
                    "entity.other.attribute-name",
                    "punctuation.definition.comment",
                    "text.html.basic entity.other.attribute-name.html",
                    "text.html.basic entity.other.attribute-name",
                    "tag.decorator.js entity.name.tag.js",
                    "tag.decorator.js punctuation.definition.tag.js",
                    "source.js constant.other.object.key.js string.unquoted.label.js",
                ],
                "settings": {
                    "fontStyle": "italic",
                }
            },
        ]
    }

}