我该如何配置VS Code以支持斜体样式,就像这张图片中展示的一样?
我的当前设置:
{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}
我该如何配置VS Code以支持斜体样式,就像这张图片中展示的一样?
我的当前设置:
{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}
ctrl + ,
或cmd + ,
)"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic (=FlottFlott)
"comment",
"entity.name.type.class", //class names
"keyword", //import, export, return…
"constant", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
//following 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"
],
"settings": {
"fontStyle": ""
}
}
]
}
当然,你还可以在scope
中提供其他关键字。请查看VS Code的文档和作用域关键字。
如果您为 VS Code 定义了一个字体(例如 OP 的操作员单体),则所有内容都会以该字体呈现。为了实现 OP 图片中的外观效果,您需要对某些元素应用不同的字体样式(斜体/粗体)。此外,如果您的字体具有明显不同的斜体样式(例如 Operator Mono 具有草书连字),则您将获得类似于 OP 图像的外观效果。
为了使您的斜体看起来与普通文本不同,您需要使用一种其斜体样式不同的字体。这样的字体包括OperatorMono(付费),或FiraCodeiScript(免费),或FiraFlott(免费)。我个人更喜欢 FiraCodeiScript。
要使斜体字符联接在一起(没有间隔),就像写草书一样,您需要启用字体连字:
为此,请确保您的 settings.json 中具有以下内容:
{
"editor.fontLigatures": true,
"editor.fontFamily": "'Fira Code iScript', Consolas, 'Courier New', monospace"
}
其余字体不是必需的,但它们可以作为备用字体使用,以防您缺少第一个字体。 名称中带有空格的字体通常需要单引号'
。此外,您可能需要重新启动VS Code。
首先,我知道这个帖子已经过去一年了,但是我正在寻找相同的东西,而不改变主要的Dark+主题,所以我已经把它们放在了vs代码的settings.json中,它可能不是最漂亮的,但它可以在您选择的任何没有斜体的主题上工作,如果您想删除它,只需把它放在注释中,我已经把颜色放在注释中,如果您以后想要更改它!
"editor.tokenColorCustomizations": {
"textMateRules": [{
"name": "Comment",
"scope": [
"comment",
"punctuation.definition.comment"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#4A4A4A"
}
},
{
"name": "Keyword, Storage",
"scope": [
"Keyword",
"Storage"
],
"settings": {
"fontStyle": "italic"
}
},
{
"name": "Keyword Control",
"scope": [
"keyword.control"
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "entity.other.attribute-name",
"settings": {
"fontStyle": "italic",
//"foreground": "#78dce8"
}
},
{
"name": "entity.name.method.js",
"scope": [
"entity.name.method.js"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#82AAFF"
}
},
{
"name": "Language methods",
"scope": [
"variable.language"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#FF5370"
}
},
{
"name": "HTML Attributes",
"scope": [
"text.html.basic entity.other.attribute-name.html",
"text.html.basic entity.other.attribute-name"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#FFCB6B"
}
},
{
"name": "Decorators",
"scope": [
"tag.decorator.js entity.name.tag.js",
"tag.decorator.js punctuation.definition.tag.js"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#82AAFF"
}
},
{
"name": "ES7 Bind Operator",
"scope": [
"source.js constant.other.object.key.js string.unquoted.label.js"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#FF5370"
}
},
{
"name": "Markup - Italic",
"scope": [
"markup.italic"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#f07178"
}
},
{
"name": "Markup - Bold-Italic",
"scope": [
"markup.bold markup.italic",
"markup.italic markup.bold",
"markup.quote markup.bold",
"markup.bold markup.italic string",
"markup.italic markup.bold string",
"markup.quote markup.bold string"
],
"settings": {
"fontStyle": "bold",
//"foreground": "#f07178"
}
},
{
"name": "Markup - Quote",
"scope": [
"markup.quote"
],
"settings": {
"fontStyle": "italic",
//"foreground": ""
}
},
{
"scope": "variable.other",
"settings": {
"foreground": "#82fbff"
}
},
{
"scope": "entity.name.function",
"settings": {
"foreground": "#dfd9a8"
}
},
{
"scope": "support.function",
"settings": {
"fontStyle": "italic",
"foreground": "#dfd9a8"
}
},
{
"scope": "string",
"settings": {
"foreground": "#CE9178"
}
},
]
},
希望这能帮助到任何人,再次抱歉在一个过时的帖子上发表评论。
scope
中的 Keyword
必须小写:keyword
。 - Scott RudigerReinstate Monica的回答对我有所帮助,但我发现并不是所有东西都像我在倾斜特定主题中发现的那样倾斜。我从https://github.com/wesbos/cobalt2-vscode/issues/116找到了更全面的倾斜设置列表。感谢github上的@bgarrant。
将此添加到settings.json文件中(ctrl +,或cmd +,)
"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"
}
}
]
}
这是我于2021年9月11日更新的列表,请复制以下代码块:
"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"window.zoomLevel": 1,
"cSpell.languageSettings": [
],
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic (=FlottFlott)
"comment",
"entity.name.type.class", //class names
"keyword", //import, export, return…
"constant", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
"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",
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
//following 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"
],
"settings": {
"fontStyle": ""
}
}
]
}
您需要使用字体文件名来指定字体。如果您有一个具有斜体的字体,那么这将起作用(我在Mac上尝试过)。
例如:
"editor.fontFamily": "'OperatorMono-LightItalic'",
首先从这里下载压缩文件。然后解压并通过双击每个具有.ttf扩展名的文件来安装它们。之后,打开VS Code并使用CMD + ,或CTRL + ,(在Windows机器上)打开设置,然后输入font。在字体族中,粘贴此内容'Fira Code iScript'(包括单引号)。现在将开始使用fira code作为主要字体。
唯一剩下的就是添加设置并告诉VS Code什么时候实际使用递归字体。为此,在设置中继续输入token color,点击Token Color Customizations - 在settings.json中打开它并复制以下内容:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic (=FlottFlott)
"comment",
"entity.name.type.class", //class names
"keyword", //import, export, return…
"constant", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
//following 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"
],
"settings": {
"fontStyle": ""
}
}
]
},
这样就可以了!记得保存设置文件!
{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}
要让它起作用,您必须在计算机上安装Operator Mono。可以在此处下载:https://www.typography.com/fonts/operator/styles/撰写本文时,其当前价格为599.00美元/台。
如果您已安装字体并重新启动了Visual Studio Code,请尝试更改主题。某些主题不支持斜体样式。
"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,
在此之后也要重新启动VSCode。
ctrl/command + p
启动命令面板,然后运行命令:ext install idbartosz.darkpp-italic
{
...
"editor.fontFamily": "Fira Code iScript",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"workbench.colorTheme": "Dark++ Italic",
...
}
editor.tokenColorCustomizations
下的textMateRules
来覆盖当前主题的字体样式。"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
// "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": ""
}
}
]
}
ctrl + shift + p
),搜索 Developer: Inspect Editor Tokens and Scopes
。这将打开 Scope Inspector
(打开新窗口),您可以获得要配置的元素的标识符。现在,只需单击要检查的元素,vscode将向您显示匹配的作用域列表。如果您想精确地更改您想要的内容,请使用上面答案中的.json结构,然后查看本网站第12.4节 命名约定
https://macromates.com/manual/en/language_grammars
您可以更改您编写的每一行代码中的每个元素。
在检查给定的答案后,不要失去动力。 也许你和我一样,没有安装包中提供的所有字体。 在我的特定情况下,当我安装了Firacode iScript Regular以及粗体和斜体包时,一切都像魔法般地运行。