Personnalisation du comportement de l’éditeur à l’aide de la configuration du langage

Vous pouvez implémenter une syntaxe spécifique au langage personnalisée dans l’éditeur Visual Studio à l’aide de Language Configuration pour activer les opérations de syntaxe spécifiques au langage. Par rapport à l’utilisation d’un serveur de langage, l’utilisation de la configuration du langage peut améliorer les performances, car toutes ses opérations sont locales.

Qu’est-ce que la configuration du langage ?

Visual Studio offre des fonctionnalités d’édition intelligentes pour différents langages de programmation via des extensions de langage. La configuration du langage complète les serveurs qui utilisent le protocole LSP (Language Server Protocol) et fournit des données déclaratives qui permettent à l’éditeur Visual Studio de prendre des décisions de mise en forme, de colorisation et d’achèvement sans délai d’effectuer une requête asynchrone sur le serveur LSP. Les fonctionnalités de langage déclaratif sont définies dans les fichiers de configuration. Par exemple, les extensions HTML, CSS et typescript-basic groupées avec Visual Studio offrent un sous-ensemble des fonctionnalités de langage déclarative suivantes :

• Mise en surbrillance de la syntaxe
• Complétion de l’extrait
• Correspondance de parenthèses
• Fermeture automatique des parenthèses
• Activation/désactivation des commentaires
• Auto-indentation

Visual Studio offre la possibilité pour les extensions de définir une configuration de langage pour n’importe quel langage de programmation. Le fichier de configuration du langage contrôle les fonctionnalités d’édition fondamentales, telles que l'alternance des commentaires, et la correspondance et l'encadrement des crochets.

L’utilisation de la configuration du langage vous aide à :

• Travail synchrone sur la saisie de texte par l'utilisateur
• Simplicité : Les fichiers JSON courts avec des expressions régulières sont plus faciles à gérer qu’un algorithme complexe
• Portabilité : Nécessitant aucune modification ou des modifications minimales entre Visual Studio Code et Visual Studio

En outre, les fichiers de configuration de langage offrent un moyen simple d’étendre Visual Studio pour prendre en charge certaines fonctionnalités de refactorisation de base via un fichier JSON facile à lire.

Ajouter la prise en charge de la configuration du langage à une extension Visual Studio

Il existe trois parties pour ajouter la prise en charge de la configuration du langage à une extension Visual Studio :

1. Créer un projet VSIX
2. Créer un fichier de configuration de langage
3. Ajouter un fichier de grammaire
4. Mettre à jour le fichier pkgdef

Vous pouvez explorer un exemple de travail dans l’exemple de configuration de langage.

Créer un projet VSIX

Pour créer une extension de service de langage à l’aide de Language Configuration, vérifiez d’abord que la charge de travail de développement de l’extension Visual Studio est installée pour votre instance de VS.

Ensuite, créez un projet VSIX en accédant à Fichier>nouveau projet, recherchez « vsix » et recherchez vsIX Project :

Créer un fichier de configuration de langage

Lorsque vous créez votre propre fichier de configuration de langage, vous pouvez choisir les aspects à intégrer dans le fichier JSON. Par exemple, vous pouvez choisir de prendre en charge l'activation/désactivation des commentaires, la fermeture automatique des parenthèses ou toute combinaison des fonctionnalités disponibles qui sont décrites dans cette section.

Pour ajouter la prise en charge à votre extension, vous créez d’abord un fichier de configuration de langage. Le nom du fichier doit suivre une norme : utilisez des traits d’union pour séparer les mots du nom de fichier et assurez-vous qu’il se termine par language-configuration.json.

Le code suivant montre un exemple de fichier de configuration de langage.

{
    "comments": {
      "lineComment": "***",
      "blockComment": ["{*", "*}"]
    },
    "brackets": [
      ["@", "@"],
      ["#", "#"],
      ["$", "$"],
      ["(", ")"]
    ],
    "autoClosingPairs": [
      { "open": "{", "close": "}" },
      { "open": "@", "close": "@" },
      { "open": "#", "close": "#" },
      { "open": "$", "close": "$" },
      { "open": "(", "close": ")" },
      { "open": "'", "close": "'", "notIn": ["string", "comment"] },
      { "open": "\"", "close": "\"", "notIn": ["string"] },
    ],
    "autoCloseBefore": ";:.,=}])>` \n\t",
    "surroundingPairs": [
      ["@", "@"],
      ["#", "#"],
      ["$", "$"],
      ["[", "]"],
      ["(", ")"],
      ["'", "'"],
      ["\"", "\""],
      ["`", "`"]
    ],
    "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)",
    "indentationRules": {
      "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
      "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
    }
  }

Paramètres de configuration

Les sections suivantes décrivent les paramètres disponibles dans le fichier de configuration de langue.

Basculement de commentaire

Les fichiers de configuration de langage offrent deux commandes pour le basculement de commentaires. Activer/désactiver le commentaire de ligne et Activer/désactiver le commentaire de bloc. Vous pouvez spécifier comments.blockComment et comments.lineComment contrôler la façon dont Visual Studio doit commenter les lignes/blocs.

