web-dev-qa-db-fra.com

Modification / Ajout de la coloration syntaxique pour une langue de Sublime 2/3

Je veux changer/ajouter la coloration syntaxique pour une langue dans Sublime 2/3.

Par exemple, je veux que le mot clé this soit coloré en JavaScript.

Comment puis je faire ça?

Je sais qu'il existe un fichier JavaScript de préférence dans C:\Program Files\Sublime Text 3\Packages, mais je ne sais pas quoi changer ni si je dois créer un nouveau fichier de préférences JavaScript quelque part dans ce dossier %APPDATA%\Sublime Text 3.

91
Niklas

La mise en évidence de la syntaxe est contrôlée par le thème que vous utilisez, accessible via Preferences -> Color Scheme. Les thèmes mettent en évidence différents mots-clés, fonctions, variables, etc. via l'utilisation d'étendues, définies par une série d'expressions régulières contenues dans un fichier .tmLanguage situé dans le répertoire/package d'une langue. Par exemple, le fichier JavaScript.tmLanguage attribue les étendues source.js et variable.language.js au mot clé this. Comme Sublime Text 3 utilise le format de fichier Zip .sublime-package pour stocker tous les paramètres par défaut, il n’est pas très simple de modifier les fichiers individuels.

Malheureusement, tous les thèmes ne contiennent pas tous les champs, vous devez donc en jouer plusieurs pour en trouver un qui soit beau et qui vous donne la mise en valeur que vous recherchez. Sublime Text contient un certain nombre de thèmes, et beaucoup d’autres sont disponibles via Package Control , que je fortement recommande d'installer si vous ne l'avez pas déjà fait. Assurez-vous de suivre les instructions ST3 .

Il se trouve que j’ai développé le Neon Color Scheme , disponible via Package Control, que vous voudrez peut-être consulter. Mon objectif principal, en plus d’essayer de donner à un large éventail de langues l’apparence la meilleure possible, était d’identifier autant de portées différentes que possible, beaucoup plus nombreuses que celles incluses dans les thèmes standard. Bien que la définition du langage JavaScript ne soit pas aussi complète que celle de Python, par exemple, Neon a toujours beaucoup plus de diversité que certains des paramètres par défaut tels que Monokai ou Solarized.

jQuery highlighted with Neon Theme

Je dois noter que j'ai utilisé la définition du langage de @ int3h Better JavaScript pour cette image plutôt que celle fournie avec Sublime. Il peut être installé via Package Control.

UPDATE

Récemment, j'ai découvert une autre définition de langage de remplacement JavaScript - JavaScriptNext - ES6 Syntax . Il a plus de domaines que le JavaScript de base ou même un meilleur JavaScript. Cela ressemble à ceci sur le même code:

JavaScriptNext

De plus, depuis que j'ai écrit cette réponse, @skuroda a publié PackageResourceViewer via Package Control. Il vous permet de visualiser, de modifier et/ou d’extraire de manière transparente des parties ou des paquets .sublime-package entiers. Ainsi, si vous le souhaitez, vous pouvez modifier directement les jeux de couleurs inclus dans Sublime.

UNE AUTRE MISE À JOUR

Avec la sortie de presque tous les packages par défaut sur Github , les modifications ont été rapides et rapides. L'ancienne syntaxe JS a été complètement réécrite pour inclure les meilleures parties de JavaScript. Syntaxe ES6 suivante. Elle est désormais aussi entièrement compatible avec ES6. Une tonne d'autres modifications ont été apportées pour couvrir les cas d'angle et Edge, améliorer la cohérence et, globalement, l'améliorer. La nouvelle syntaxe a été incluse dans la dernière (à ce moment-là) dev build 3111.

Si vous souhaitez utiliser l'une des nouvelles syntaxes avec l'actuel beta build 3103, il vous suffit de cloner le dépôt Github et de lier le JavaScript (ou le ou les langages de votre choix). ) dans votre répertoire Packages - trouvez-le sur votre système en sélectionnant Preferences -> Browse Packages.... Ensuite, il vous suffit de faire de temps en temps un git pull dans le répertoire de dépôt initial pour actualiser les modifications et vous permettre de profiter pleinement des dernières nouveautés. Je devrais noter que le référentiel utilise le nouveau format .sublime-syntax au lieu de l'ancien .tmLanguage, de sorte qu'ils ne fonctionneront pas avec les versions ST3 antérieures à 3084, ou avec ST2 (dans les deux cas, vous devriez avoir mis à jour la dernière version bêta ou dev de toute façon).

Je suis en train de peaufiner mon schéma de couleurs Neon pour gérer toutes les nouvelles étendues de la nouvelle syntaxe JS, mais la plupart devraient déjà être couvertes.

93
MattDMo

J'ai enfin trouvé un moyen de personnaliser les thèmes donnés.

Allez à C:\Program Files\Sublime Text 3\Packages et copiez + renommez Color Scheme - Default.sublime-package en Color Scheme - Default.Zip. Ensuite, décompressez-le et copiez le thème, vous souhaitez passer à %APPDATA%\Sublime Text 3\Packages\User. (Dans mon cas, All Hallow's Eve.tmTheme).

Ensuite, vous pouvez l'ouvrir avec n'importe quel éditeur de texte et changer/ajouter quelque chose, par exemple pour changer this en JavaScript:

<dict>
    <key>name</key>
    <string>Lang Variable</string>
    <key>scope</key>
    <string>variable.language</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

Ceci marquera this dans les fichiers JavaScript en rouge. Vous pouvez sélectionner votre thème sous Preferences -> Color Scheme -> User -> <Your Name>.

30
Niklas

Utilisez le plug-in PackageResourceViewer installé via Package Control (comme indiqué par MattDMo ). Cela vous permet de remplacer les ressources compressées en les ouvrant simplement dans Sublime Text et en enregistrant le fichier. Il enregistre automatiquement uniquement les ressources modifiées dans% APPDATA%/Roaming/Sublime Text 3/Packages/ou ~/.config/sublime-text-3/Packages /.

Une fois le plugin installé, exécutez la commande PackageResourceViewer: Open Resource une fois que vous en avez fait l'expérience. Puis sélectionnez JavaScript suivi de JavaScript.tmLanguage. Cela ouvrira un fichier XML dans l'éditeur. Vous pouvez modifier n'importe quelle définition de langue et enregistrer le fichier. Ceci écrira une copie de substitution du fichier JavaScript.tmLanguage dans le répertoire utilisateur.

La même méthode peut être utilisée pour éditer la définition de langue de toute langue du système.

14
chawkinsuf

Le "this" est déjà coloré en Javascript.

Affichage-> Syntaxe-> et choisissez votre langue à mettre en surbrillance.

5
Epirocks