如何让 VisualStudio 代码在格式化代码中显示斜体字?

如何配置 VS 代码以支持斜体样式,如图所示?

我目前的设置:

{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}
96734 次浏览
"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,

此后还要重新启动 VSCode。

下面的代码没问题

{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}

您必须在计算机上安装操作员 Mono 才能正常工作。可以在这里下载: < a href = “ https://www.typography.com/fonts/Operator/style/”rel = “ norefrer”> https://www.typography.com/fonts/operator/styles/ 编写本文时的当前价格是每台机器599美元。

如果已安装字体并重新启动 VisualStudio 代码,请尝试更改主题。有些主题不支持斜体样式。

您必须使用文件名指定字体。如果你有一个斜体字体,那么这将工作(我在 Mac 上尝试了这一点)。

例如:

"editor.fontFamily": "'OperatorMono-LightItalic'",

首先,我知道这个帖子已经有一年多的历史了,但是我在没有改变 Dark + 主题的情况下也在搜索同样的东西,所以我把它们放到了 setings.json 的 vs code 中,它可能不是最漂亮的,但是它甚至可以在任何你选择的没有斜体的主题上工作,如果你想删除它,只需要把它放到注释中,如果你以后想改变它,我已经把颜色放到注释中了!

     "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"
}
},
]
},

希望这对任何人都有帮助,并再次为发布过时的帖子感到抱歉。

这个问题的直接答案是(从这个 github 页面 ) :

将其添加到 setings.json (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 代码定义一种字体时(比如 OP 的操作符 Mono) ,所有的东西都是以这种字体呈现的。为了实现 OP 图像中的外观,您需要对某些元素应用不同的字体样式(斜体/粗体)。此外,如果你的字体有一个明显不同的斜体风格(例如操作员 Mono 有草书连字) ,你会得到一个类似的外观 OP 的图像。


其他考虑

为了使你的 斜体字看起来不同于你的正常文本,你需要使用一种字体的斜体,看起来不同。这样的字体是 OperatorMono (付费) ,或者 FiraCodeiScript(免费) ,或者 费拉弗洛特(免费)。我个人更喜欢 FiraCodeiScript。

要使斜体字连接起来,(它们之间没有空格) ,就像书写草书一样,你需要启用字体连字:

Ligature Example

要执行上述操作,请确保您的 setings.json 具有以下内容:

{
"editor.fontLigatures": true,
"editor.fontFamily": "'Fira Code iScript', Consolas, 'Courier New', monospace"
}

其余的字体是不需要的,但它们是备用字体,以防您遗漏了第一种字体。名称中有空格的字体,通常需要单引号 '。此外,您可能需要重新启动 VS 代码。

恢复莫妮卡的回答对我有所帮助,但是我注意到所有的东西都不像我在斜体主题上发现的那样是斜体的。我从 https://github.com/wesbos/cobalt2-vscode/issues/116中找到了一个更全面的斜体设置列表。在 github 上感谢@bgarrant。

将其添加到 setings.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"
}
}
]
}

新的精炼列表我使用9/11/2021复制下面的块

"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": ""
}
}
]

}

在检查给定的答案之后,不要灰心丧气。 也许你像我一样,没有安装软件包里的所有字体。 在我的特殊情况下,我安装了 Firacode iScript 正则以及粗体和斜体包,这件事工作得非常出色。

我知道这是一个老问题,但我发现自己在这个线程,当我试图设置操作员 mono 在我的 Windows 机器上,不得不花一些时间在它上面工作,但如果其他人正在寻找这一点,它原来就像下面的 VS 代码:

  1. 安装操作员 Mono 黑暗主题
  2. 将以下内容添加到 setings.json:
"workbench.colorTheme": "Operator Mono Dark Theme",
"editor.fontFamily": "Operator Mono Light"

这样就行了。

首先从 给你下载一个 zip 文件。然后通过双击它解压缩并安装每个具有 。 ttf扩展名的文件。然后转到 VS Code,用 CMD + ,CTRL + ,(在 Windows 计算机上)打开设置并键入 字体。在字体系列下粘贴此 ‘ Fira Code iScript’(包括单引号)。现在开始使用 fira 代码作为主要字体。 唯一剩下的就是添加设置并告诉 VS Code 何时实际使用递归字体。为此,仍然在设置中,键入 象征性的颜色单击令牌颜色自定义-打开它在 setings.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": ""
}
}
]
},

这样就可以了! 记得保存设置文件!

对于任何想要改变你想要的东西的人,采取。Json 结构,然后在 12.4命名约定部分查看这个站点

Https://macromates.com/manual/en/language_grammars

您可以改变您编写的每一行代码中的每一个元素。

最简单的方法是安装专门为 Operator Mono 优化的主题。在 VSCode 市场上有包括太阳能的 有不少

要制作斜体格式的 vs 代码,请按照以下步骤:

步骤1: 安装 Fira 代码 iScript(在下载 github-直接联系表单后打开 .ttf文件在本地安装它们)

步骤2: 必须安装 深色 + + 斜体主题(代码直接连接)

  • 在 VScode 中,按 ctrl/command + p启动命令面板,然后运行命令:
ext install idbartosz.darkpp-italic

步骤3: 在 JSON 中打开 VS Code 设置并添加以下代码行

{
...
"editor.fontFamily": "Fira Code iScript",
"editor.fontLigatures":  true,
"editor.fontSize": 14,
"workbench.colorTheme": "Dark++ Italic",
...
}

步骤4: 现在你的编辑器将会像你想的那样棒。如果你想做进一步的定制,你也可以尝试下面的说明。

VS Code 使用 TextMate 语法语法来定义如何呈现代码。您可以参考 官方文件以获得进一步的清晰度。在 setings.json 中,仍然可以通过修改 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": ""
}
}
]
}

步骤5: 如何识别令牌

要标识给定元素的 TextMate 令牌范围,请打开命令面板(ctrl + shift + p)并搜索 Developer: Inspect Editor Tokens and Scopes。这将打开 Scope Inspector(打开新窗口) ,您可以在其中获取要配置的元素的标识符。现在只需单击要检查的元素,vscode 就会显示匹配范围的列表。