{
  "comments": {
    "lineComment": "//",
    "blockComment": ["/*", "*/"]
  }
}

Ce paramètre affecte le comportement de l’éditeur de texte Visual Studio lorsque vous appuyez sur Ctrl+K, Ctrl+C.

Définition de crochets

Lorsque vous déplacez le curseur vers un crochet défini ici, Visual Studio met en surbrillance ce crochet avec sa paire correspondante.

{
  "brackets": [["{", "}"], ["[", "]"], ["(", ")"]]
}

Fermeture automatique

Lorsque vous tapez ', Visual Studio crée une paire de guillemets uniques et place le curseur au milieu : '|'. Cette section définit ces paires.

{
  "autoClosingPairs": [
    { "open": "{", "close": "}" },
    { "open": "[", "close": "]" },
    { "open": "(", "close": ")" },
    { "open": "'", "close": "'", "notIn": ["string", "comment"] },
    { "open": "\"", "close": "\"", "notIn": ["string"] },
    { "open": "`", "close": "`", "notIn": ["string", "comment"] },
    { "open": "/**", "close": " */", "notIn": ["string"] }
  ]
}

La notIn clé désactive cette fonctionnalité dans certaines plages de code. Par exemple, lorsque vous écrivez le code suivant :

// ES6's Template String
`ES6's Template String`;

Le guillemet simple ne se ferme pas automatiquement.

Les paires qui ne nécessitent pas de notIn propriété peuvent également utiliser une syntaxe plus simple :

{
  "autoClosingPairs": [ ["{", "}"], ["[", "]"] ]
}

Fermeture automatique avant

Par défaut, Visual Studio ferme automatiquement les paires uniquement s'il y a un espace juste après le curseur. Par conséquent, lorsque vous tapez { le code JSX suivant, vous n’obtenez pas de fermeture automatique :

const Component = () =>
  <div className={>
                  ^ Does not get autoclosed by default
  </div>

Toutefois, cette définition remplace ce comportement :

{
  "autoCloseBefore": ";:.,=}])>` \n\t"
}

Maintenant, lorsque vous entrez { juste avant >, Visual Studio l’remplit automatiquement avec }.

Autosurrounding

Lorsque vous sélectionnez une plage dans Visual Studio et entrez un crochet ouvrant, Visual Studio entoure le contenu sélectionné avec une paire de crochets. Cette fonctionnalité est appelée Autosurrounding, et ici, vous pouvez définir les paires d’autosurrounding pour une langue spécifique.

{
  "surroundingPairs": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"],
    ["'", "'"],
    ["\"", "\""],
    ["`", "`"]
  ]
}

Modèle Word

wordPattern définit ce qui est considéré comme un mot dans le langage de programmation. Les fonctionnalités de suggestion de code utilisent ce paramètre pour déterminer les limites des mots si wordPattern est défini.

{
  "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)"
}

Règles d'indentation

indentationRulesdéfinit la façon dont l’éditeur doit ajuster la mise en retrait de la ligne active ou de la ligne suivante lorsque vous tapez, collez et déplacez des lignes, ou lorsque vous mettez en forme du texte avec Ctrl+, Ctrl+D (Format du document) et Ctrl+K, Ctrl+F (Sélection de format).

{
  "indentationRules": {
    "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
    "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
  }
}

