Wie erstelle ich VS-Code, um andere Dateierweiterungen als bestimmte Sprache zu behandeln?

332

Oder gibt es eine Möglichkeit, die Sprache der aktuellen Datei so zu ändern, dass die Syntaxhervorhebungsfunktion verwendet wird?

*.jsxVerwendet beispielsweise tatsächlich JavaScript, aber VS Code erkennt es nicht.

visual-studio-code vscode-settings

— John Deev
quelle

499

In Visual Studio Code können Sie Ihrer settings.jsonDatei dauerhafte Dateizuordnungen zum Hervorheben von Sprachen hinzufügen :

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

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

Sie können Ctrl+ Shift+ verwenden pund dann eingeben settings JSON. Wählen Sie Einstellungen: Einstellungen öffnen (JSON) , um Ihre zu öffnensettings.json .

Die Files: AssociationsFunktion wurde erstmals in Visual Studio Code Version 1.0 (März 2016) eingeführt. Überprüfen Sie die verfügbaren Platzhaltermuster in den Versionshinweisen und die bekannten Sprachzeichenfolgen in der Dokumentation.

— Josien
quelle

6

Der Wert für die Zuordnung muss die ID der Sprache / des Plugins sein, nicht der Name. Zum Beispiel das VBScript-Plugin, das ich installiert habe, die ID ist vbs. "* .vms": "vbs" ruft die benutzerdefinierte Erweiterung ab, um sie ordnungsgemäß zuzuordnen.

— Matt Merrill

Ich stand gerade vor einem ähnlichen Problem. Wenn das Hinzufügen einer Dateizuordnung nicht funktioniert, stellen Sie sicher, dass keine .editorconfigDatei geschlossen ist, oder richten Sie die Konfigurationen zwischen VSCode und aus .editorconfig. Letzteres hat Vorrang

— RecuencoJones

Sie können diese Einstellungen auch in eine projektspezifische ${projectdir}/.vscode/settings.jsonDatei einfügen.

— Jason

108

Halten Sie Strg + Umschalt + P (oder cmd auf dem Mac) gedrückt, wählen Sie "Sprachmodus ändern" und schon ist es da.

Aber ich kann immer noch keine Möglichkeit finden, VS Code-erkannte Dateien mit einer bestimmten Erweiterung als bestimmte Sprache zu erstellen.

— John Deev
quelle

3

Es scheint, dass es eine Verknüpfung direkt zu gibt Change Language Mode; Alt+K, M

— Stafford Williams

Cmd+K, Mfür Mac.

— GreeKatrina

Das ist sehr gut möglich. Siehe meine Antwort unten: stackoverflow.com/a/51228725/3307796

— JoelAZ

69

Der einfachste Weg, den ich für eine globale Zuordnung gefunden habe, besteht darin, einfach Strg + km (oder Strg + Umschalt + P und "Sprachmodus ändern") mit einer Datei des Typs einzugeben, den Sie zuordnen.

In der ersten Auswahl wird "Dateizuordnung für 'x' konfigurieren" (welcher Dateityp auch immer - siehe Bild im Anhang) angezeigt. Wenn Sie diese Option auswählen, wird die Dateitypzuordnung dauerhaft

Dies mag sich seit der ursprünglichen Frage und der akzeptierten Antwort geändert haben (wahrscheinlich) (und ich weiß nicht, wann es sich geändert hat), aber es ist so viel einfacher als die manuellen Bearbeitungsschritte in den akzeptierten und einigen anderen Antworten und vermeidet dies vollständig mit IDs müssen, die möglicherweise nicht offensichtlich sind.

— JoelAZ
quelle

2

Danke - das hat bei mir funktioniert. Beim manuellen Bearbeiten der settings.jsonDatei war nicht klar, wie die Erweiterungs-ID hätte lauten sollen, aber diese Methode hat sie sortiert!

— ccbunney

1

Gern geschehen @ccbunney, ich bin froh, dass es hilft. Das war genau das gleiche Problem, das ich hatte - und ich habe nie herausgefunden, welche Erweiterungs-ID ich brauchte, lol. Wie auch immer, ich war wirklich froh, diese Lösung für mich zu finden und es ist cool, dass sie anderen Menschen hilft! : D

— JoelAZ

32

z.B:

// .vscode/settings.json in workspace

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

— B.Ma.
quelle

1

Nett. Dies ist praktisch, wenn Sie dieselbe Erweiterung haben, aber je nach Pfad unterschiedliche Sprachparser. Sie können beispielsweise yml verwenden, um Concourse-Pipelines in einem Ordner und Ansible-Dateien in einem anderen Ordner zu verarbeiten.

— Christian Maslen

Ich würde das zweimal positiv bewerten, wenn ich könnte. Der Versuch, die Syntax für meine Nanoc-Layouts und -Partials mit einer .html-Erweiterung beizubehalten, löste "**/layouts/**/*.html": "erb"das Problem : - Beachten Sie, dass in der Dropdown-Liste "Sprachmodus" von VSCode der tatsächliche Name des Syntax-Textmarkers in Klammern angezeigt wird, z. B.Ruby ERB (erb)

— Dave Everitt,

18

Das funktioniert bei mir.

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

— Isura Amarasinghe
quelle

12

Dies führt beispielsweise dazu, dass Dateien enden .variablesund .overrideswie jede andere WENIGER-Datei behandelt werden. In Bezug auf die Code-Färbung, in Bezug auf die (automatische) Formatierung. Definieren Sie in Benutzereinstellungen oder Projekteinstellungen, wie Sie möchten.

(Die semantische Benutzeroberfläche verwendet diese seltsamen Erweiterungen, falls Sie sich fragen)

— Frank Nocke
quelle

12

Ich habe hier eine Lösung gefunden: https://code.visualstudio.com/docs/customization/colorizer

Gehe zu VS_CODE_FOLDER/resources/app/extensions/und dort aktualisierepackage.json

— tonda13
quelle

8

Das Befolgen der Schritte unter https://code.visualstudio.com/docs/customization/colorizer#_common-questions hat bei mir gut funktioniert:

Um einen vorhandenen Colorizer zu erweitern, erstellen Sie eine einfache package.json in einem neuen Ordner unter .vscode / extensions und geben das Attribut extensionDependencies an, das die Anpassung angibt, zu der Sie hinzufügen möchten. Im folgenden Beispiel wird dem Markdown-Colorizer eine Erweiterung .mmd hinzugefügt. Beachten Sie, dass nicht nur der Name extensionDependency mit der Anpassung übereinstimmen muss, sondern auch die Sprach-ID mit der Sprach-ID des Colorizers, den Sie erweitern.

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

— MicMro
quelle

5

Ich habe einen anderen Ansatz gewählt, um fast das gleiche Problem zu lösen. In meinem Fall habe ich eine neue Erweiterung erstellt, die die Unterstützung für die Hervorhebung der PHP-Syntax für Drupal-spezifische Dateien (wie .module und .inc) hinzufügt: https: // github. com / mastazi / VS-Code-Drupal

Wie Sie im Code sehen können, habe ich eine neue Erweiterung erstellt, anstatt die vorhandene PHP-Erweiterung zu ändern. Offensichtlich erkläre ich eine Abhängigkeit von der PHP-Erweiterung in der Drupal-Erweiterung.

Der Vorteil dieser Vorgehensweise besteht darin, dass bei einem Update der PHP-Erweiterung meine benutzerdefinierte Unterstützung für Drupal beim Update nicht verloren geht.

— Mastazi
quelle