web-dev-qa-db-fra.com

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

Ou existe-t-il un moyen de changer la langue du fichier actuel pour utiliser la fonctionnalité de surbrillance de la syntaxe?

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

255
John Deev

Dans Code Visual Studio , vous pouvez ajouter des associations de fichiers persistants pour la mise en surbrillance du langage à votre fichier settings.json, comme suit:

// 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+p puis tapez settings JSON. Choisissez Préférences: Ouvrez les paramètres (JSON) pour ouvrir votre settings.json.

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

392
Josien

Maintenez les touches Ctrl + Shift + P enfoncées (ou cmd sur Mac), sélectionnez "Changer le mode de langue" et voilà.

Mais je ne trouve toujours pas le moyen de créer des fichiers reconnus par VS Code avec une extension spécifique.

88
John Deev

Le moyen le plus simple que j'ai trouvé pour une association globale consiste tout simplement à ouvrir ctrl + k m (ou ctrl + shift + p et type "change language mode") avec un fichier du type que vous associez.

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

enter image description here

Cela a peut-être (probablement?) Changé depuis la question/réponse originale et je ne sais pas quand) mais c’est plus facile que les étapes de modification manuelle données précédemment et évite de devoir utiliser des identifiants qui ne sont peut-être pas évidents.

39
JoelAZ

par exemple:

// .vscode/settings.json in workspace

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

Cela fonctionne pour moi.

enter image description here

{
"files.associations": {"*.bitesize": "yaml"}
 }
13
Isura Amarasinghe

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

Allez à VS_CODE_FOLDER/resources/app/extensions/ et mettez-y à jour package.json

11
tonda13

Ainsi, par exemple, les fichiers se terminant par .variables et .overrides seront traités comme tout autre fichier LESS. En termes de coloration du code, en termes de formatage (automatique). Définissez 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 le demanderiez)

11
Frank Nocke

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

Pour étendre un coloriseur existant, créez un package.json simple dans un nouveau dossier sous .vscode/extensions et fournissez l'attribut extensionDependencies spécifiant la personnalisation à 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 également 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"]
        }]
    }
}
7
MicMro

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

Comme vous pouvez le constater 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 procéder ainsi est que, s'il y a une mise à jour de l'extension PHP, mon support personnalisé pour Drupal ne sera pas perdu lors du processus de mise à jour.

4
mastazi