如何使VS Code将其他文件扩展名视为某种语言？

332

还是有一种方法可以切换当前文件的语言以使用语法突出显示功能？

例如，*.jsx实际上使用JavaScript，但是VS Code无法识别它。

visual-studio-code vscode-settings

— 约翰·迪夫
source

500

在Visual Studio Code中，您可以settings.json像这样向文件中添加用于语言突出显示的持久文件关联：

// Place your settings in this file to overwrite the default settings
{
  "some_setting": custom_value,
  ...

  "files.associations": {
    "*.thor": "ruby",
    "*.jsx": "javascript",
    "Jenkinsfile*": "groovy"
  }
}

您可以使用Ctrl+ Shift+ p，然后键入settings JSON。选择“偏好设置：打开设置（JSON）”以打开您的settings.json。

此Files: Associations功能最初是在Visual Studio Code版本1.0（2016年3月）中引入的。检查发行说明中的可用通配符模式以及文档中的已知语言字符串。

— 乔森
source

6

关联的值必须是语言/插件的ID，而不是名称。例如，我安装的VBScript插件，其ID为vbs。“ * .vms”：“ vbs”获取自定义扩展名以正确关联。

— 马特·美林

刚刚面临类似的问题。如果添加文件关联似乎不起作用，请确保没有.editorconfig关闭文件，或者在VSCode和之间对齐配置.editorconfig，后者将优先处理

— RecuencoJones

您也可以将这些设置放在项目特定的${projectdir}/.vscode/settings.json文件中。

— 詹森

108

按住Ctrl + Shift + P（在Mac上为cmd），选择“更改语言模式”即可。

但是我仍然找不到一种方法来制作具有某些特定语言的特定扩展名的VS Code识别文件。

— 约翰·迪夫
source

3

似乎有直接到的快捷方式Change Language Mode；Alt+K, M

— Stafford Williams

Cmd+K, M对于Mac。

— GreeKatrina

这是很有可能的。请参阅下面的答案：stackoverflow.com/a/51228725/3307796

— JoelAZ

69

对于全局关联，我找到的最简单的方法就是将ctrl + km（或ctrl + shift + p并键入“更改语言模式”）与您正在关联的类型的文件打开。

在第一个选择中，将是“为'x'配置文件关联”（无论文件类型-参见附件），选择此项将使文件类型关联永久

自从最初的问题和接受的答案（我不知道何时更改）以来，这可能已经改变（可能已经改变），但是它比接受的答案和其他一些答案中的手动编辑步骤容易得多，并且完全避免了带有可能不太明显的ID的音乐。

— 乔尔·阿兹
source

2

谢谢-这对我有用。手动编辑settings.json文件时，尚不清楚扩展名应该是什么，但是这种方法对它进行了排序！

— ccbunney

1

@ccbunney表示欢迎，很高兴能为您提供帮助。那是我遇到的完全相同的问题-而且我从来没有弄清楚我需要的扩展ID，大声笑。无论如何，我为自己找到这种解决方案感到非常高兴，而且它正在帮助其他人，这很酷！：D

— JoelAZ '19

33

例如：

// .vscode/settings.json in workspace

{
  "files.associations": {
    "*Container.js": "javascriptreact",
    "**/components/*/*.js": "javascriptreact",
    "**/config/routes.js": "javascriptreact"
  }
}

— 马
source

1

真好如果您具有相同的扩展名，但基于路径的语言解析器不同，那么这将很方便。例如，您可以让yml在一个文件夹中处理Concourse管道，在另一个文件夹中处理Ansible文件。

— 克里斯蒂安·马斯伦

如果可以的话，我会两次投票。一直试图使用.html扩展名保留我的Nanoc布局和部分语法，这解决了它："**/layouts/**/*.html": "erb"-值得注意的是VSCode“语言模式”下拉列表在方括号中显示了语法荧光笔的实际名称，例如Ruby ERB (erb)

— Dave Everitt

18

这对我有用。

{
"files.associations": {"*.bitesize": "yaml"}
 }

— Isura Amarasinghe
source

12

例如，这将使文件结尾.variables并.overrides像任何其他LESS文件一样受到对待。就代码着色而言，就（自动）格式而言。根据需要定义用户设置或项目设置。

（如果您想知道，语义UI使用这些奇怪的扩展名）

— 弗兰克·诺克
source

12

我在这里找到解决方案： https //code.visualstudio.com/docs/customization/colorizer

去VS_CODE_FOLDER/resources/app/extensions/那里更新package.json

— tonda13
source

8

遵循https://code.visualstudio.com/docs/customization/colorizer#_common-questions上的步骤对我来说效果很好：

要扩展现有的着色器，您可以在.vscode / extensions下的新文件夹中创建一个简单的package.json，并提供extensionDependencies属性，该属性指定要添加的自定义项。在下面的示例中，扩展名.mmd被添加到markdown着色器中。请注意，extensionDependency名称不仅必须与自定义项匹配，而且语言ID必须与要扩展的着色器的语言ID匹配。

{
    "name": "MyMarkdown",
    "version": "0.0.1",
    "engines": {
        "vscode": "0.10.x"
    },
    "publisher": "none",
    "extensionDependencies": [
        "markdown"
    ],
    "contributes": {
        "languages": [{
            "id": "markdown",
            "aliases": ["mmd"],
            "extensions": [".mmd"]
        }]
    }
}

— 麦克罗
source

5

我采用了不同的方法来解决几乎相同的问题，在我的情况下，我做了一个新扩展，增加了对Drupal特定文件（例如.module和.inc）的PHP语法突出显示支持： https://github.com。 com / mastazi / VS-code-drupal

如您在代码中所见，我创建了一个新扩展而不是修改现有的PHP扩展。显然，我在Drupal扩展中声明了对PHP扩展的依赖。

这样做的好处是，如果PHP扩展有更新，则我对Drupal的自定义支持不会在更新过程中丢失。

— 马塔齐
source