Par exemple, if (true) { correspond increaseIndentPattern, puis si vous appuyez sur Entrée après le crochet {ouvert, l’éditeur se met automatiquement en retrait une fois, et votre code se termine comme suit :

if (true) {
  console.log();

En plus de increaseIndentPattern et decreaseIndentPatter, il existe deux autres règles de mise en retrait :

• indentNextLinePattern - Si une ligne correspond à ce modèle, seule la ligne suivante après elle devrait être indentée une fois.
• unIndentedLinePattern - Si une ligne correspond à ce modèle, sa mise en retrait ne doit pas être modifiée et elle ne doit pas être évaluée par rapport aux autres règles.

Si aucune règle de mise en retrait n'est définie pour le langage de programmation, l'éditeur effectue un retrait lorsqu'une ligne se termine par une parenthèse ouvrante et réduit le retrait lorsque vous tapez une parenthèse fermante. Le crochet ici est défini par brackets.

Appuyez sur Entrée

onEnterRules définit une liste de règles à évaluer quand Entrée est enfoncée dans l’éditeur.

{
  "onEnterRules": [{
    "beforeText": "^\\s*(?:def|class|for|if|elif|else|while|try|with|finally|except|async).*?:\\s*$",
    "action": { "indent": "indent" }
  }]
}

Lorsque vous appuyez sur Entrée, le texte avant, après ou une ligne au-dessus du curseur est coché par rapport aux propriétés suivantes :

• beforeText (obligatoire). Expression régulière qui correspond au texte avant le curseur (limité à la ligne actuelle).
• afterText. Expression régulière qui correspond au texte après le curseur (limité à la ligne actuelle).
• previousLineText. Expression régulière qui correspond au texte d’une ligne au-dessus du curseur.

Si toutes les propriétés spécifiées correspondent, la règle est considérée comme correspondante et aucun autre onEnterRules n’est évalué. onEnterRule peut spécifier les actions suivantes :

• indent (obligatoire). Un des none, indent, outdent, indentOutdent.
  • none signifie que la nouvelle ligne hérite de la mise en retrait de la ligne en cours.
  • indent signifie que la nouvelle ligne est mise en retrait par rapport à la ligne actuelle.
  • outdent signifie que la nouvelle ligne est unindentée par rapport à la ligne actuelle.
  • indentOutdent signifie que deux nouvelles lignes sont insérées, une mise en retrait et la deuxième, unindentée.
• appendText. Chaîne ajoutée après la nouvelle ligne et après l'indentation.
• removeText. Nombre de caractères à supprimer de l'indentation de la nouvelle ligne.

Paramètres de propriété

Dans le projet d’extension, vérifiez que votre language-configuration.json fichier a les paramètres de propriété suivants :

Build Action = Content
Include in VSIX = True
Copy to output = Copy always 

(Facultatif) Ajouter un fichier de grammaire

En outre, vous pouvez ajouter un fichier de grammaire TextMate pour fournir une coloration de syntaxe pour la langue. Les grammaires TextMate sont une collection structurée d’expressions régulières et sont écrites en tant que fichiers Plist (XML) ou JSON. Consultez grammaires linguistiques. Si vous ne fournissez pas de fichier de grammaire spécifique au langage, un paramètre par défaut intégré est utilisé.

Pour ajouter des fichiers de grammaire ou de thème TextMate personnalisés, procédez comme suit :

1. Créez un dossier nommé « Grammaires » à l’intérieur de votre extension (ou il peut s’agir du nom que vous choisissez).

2. Dans le dossier Grammars, incluez tous les fichiers correspondant à *.tmlanguage, *.plist, *.tmthemeou à un format de votre choix *.json qui fournissent une colorisation personnalisée.

   Conseil / Astuce

   Un fichier .tmtheme définit la façon dont les étendues sont mappées aux classifications Visual Studio (clés de couleur nommées). Pour obtenir des conseils, vous pouvez consulter le fichier global .tmtheme dans le répertoire %ProgramFiles(x86)%\Microsoft Visual Studio\<version>\<SKU>\Common7\IDE\CommonExtensions\Microsoft\TextMate\Starterkit\Themesg.

Créer un fichier pkgdef

Ensuite, créez un .pkgdef fichier. Un .pkgdef fichier contient toutes les informations d’inscription qui seraient autrement ajoutées au registre système. Pour plus d’informations sur pkgdef les fichiers, consultez Inscription de VSPackages et Qu’est-ce qu’un fichier pkgdef ? Et pourquoi ? Dans votre fichier pkgdef, vous devez avoir le chemin d’accès au fichier language-configuration.json et le chemin de la grammaire du langage. Les services linguistiques tels que LSP demandent le type de contenu de l’éditeur et obtiennent cela via Language Configuration. Ces informations fournissent l’intelligence propre au langage à l’intérieur d’un serveur qui peut communiquer avec les outils de développement. Lorsqu’un service de langue n’existe pas, le moteur de configuration du langage revient à la grammaire TextMate. Votre fichier .pkgdef doit se présenter ainsi :

[$RootKey$\TextMate\Repositories]
"AspNetCoreRazor="$PackageFolder$\Grammars

// Defines where the language configuration file for a given
// grammar name is (value of the ScopeName tag in the tmlanguage file).
[$RootKey$\TextMate\LanguageConfiguration\GrammarMapping]
"text.aspnetcorerazor"="$PackageFolder$\language-configuration.json"

// Defines where the language configuration file for a given
// language name is (partial value of the content type name).
[$RootKey$\TextMate\LanguageConfiguration\ContentTypeMapping]
"RazorLSP"="$PackageFolder$\language-configuration.json"

[$RootKey$\TextMate\LanguageConfiguration\GrammarMapping]
"text.html.basic"="$PackageFolder$\html-language-configuration.json"
"source.js"="$PackageFolder$\javascript-language-configuration.json"
"source.css"="$PackageFolder$\css-language-configuration.json"
"source.cs"="$PackageFolder$\csharp-language-configuration.json

Vérifiez que les propriétés du pkgdef fichier sont définies comme suit :

Build Action = Content
Include in VSIX = True
Copy to output = Copy always 

Pour rendre les informations de configuration du langage accessibles pour Visual Studio, incluez le language-configuration fichier dans le package VSIX. L’inclusion de ce fichier signifie qu’il est fourni avec l’extension Visual Studio. Le fichier indique à Visual Studio qu’une configuration de langage est disponible pour une utilisation. Pour ajouter le fichier, modifiez-le vsixmanifest pour ajouter votre fichier def PKGDEF, par exemple :

<Asset Type="Microsoft.VisualStudio.VsPackage" Path="Test.pkgdef"/> 

Contenu connexe

• Protocole du serveur de langage

• Exemple de configuration de langage