VSCode 自定义主题样式

[vhxubo]

在别的视频中看到别人的className显示很好看，于是想尽方法去寻找那个字体

最后，当我放弃的时候，发现CSS Modules and React | CSS-Tricks中使用到该字体：Operator Mono Ssm，但是对于我想要的那个好看的样式，需要在 italic 模式下

于是乎，在搜索 Operator Mono 字体时，发现beichensky/Font: FiraCode 和 Operator Mono 字体中的设置文章

"editor.fontFamily": "Operator Mono",
"editor.fontLigatures": true, 
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "name": "italic font",
            "scope": [
                "comment",
                "keyword",
                 "storage"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },
    ]
}

但是，这里面的 scope 覆盖的太多，通过 > inspectTMScopes 便可以知道指定的文本在哪个范围下

最终的配置文件如下

  "editor.fontFamily": "Operator Mono lig, Sarasa Term SC",
  "editor.fontLigatures": true,
  "editor.formatOnType": true,
  "editor.lineHeight": 1.5,
  "editor.fontWeight": "400",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid",
"editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                  //following will be in italic
                  "comment",
                  "emphasis",
                  "entity.name.method.js",
                  "entity.name.class.js",
                  "entity.name.tag.doctype",
                  "entity.other.attribute-name",
                  "entity.other.attribute-name.tag.jade",
                  "entity.other.attribute-name.tag.pug",
                  "keyword",
                  "keyword.control",
                  "keyword.operator.comparison",
                  "keyword.control.flow.js",
                  "keyword.control.flow.ts",
                  "keyword.control.flow.tsx",
                  "keyword.control.ruby",
                  "keyword.control.module.ruby",
                  "keyword.control.class.ruby",
                  "keyword.control.def.ruby",
                  "keyword.control.loop.js",
                  "keyword.control.loop.ts",
                  "keyword.control.import.js",
                  "keyword.control.import.ts",
                  "keyword.control.import.tsx",
                  "keyword.control.from.js",
                  "keyword.control.from.ts",
                  "keyword.control.from.tsx",
                  "keyword.operator.expression.delete",
                  "keyword.operator.new",
                  "keyword.operator.expression",
                  "keyword.operator.cast",
                  "keyword.operator.relational",
                  "keyword.operator.sizeof",
                  "keyword.operator.logical.python",
                  "italic",
                  "markup.italic",
                  "markup.quote",
                  "markup.changed",
                  "markup.italic.markdown",
                  "markup.quote.markdown",
                  "markup.deleted.diff",
                  "markup.inserted.diff",
                  "meta.delimiter.period",
                  "meta.diff.header.git",
                  "meta.diff.header.from-file",
                  "meta.diff.header.to-file",
                  "meta.tag.sgml.doctype",
                  "meta.var.expr",
                  "meta.class meta.method.declaration meta.var.expr storage.type.js",
                  "meta.decorator punctuation.decorator",
                  "meta.selector",
                  "punctuation.accessor",
                  "punctuation.definition.comment",
                  "punctuation.definition.template-expression.begin",
                  "punctuation.definition.template-expression.end",
                  "punctuation.section.embedded",
                  "quote",
                  "source.js constant.other.object.key.js string.unquoted.label.js",
                  "source.go keyword.package.go",
                  "source.go keyword.import.go",
                  "source.go keyword.function.go",
                  "source.go keyword.type.go",
                  "source.go keyword.struct.go",
                  "source.go keyword.interface.go",
                  "source.go keyword.const.go",
                  "source.go keyword.var.go",
                  "source.go keyword.map.go",
                  "source.go keyword.channel.go",
                  "source.go keyword.control.go",
                  "storage",
                  "storage.type",
                  "storage.modifier",
                  "storage.type.property.js",
                  "storage.type.property.ts",
                  "storage.type.property.tsx",
                  "tag.decorator.js entity.name.tag.js",
                  "tag.decorator.js",
                  "text.html.basic entity.other.attribute-name.html",
                  "text.html.basic entity.other.attribute-name",
                  "variable.language",
                  "variable.other.object.property"
                ],
                "settings": {
                  "fontStyle": "italic"
                }
            }
        ]
    }

参考

• Italics for keywords, etc wesbos/cobalt2-vscode#116 (comment)

• 为VSCode 设置好看的字体：Operator Mono_浮沉半生的博客-CSDN博客

• Adding Custom Syntax Highlighting to a Theme in VSCode | egghead.io