让 Visual Studio Code 显示斜体字体

1,646 阅读1分钟

font: Dank-Mono-Font

DankMono-Italic

settings: Stackoverflow

// settings.json
{
   
    "editor.fontFamily": "'Dank Mono' , 'JetBrainsMono NF', Menlo, Monaco, 'Courier New', monospace",
  
    //让 Visual Studio Code 显示斜体字体 https://stackoverflow.com/questions/41320848/how-do-i-get-visual-studio-code-to-display-italic-fonts-in-formatted-code
   "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          // the following elements will be in italic
          //   (=Fira Code iScript)
          "comment",
          "keyword.control.import.js", // import
          "keyword.control.export.js", // export
          "keyword.control.from.js", // from
          "keyword.control.import.ts", // import
          "keyword.control.export.ts", // export
          "keyword.control.from.ts", // from
          // "constant", // String, Number, Boolean…, this, super
          "storage.modifier", // static keyword
          "storage.type.class", // class keyword
          "storage.type.php", // typehints in methods keyword
          "keyword.other.new.php", // new
          "entity.other.attribute-name", // html attributes
          "fenced_code.block.language.markdown" // markdown language modifier
        ],
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "scope": [
          // the following elements will be displayed in bold
          "entity.name.type.class" // class names+
        ],
        "settings": {
          "fontStyle": "bold"
        }
      },
      {
        "scope": [
          // the following elements will be displayed in bold and italic
          "entity.name.section.markdown" // markdown headlines
        ],
        "settings": {
          "fontStyle": "italic bold"
        }
      },
      {
        "scope": [
          // the following elements will be excluded from italics
          //   (VSCode has some defaults for italics)
          "invalid",
          "keyword.operator",
          "constant.numeric.css",
          "keyword.other.unit.px.css",
          "constant.numeric.decimal.js",
          "constant.numeric.json",
          "comment.block",
          "entity.other.attribute-name.class.css"
        ],
        "settings": {
          "fontStyle": ""
        }
      }
    ]
  },
}

使用 scope inspect 工具进行微调

使用 Ctrl+Shift+P 进入 vscode 的命令窗口,输入 Developer:Inspect Editor Tokens and Scopes 进入开发者模式,检查编辑器和标记作用域模式,这时候你会发现点击你调试窗口中你想修改的部分,会出现相关的 scope 信息

code.visualstudio.com/api/languag…