Comment faire VS Code pour traiter les autres extensions de fichiers comme certaines langues?

333

Ou existe-t-il un moyen de changer la langue du fichier actuel pour utiliser la fonction de mise en évidence de la syntaxe?

Par exemple, *.jsxutilise réellement JavaScript mais VS Code ne le reconnaît pas.

visual-studio-code vscode-settings

— John Deev
source

501

Dans Visual Studio Code , vous pouvez ajouter des associations de fichiers persistantes pour la mise en évidence de la langue à votre settings.jsonfichier comme ceci:

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

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

Vous pouvez utiliser Ctrl+ Shift+ ppuis taper settings JSON. Choisissez Préférences: Ouvrir les paramètres (JSON) pour ouvrir votre settings.json.

La Files: Associationsfonctionnalité a été introduite pour la première fois dans Visual Studio Code version 1.0 (mars 2016). Vérifiez les modèles de caractères génériques disponibles dans les notes de publication et les chaînes de langue connues dans la documentation.

— Josien
source

6

La valeur de l'association doit être l'ID de la langue / du plugin, pas le nom. Par exemple, le plugin VBScript que j'ai installé, l'ID est vbs. "* .vms": "vbs" obtient l'extension personnalisée à associer correctement.

— Matt Merrill

Je viens de faire face à un problème similaire. Si l'ajout d'une association de fichiers ne semble pas fonctionner, assurez-vous de ne pas .editorconfigfermer un fichier ou d'aligner les configurations entre VSCode et .editorconfig, ce dernier aura priorité

— RecuencoJones

Vous pouvez également placer ces paramètres dans un ${projectdir}/.vscode/settings.jsonfichier spécifique au projet .

— Jason

108

Maintenez la touche Ctrl + Maj + P (ou cmd sur Mac), sélectionnez "Changer le mode de langue" et le voilà.

Mais je ne trouve toujours pas de moyen de rendre les fichiers reconnus par VS Code avec une extension spécifique comme une certaine langue.

— John Deev
source

3

Il semble qu'il y ait un raccourci directement vers Change Language Mode; Alt+K, M

— Stafford Williams

Cmd+K, Mpour Mac.

— GreeKatrina

C'est très possible. Voir ma réponse ci-dessous: stackoverflow.com/a/51228725/3307796

— JoelAZ

69

La manière la plus simple que j'ai trouvée pour une association globale est simplement de ctrl + km (ou ctrl + shift + p et de taper "change language mode") avec un fichier du type que vous associez ouvert.

Dans les premières sélections, il y aura "Configurer l'association de fichiers pour 'x'" (quel que soit le type de fichier - voir l'image ci-jointe). Cette sélection rend l'association de type de fichier permanente

Cela a peut-être changé (probablement) depuis la question d'origine et la réponse acceptée (et je ne sais pas quand cela a changé), mais c'est tellement plus facile que les étapes d'édition manuelle dans les réponses acceptées et certaines des autres réponses, et évite totalement d'avoir pour confondre avec des identifiants qui ne sont pas toujours évidents.

— JoelAZ
source

2

Merci - cela a fonctionné pour moi. Lors de la modification manuelle du settings.jsonfichier, il n'était pas clair quel aurait dû être l'ID d'extension, mais cette méthode l'a trié!

— ccbunney

1

Vous êtes les bienvenus @ccbunney, heureux que cela aide. C'était exactement le même problème que moi - et je n'ai jamais trouvé l'ID d'extension dont j'avais besoin, lol. Quoi qu'il en soit, j'étais vraiment content de trouver cette solution pour moi et c'est cool que ça aide les autres! : D

— JoelAZ

33

par exemple:

// .vscode/settings.json in workspace

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

— B.Ma
source

1

Agréable. Cela est pratique si vous avez la même extension, mais des analyseurs de langue différents en fonction du chemin. Par exemple, vous pouvez avoir du yml pour gérer les pipelines Concourse dans un dossier et les fichiers Ansible dans un autre.

— Christian Maslen

Je voterais deux fois si je le pouvais. J'essaie de conserver la syntaxe de mes mises en page et partiels Nanoc avec une extension .html, cela a résolu le problème: "**/layouts/**/*.html": "erb"- il convient de noter que la liste déroulante "mode de langue" VSCode montre le nom réel du surligneur de syntaxe entre parenthèses, par exempleRuby ERB (erb)

— Dave Everitt

18

Cela fonctionne pour moi.

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

— Isura Amarasinghe
source

12

Cela, par exemple, rendra les fichiers se terminant .variableset .overridestraités comme n'importe quel autre fichier LESS. En termes de coloration du code, en termes de formatage (auto). Définissez dans les paramètres utilisateur ou les paramètres du projet, comme vous le souhaitez.

(L'interface utilisateur sémantique utilise ces extensions étranges, au cas où vous vous poseriez la question)

— Frank Nocke
source

12

J'ai trouvé une solution ici: https://code.visualstudio.com/docs/customization/colorizer

Aller à VS_CODE_FOLDER/resources/app/extensions/et mettre à jourpackage.json

— tonda13
source

8

Suivre les étapes sur https://code.visualstudio.com/docs/customization/colorizer#_common-questions a bien fonctionné pour moi:

Pour étendre un coloriseur existant, vous devez créer un package.json simple dans un nouveau dossier sous .vscode / extensions et fournir l'attribut extensionDependencies en spécifiant la personnalisation à laquelle vous souhaitez ajouter. Dans l'exemple ci-dessous, une extension .mmd est ajoutée au coloriseur de démarque. Notez que non seulement le nom extensionDependency doit correspondre à la personnalisation, mais aussi que l'ID de langue doit correspondre à l'ID de langue du coloriseur que vous étendez.

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

— MicMro
source

5

J'ai suivi une approche différente pour résoudre à peu près le même problème, dans mon cas, j'ai fait une nouvelle extension qui ajoute la prise en charge de la syntaxe PHP pour les fichiers spécifiques à Drupal (tels que .module et .inc): https: // github. com / mastazi / VS-code-drupal

Comme vous pouvez le voir dans le code, j'ai créé une nouvelle extension plutôt que de modifier l'extension PHP existante. Évidemment, je déclare une dépendance à l'extension PHP dans l'extension Drupal.

L'avantage de le faire de cette façon est que s'il y a une mise à jour de l'extension PHP, mon support personnalisé pour Drupal ne se perd pas dans le processus de mise à jour.

— mastazi
source