web-dev-qa-db-fra.com

Créer un langage personnalisé dans Visual Studio Code

Existe-t-il un moyen d'étendre les langues/grammaires prises en charge dans Visual Studio Code? Je voudrais ajouter une syntaxe de langue personnalisée, mais je n'ai pas pu trouver d'informations sur la façon dont les services linguistiques sont fournis.

Quelqu'un peut-il indiquer des références ou même des exemples d'implémentations de langage existantes?

visual-studio-codevscode-extensionstmlanguage
28
Rick Strahl

C'est possible avec la nouvelle version 0.9.0. Il existe une documentation officielle sur la façon d'ajouter une langue personnalisée: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

Tu as besoin d'un .tmLanguage fichier pour la langue que vous souhaitez ajouter. Vous pouvez trouver des fichiers existants, par exemple sur GitHub ou vous pouvez définir votre propre fichier de langue. Regardez ici pour avoir une idée de la façon d'en créer un: http://manual.macromates.com/en/language_grammars

Après avoir trouvé un .tmLanguage fichier, vous avez deux façons de créer une extension à partir de celle-ci.

Option 1: utilisation d'un générateur Yeoman

  • Installez node.js (si vous ne l'avez pas déjà fait)
  • Installez yo (si vous ne l'avez pas déjà fait) en exécutant npm install -g yo
  • Installez le générateur Yo pour le code: npm install -g generator-code
  • Courir yo code et sélectionnez New language support
  • Suivez les instructions (définissez le .tmLangauge fichier, définir le nom du plugin, les extensions de fichier, etc.)
  • Le générateur crée un répertoire pour votre extension avec le nom du plugin dans votre répertoire de travail actuel.

Option 2: Créez le répertoire par vous-même

  • Créez un répertoire avec le nom de votre plugin (uniquement des lettres minuscules). Disons que nous l'appelons mylang.
  • Ajoutez un sous-dossier syntaxes et placez le .tmlanguage fichier à l'intérieur

  • Créez un fichier package.json à l'intérieur de la racine du dossier d'extension avec un contenu comme celui-ci

    {
    "name": "mylang",
    "version": "0.0.1",
    "engines": {
        "vscode": ">=0.9.0-pre.1"
    },
    "publisher": "me",
    "contributes": {
        "languages": [{
            "id": "mylang",
            "aliases": ["MyLang", "mylang"],
            "extensions": [".mylang",".myl"]
        }],
        "grammars": [{
            "language": "mylang",
            "scopeName": "source.mylang",
            "path": "./syntaxes/mylang.tmLanguage"
        }]
    }
}

Enfin, ajoutez votre extension au code Visual Studio

Copiez le dossier d'extension dans le répertoire d'extension. C'est:

  • sur Windows %USERPROFILE%\.vscode\extensions

  • sur Mac/Linux $HOME/.vscode/extensions

Redémarrez le code. Maintenant, votre extension s'exécutera automatiquement chaque fois que vous ouvrirez un fichier avec l'extension de fichier spécifiée. Vous pouvez voir le nom du plugin utilisé dans le coin inférieur droit. Vous pouvez le modifier en cliquant sur le nom de l'extension. Si votre extension n'est pas la seule enregistrée pour une extension de fichier spécifique, alors Code peut choisir la mauvaise.

53
Wosi

En utilisant l'ingénierie inverse, vous pouvez ajouter une nouvelle langue à VSCode. Vous pouvez voir comment TypeScript est implémenté en tant que plug-in JavaScript et comment il communique avec node.exe via un canal. Mais c'est une chose difficile car cela vient sans documentation, je vais fournir une documentation très courte ici:

Vous pouvez définir un nouveau plugin dans le dossier plugins C:\Users\USER\AppData\Local\Code\app-0.3.0\resources\app\plugins.

Copiez le dossier du plug-in TypeScript et renommez les extensions de fichier et les noms de langue mentionnés dans tous les fichiers dans votre nouvelle langue, afin que votre nouveau plug-in soit utilisé lors de l'ouverture d'un fichier .mylang.

Dans typescriptServiceClient.js vous voyez qu'un processus enfant est en cours de fork et que son stdout est couplé à un new WireProtocol.Reader. Liez votre propre mylanguage.exe (vous aurez probablement besoin d'écrire cet exe par vous-même). VSCode demande ce binaire pour obtenir des informations plus spécifiques à la langue.

Dans typescriptMain.js vous trouvez l'enregistrement de fonction pour la langue. Supprimer chaque appel à monaco.Modes.XXXXXXSupport.register sauf monaco.Modes.DeclarationSupport.register.

Ouvrez maintenant un répertoire dans VSCode qui contient des fichiers .mylang et ouvrez l'un d'eux via CTRL+P + FileName. Faites un clic droit sur un identifiant et sélectionnez Go to Definition. VSCode envoie maintenant une demande comme celle-ci via StdIn à votre exe

{"seq":1,"type":"request","command":"definition","arguments":{"file":"d:/Projects/MyProj/Source/MyFile.mylang","line":45,"offset":9}}

VSCode attend une réponse comme celle-ci:

Content-Length: 251
[LINE BREAK]
{ "seq" : 1, "type" : "response", "command" : "definition", "request_seq" : 1, "success" : true, "body" : [{ "file" : "d:/Projects/MyProj/Source/MyOtherFile.mylang", "start" : { "line" : 125, "offset" : 3 }, "end" : { "line" : 145, "offset" : 11} }] }

Si tout fonctionne, VSCode ouvrira MyOtherFile.mylang et placera le curseur sur la ligne 124 dans la colonne 3.

Essayez-le par vous-même ;-)

3
Wosi

Pour étendre Wosi's .tmLanguage réponse , en utilisant un .tmLanguage le fichier est facultatif. En utilisant un .json est une alternative parfaitement valable et, à mon avis, plus lisible.

Pour un exemple, voir VSCode_SQF: sqf.json

À l'intérieur de package.json, il vous suffirait de changer le chemin de ./syntaxes/mylang.tmLanguage à ./syntaxes/mylang.json.

2
Armitxes