如何在VSCODE中使用Textmate更改JSX组件标记的语法突出显示？
在VSCODE中使用Textmate更改JSX组件标记的语法突出显示，您可以按照以下步骤进行操作：
- 打开Visual Studio Code（简称VSCODE）。
- 在顶部菜单栏中选择“文件”（File），然后选择“首选项”（Preferences），再选择“设置”（Settings）。
- 在设置页面的搜索框中输入“语言配置文件”（Language Configuration File），然后选择“编辑settings.json”（Edit in settings.json）。
- 在settings.json文件中，添加以下内容：
"editor.tokenColorCustomizations": {
"[TextMate Theme名称]": {
"textMateRules": [
{
"scope": "meta.jsx meta.tag, meta.jsx meta.tag entity.name.tag",
"settings": {
"foreground": "#FF0000" // 设置标签的前景色，例如红色
}
},
{
"scope": "meta.jsx meta.tag punctuation.definition.tag",
"settings": {
"foreground": "#0000FF" // 设置标签的符号（<, >）的前景色，例如蓝色
}
},
{
"scope": "entity.name.class",
"settings": {
"foreground": "#00FF00" // 设置组件名的前景色，例如绿色
}
},
// 更多自定义规则...
]
}
}请注意替换上述代码中的[TextMate Theme名称]为您正在使用的TextMate主题名称。
- 保存并关闭settings.json文件。
- 重新加载VSCODE，现在您应该能够看到JSX组件标记的语法突出显示已经根据您的自定义设置进行更改。
此方法通过编辑VSCODE的设置文件来更改TextMate语法主题的颜色配置，从而实现自定义JSX组件标记的语法突出显示。您可以根据需要修改每个语法元素的前景色，以满足个性化的需求。
如果您想了解更多关于VSCODE的设置和自定义功能，可以参考腾讯云开发者文档中的相关内容：VSCODE设置。
请注意，由于要求不能提及云计算品牌商，本答案仅提供了使用VSCODE自定义TextMate主题的方法，并没有涉及云计算相关内容。
相关·内容
我们的基础设施使用YML文件来配置各种进程。例如，(非常简化的)配置块可能如下所示：
process:
my-process:
requires: "@other-process::parameter"
dockerfile: |
FROM alpine
RUN apk add git
script: |
#!/bin/bash
if [ ! -f $file ]; then echo header > $file; fi
我们使用visual代码来创建/编辑这些
浏览 2提问于2018-05-14得票数 5
回答已采纳
我对Reactjs很陌生，我正在尝试为Reactjs和jsx配置VSCode。
现有信息似乎过时了..。我设法在VScode中配置了reactjs。
我安装了以下扩展：
排字安装程序
台风
Babel ES6/ES7
Reactjs代码段
由TwentyChung编写的jsx
VSCode语言模式现在显示"Javascript“。
我无法开始工作的是react jsx语法突出显示和intellisense。我遗漏了什么？有关于jsx配置的说明吗？
Windows 1064，VSCode 1.5.2，在.js中响应文件
谢谢,
恩里科
浏览 2提问于2016-09-22得票数 5
回答已采纳
VSCode构建在不支持Textmate语法和主题的MonacoEditor之上。但不知何故，VSCode使之成为可能。我很好奇VSCode是如何做到这一点的。
我之所以问这个问题，是因为我正在制作一个具有TextMate语法和主题支持的代码编辑器(基于摩纳哥)。但我无法理解我是如何做到的。
虽然像monaco-textmate这样的包可以使TextMate语法与摩纳哥一起工作，但是语法突出显示是。
浏览 5提问于2019-05-22得票数 3
我非常喜欢在Notepad++中为各种构建日志和工件定义语法突出显示规则，这些规则和构件是我在过去做过的工作，以使特定的文本标记弹出。我想知道VSCode是否有类似的功能。
关于不熟悉的内容，下面是Notepad++文档和一个现场演示：
浏览 4提问于2020-05-14得票数 3
我目前正在尝试为一个新的文件类型(ANTLR)编写一个扩展名，并想知道如何更改Visual代码中用于语法突出显示的颜色。在我看来，这似乎不是在扩展中定义的，而是在其他地方定义的。没有颜色的首选项，我也没有找到一个CSS文件来定义它(因为vscode使用的是电子)。我还查看了生成的设置文件vscode及其附带的文件，但也没有任何线索。网络搜索也无济于事。所以，我现在有点迷路了。
有人能给我一些提示或者指给我看相关的文档吗？
浏览 9提问于2016-07-01得票数 37
回答已采纳
我真的很难找到如何在Visual代码中为语法高亮设置这些颜色，并且希望有人知道。据我所知，这是反应的“标准”。即绿色返回语句、红色jsx/html元素等
这是我当前文本编辑器“字体颜色主题”的屏幕截图，也是我想要更改的主题。
正如我所说的图像包含两个部分，
最上面的部分是我的VSCode现在的样子
最下面的部分是我想要的样子。
我找了太多小时了，我想不出来..提前感谢
浏览 5提问于2022-11-01得票数 1
1回答
我有一些PHP文件，我用它们来生成CSS文件。我使用扩展名：.css.php
Aptana默认只使用语法突出显示此文件中的PHP代码，但如果我可以为这些文件设置CSS和PHP语法，那就太好了。那么，在Aptana中有什么方法可以做到这一点吗？有没有其他编辑器或IDE可以做到这一点？
浏览 0提问于2011-07-21得票数 0
回答已采纳
我在VScode中使用VScode。标价文件中的块引号如下所示，非常难以辨认。如何更改文本背景？
我已经在用户设置中尝试过以下几种方法，但是它不起作用：
"workbench.colorCustomizations": {
"textBlockQuote.background": "#ff0000", // changes the markdown preview
"editor.textBlockQuote.background": "#0000ff", // Property not
浏览 0提问于2018-12-14得票数 4
回答已采纳
在VS代码UserVoice页面上，为&等实体添加建议和突出显示。微软将此标记为完整，并发表评论称：“此功能是在Visual 2013中为HTML和Razor文档实现的。”我认为这意味着它是在2013年实施的，但不是在守则中实施的。
假设这是正确的，那么如何在HTML文档中为这些项添加高亮显示呢？它们似乎在XML文档中正确突出显示。看一下语法/html.plist，它看起来应该是捕获HTML实体，所以我假设主题会对它们进行适当的着色，但是我真的不明白它在后端是如何工作的。
我的问题是：
VS代码应该突出显示这些项目吗？
如果没有，我是否可以更改HTML语法文件或主题文件
浏览 6提问于2016-03-24得票数 22
我试图在我的库网站上高亮显示代码片段。我尝试过Highlight.js和Prism，但是它们都没有正确地标记代码(这是Ruby)，所以最终代码没有正确地突出显示语法。这是因为它们都实现了自己的令牌化正则表达式，这是一种必然存在缺陷的方法。
然后，我发现、和都使用进行标记化。在我看来，这是正确的方法，让语言语法保持在一个地方，这样其他工具就可以重用它们，而不是每个工具都定义自己的语法。
我的问题是：如何使用Node中的TextMate语法标记代码字符串？，我的目标是拥有如下内容：
const codeSnippet = `
class Foo
def bar
puts "ba
浏览 8提问于2019-10-18得票数 3
回答已采纳
2回答
尝试启动gatsby+react+typescript项目时，VSCode将仅对我的.tsx文件中的超文本标记语言应用语法突出显示。typescript代码保持单一颜色。我该如何解决这个问题？ 注意:我目前没有安装插件，如果文件类型设置为.jsx，突出显示将起作用 ?
浏览 80提问于2019-10-01得票数 4
回答已采纳
1回答
如何向VSCode添加基本语法？
、、、、
我想在vscode中添加最简单的(mvp)语言语法和语法突出显示。
这是(国际海事组织)混乱的TextMate文档(适用两种不同版本)和随机的互联网建议。我做不到一个基本的例子，也找不到一个。
如何添加只有一条规则(例如:将"foo“视为mylang.symbol.foo)的语言语法，以及影响此符号的单一着色规则？
浏览 5提问于2019-01-24得票数 9
回答已采纳
我对在VSCode中用简单的文本文件讲课和做笔记很感兴趣(因为我已经用它来编码了)。
然而，对于我的生活，我不知道如何改变简单的文本颜色。我想要的是有一种文本颜色在一个缩进深度。例如,
Notes:
a:
b:
Notes将是与a和b不同的颜色。我想要这个是为了澄清要点。有没有简单的方法？
谢谢。
浏览 0提问于2019-12-29得票数 3
我正在尝试使用VS代码的反应与通量项目。VS代码将在.js文件中给出JSX的错误和警告。我保留了.js扩展，而不是.jsx，因为我想要来自VS代码的智能感知。
如何在VSCode的.js文件中进行JSX验证和高亮显示？或者，有没有办法在进行适当的JSX验证的同时保持VSCode中的智能感知？
浏览 12提问于2015-11-19得票数 2
大家好，我正在学习Rails3，所以我开始使用gem Bundler ()。有人知道如何设置TextMate来突出显示Gemfile语法吗？谢谢!
浏览 50提问于2010-07-04得票数 18
回答已采纳
1回答
在Visual Studio代码中为一种新语言的文本突出显示定义了TextMate语法之后，我现在正在编写一个DefinitionProvider。可以在我的扩展代码中访问文档的语法标记吗？ DefinitionProvider中扩展方法的签名是： provideDefinition(
document: vscode.TextDocument,
position: vscode.Position,
token: vscode.CancellationToken,
) 而且我找不到从文档实例中获取任何令牌的方法... 任何帮助都是非常感谢的=) 编辑:让我重新表述
浏览 14提问于2021-03-16得票数 0
回答已采纳
但是，我想更改下面张贴的图像中文本的颜色突出显示；但是，我找不到标记/属性的名称，该属性负责它的前景色。当我将插入符号放在字符串中时，文本将被高亮显示。
目前我使用的主题是一个VSCode主题:材料Palenight高对比度。
浏览 2提问于2021-03-27得票数 1
回答已采纳
我想知道为什么TextMate对HTML标签有不同的突出显示。正如你在截图中看到的，尖括号是白色的。其他人则不是。我使用哪个主题并不重要。它总是以不同的方式突出显示。
这是一个bug，或者我可以在主题中修复它吗？
谢谢。:)
浏览 0提问于2012-01-18得票数 0
回答已采纳
1回答
我想使用一些来自的web组件。但我不知道如何在Svelte中使用它们，因为svelte将web组件视为svelte组件。
当我试图用它们作为，
<script lang="ts">
import { Button } from "@vscode/webview-ui-toolkit"
</script>
<main>
<Button appearance="primary">Text</Button>
</main>
我知道这个错误，
Element does not
浏览 10提问于2022-03-01得票数 3
回答已采纳
4回答
我正在为崇高/TextMate语言文件中的一些语法突出显示处理正则表达式，它要求我在一个非自结束的html标记上“开始”，并在相应的结束标记上结束：
begin：(<)([a-zA-Z0-9:.]+)[^/>]*(>)
结尾：(</)(\2)([^>]*>)
到目前为止，到目前为止，我能够捕获标记名，并且它能够匹配，以便能够为标记之间的区域应用适当的模式。
jsx-tag-area:
begin: (<)([a-zA-Z0-9:.]+)[^/>]*>
beginCaptures:
'1&#
浏览 4提问于2014-08-04得票数 8
我已经习惯于使用FF开发工具栏在浏览器中编辑CSS。然而，我确实错过了Textmate和语法突出显示。我正在寻找一个插件为Textmate编辑CSS的同时，在Firefox中查看。我尝试过其他编辑器，如CSS Edit，Espresso，Coda，但没有一个能达到Textmate的功能和灵活性。
理想情况下，最好的方案是Firefox，在右边有一个Live CSS面板(Textmate would )，底部有Firebug。我有登台环境，但每次刷新/重新加载更改的速度都很慢。
浏览 1提问于2009-10-12得票数 3
1回答
如何更改VSCode中的语法突出显示，使其符合特定的样式指南？例如，我希望遵循成员变量被写为some_member_variable_的。当我使用这种约定时，VSCode对该名称的颜色不会与标准文本不同。但是我有一些使用mSomeMemberVariable约定的代码，而且它的颜色与其他文本不同。有没有更好地配置它的方法？
浏览 100提问于2019-02-22得票数 4
回答已采纳
2回答
我是VSCode用户，当您关闭文件选项卡并再次打开时，定义语言是令人沮丧的，一直如此！在反应项目中。
因此，我尝试将我的header.js转换为header.jsx，它起了作用，我不需要一直定义语言。
但我不知道这是否是一个很好的练习，我所有的语法和片段似乎都很有效。
我可以在我的反应项目中使用jsx文件格式而不是JS吗？
浏览 4提问于2021-09-03得票数 0
回答已采纳
我正在为vscode开发一个语言扩展。我定义了一个tmLanguage文件，一切都很正常。在悬停功能中，使用vscode.MarkdownString.appendCodeblock()可以正确地解释标记，并且我的自定义语言的语法突出显示可以开箱即用，方法如下： const content = new MarkdownString("", true)
content.appendMarkdown("## Examples: \n")
content.appendCodeblock(examples, "lmps") 其中examples包含我的
浏览 51提问于2020-06-11得票数 3
回答已采纳
3回答
VSCode似乎不自动缩进jsx中的HTML元素吗？
有没有办法解决这个问题。
更新
在原子中
当我输入<div>时，atom将显示：
在我按下return键后，结果是(注意光标的位置)：
在VSCode
浏览 2提问于2016-11-09得票数 34
类背景：在Sublime Text和Textmate中，当在Rails link_to或表单字段中使用新的拼音散列格式时，单词“”被错误地突出显示：
类目标：有没有办法像使用旧格式一样正确地突出显示“”关键字：
浏览 27提问于2012-11-26得票数 16
回答已采纳
1回答
我是冒号散列的大量用户，但是默认的Aptana没有为它们提供任何突出显示。
以下是Ruby1.9中的冒号散列：
{ animal: "duck" }
有谁知道我需要打些什么才能使“动物：”部分以另一种颜色显示？
更新：
从源代码中可以看出，Aptana没有使用PLists文件，而且该特性目前还不完整。
我尝试过更改源中的作用域，但它似乎没有为我更新。
要找到Aptana试图突出显示的范围
Ctrl+Alt+P)Read 命令-> Bundle Development -> Scope和Matching Rule (或者默认的快捷方式是 the box )。它可以列出
浏览 5提问于2012-04-24得票数 5
回答已采纳
我可以看到如何将带有别名的语言添加到vscode中，我还知道如何添加文件关联。但是，我想为现有的语言名称添加别名，以便在自定义标记代码块中使用它们。
我想要更高：
```run:html
喜欢
```html
我使用这个特殊的命令对我的代码块进行编码，以便自定义解析器具有一些额外的信息。
这确实是一个奢侈的问题，但我希望vscode正确地突出显示代码。
我怀疑由于vscode不知道"run:html“作为一种语言，所以它不会突出显示它。我猜测，由于markdown支持是原生的，所以它使用其内部语言注册表来呈现markdown中的代码。所以我的想法是为我的自定义类型创建一个别名。
浏览 0提问于2018-05-01得票数 1
我正在使用TextMate突出显示语法编写我的自定义语言。这是我检测双引号字符串的规则。
"str_double_quote": {
"begin" : "\"",
"end" : "\"",
"name": "string.quoted.double.skill"
}
这个规则适用于正常情况，但对于这种情况，字符串包含转义的双引号，如下所示：
"This is my \"test\"
浏览 2提问于2019-12-12得票数 0
我想在我用Jekyll写的博客上改进语法突出显示。我注意到有些语言(例如Scala)并不总是被Rouge正确地高亮显示(它执行错误的标记化)。同时，GitHub的代码示例和专家正在正确地显示Scala语法，显然他们使用自己的库语言学家来获得更好的结果。
由于修补Rouge看起来很容易，那么有什么方法可以使用语言学家来标记和创建CSS来突出服务器端呢？
浏览 2提问于2018-12-10得票数 1
回答已采纳
6回答
JSX代表什么？
我指的是JSX，它被定义为ECMAScript的类似XML的语法扩展，随着ReactJS的日益流行，它变得相当流行。
浏览 4提问于2016-09-13得票数 55
回答已采纳
在PhpStorm中，Jenkinsfile的代码被高亮显示并自动完成。在我的项目中，我有多个Jenkinsfile(比如Jenkinsfile_DEV、Jenkinsfile_TEST、Jenkinsfile_PROD)。在这个文件中，突出显示和自动完成不起作用。
如何使Jenkinsfile**，不仅支持名称为的文件，而且还能将其他文件与此突出显示/自动完成相关联(例如* **`Jenkinsfile_`**)? )
到目前为止，我尝试过的是:在File -> Settings -> Editor -> File Types -> Recognized file t
浏览 1提问于2020-04-25得票数 0
回答已采纳
1回答
给予：
Swig模板引擎：
Webstorm有一个插件：
用于Swig的Textmate包可用：
我想我应该能让斯威格突出显示修复，但我只得到一半的方式。
下面是我得到的结果突出显示。Swig代码按预期高亮显示，但HTML不再突出显示。
我也尝试过安装和启用，但是当HTML和Swig包都被激活时，代码会被高亮显示为仅HTML。如果禁用HTML包，但Swig包仍然处于活动状态，则只会得到Swig高亮显示。
我的问题:如何在WebStorm的同一个文件中突出显示Swig代码和HTML？
结果：
这是我在WebStorm 9中的Textmate配置：
同样，简
浏览 1提问于2014-11-13得票数 11
回答已采纳
我发现这在Notepad++中非常有用，但在VSCODE中找不到这样做的选项，VSCODE能做到吗？看看周围的环境一段时间，谷歌了，但没有帮助。
auto-highlight txt file content as markdown syntax：我知道我可以很容易地让vscode通过vscode突出显示我的txt文件内容，但是我想知道如何让它变得vscode。
浏览 12提问于2019-07-08得票数 2
回答已采纳
使用Textmate，我设法关闭了php文件的语法突出显示。经过多次试验和错误，我发现这是因为我不小心按下了SHIFT-CTRL-OPTION-D (我在Mac上，顺便说一下)。我到处寻找，尝试了许多组合键，但我想不出如何重新启用漂亮的语法突出显示。请帮帮我，Textmate大师，你是我唯一的希望！
浏览 0提问于2012-12-01得票数 6
回答已采纳
在Atom中，我的代码语法突出显示工作得很好。然后昨天，我重新启动了我的计算机，这可能是一个月来的第一次，当我打开Atom时，我所有的语法突出显示都不正确。 系统会自动正确检测语言，但无论使用哪种语言，所有文件上的所有语法突出显示都是不同且不正确的。 我已经重启Atom很多次了。尝试--安全模式。我已经注意到，如果我在我的配置中打开了"Tree Sitter“解析，那么某些语言的语法突出显示会被纠正，但不是全部。 有没有人经历过这种情况并找到了解决方案？ 我使用的是Majave版本10.14.6和Atom版本1.57.9 x64
浏览 15提问于2021-07-08得票数 0
6回答
我使用TextMate进行Ruby编辑，但在打印文件时，代码没有语法突出显示。有没有好的程序可以打印出格式良好的彩色突出显示的Ruby代码？
浏览 2提问于2010-01-22得票数 3
回答已采纳
1回答
我将很快完成一个涉及编写BrightScript和SceneGraph代码的项目。我知道Eclipse有一个插件，但它仍然做不到我想做的事情。我的问题主要是在包含其他类型代码的XML文件中添加语法突出显示。如果您以前从未为Roku开发过，可以在XML文件中添加脚本标记(非常类似于HTML和Javascript)。该脚本包含BrightScript。目前，脚本标记中没有针对该代码的语法突出显示。我想知道是否可以将它添加到VSCode中。据我所知，VSCode是非常可扩展的，但我以前从未使用过它。谢谢!
浏览 3提问于2017-07-21得票数 1
回答已采纳
1回答
我开始学习打字稿，以及SolidJS和我偶然发现的。
import { Component } from "solid-js"
const Button:Component=({onClick})=>{
return <button onClick={onClick}>Button</button>
}
export default Button
我创建的每个组件都充满了错误突出显示，但项目正常工作，甚至onClick中传递的函数也是如此。
可能是vscode配置错误？我的代码反应正常。
文件扩展名为tsx：
ts
浏览 10提问于2022-11-19得票数 0
回答已采纳
我在linux机器上使用VSCode，但我以前使用Notepad++。在windows中，在记事本的语言选项(将代码的颜色和格式设置为java、php、c#、et)中，有一个选项可以创建您自己的自定义格式化程序，我使用该选项创建了自己的“日记语言”，例如：
如果我用*开始和结束一行，它会用黑色和粗体来格式化这一行。
如果我用#开始和结束一行，它会用红色和普通格式格式化这一行。
如果我用>开始一行，以<结尾，它用蓝色和下划线格式化这一行。
我知道我可以为vscode开发我自己的插件，但是这并不容易，而且绝对不是快速的，有一个选项或插件允许我这样做吗？
是的，我可以
浏览 3提问于2018-05-23得票数 2
回答已采纳
有人能给我解释一下如何在VSCode的默认主题中自定义Python的文档字符串颜色吗？我想通过用户设置来完成，因为我想能够保存我的配置文件。
我尝试使用"editor.tokenColorCustomizations"：{}，但它影响所有字符串。
浏览 0提问于2017-10-11得票数 13
我正在尝试创建一个自定义的VSCode扩展，它将我当前选定的文件内容导出为PDF格式。(我知道有PrintCode，但它不适合我的用例)
我当前代码的相关部分是：
const editor = vscode.window.activeTextEditor;
if (editor !== undefined) {
let cursorPosition = editor.selection.start;
let wordRange = editor.document.getWordRangeAtPosition(cursorPosition);
let highlight
浏览 11提问于2022-01-13得票数 0
回答已采纳
1回答
在我的崇高文本3 (build 3065)中，ES6字符串插值回显似乎混淆了html文件中的语法突出显示。例如
console.log(`"`)
将导致语法突出显示假设这里有一个无与伦比的引号，而不是认为这是一个由backticks引用的单引号--这使得源文件的其余部分在代码突出显示方面毫无用处。
这个问题是否在更新的构建或附加程序中解决了？
同时，我可以通过在评论中结束想象中的引文来解决这个问题。
console.log(`"`) // "
浏览 4提问于2015-05-01得票数 3
我正在构建一个实验性的lexer生成器，我认为为VS代码输出简单的语法高亮笔是很酷的。输入语法经过经典的正则语言-> NFA -> DFA转换，然后生成状态机代码(它还具有一些支持嵌套语言的非常规特性)。将所有这些转换回tmlanguage定义是一个复杂的问题，我开始怀疑VS代码扩展是否是一个更好的选择。问题是：
VS代码语法突出显示内部是否完全与tmlanguage regex扫描器联系在一起，还是可以编写一个以编程方式提供标记/突出显示范围的扩展？
是否有一个API可以使这个过程变得相当简单，或者这个项目会是一个强制巡演呢？
浏览 2提问于2017-08-23得票数 2
回答已采纳
我有一些.ts文件，其中包含.jsx语法。我想告诉tsc编译这些.ts文件，就像编译.tsx文件一样。
是否可以配置tsc来做到这一点？
如何配置vscode以支持这些文件中的JSX语法的语法高亮显示？
浏览 5提问于2016-10-05得票数 15
回答已采纳
5回答
我需要在纸上打印一些Bash脚本。关于如何通过语法突出显示和其他功能获得良好的输出，有什么建议吗？
我尝试过TextMate，但输出的字体很大(并且没有语法突出显示和颜色)。
浏览 0提问于2009-07-30得票数 1
回答已采纳
1回答
在Sublime文本中是否有Jinja2模板的语法突出显示？
{% extends "template.html" %}
{% block content %}
{% if task == 'archimed_spiral' %}
{% include 'archimed.html %}
{% elif task == 'gcd' %}
{% endif %}
{% endblock %}
我相信它是基于Python的。而且它很难读懂。
浏览 0提问于2014-04-05得票数 21
回答已采纳
我喜欢Rstudio和简单的点击git(集线器)集成。
我可以使用Rstudio作为其他编程语言的IDE吗？
特别是，除了R/Rstudio之外，我还经常使用Stata。Stata很棒，但是编程环境(do文件编辑器)已经落后了很多年。根据，可以将Stata设置为从其他文本编辑器(Emacs等)运行。
我能把它设置为从Rstudio运行吗？Rstudio能支持Stata语言的语法突出显示吗？如果是这样，我可以在Rstudio中添加一个快捷方式或命令来执行Stata代码块吗？
浏览 9提问于2016-07-26得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
