L’éditeur de texte sublime est un nom assez familier parmi la communauté des développeurs (novices et professionnels). Il a été développé avec un support multiplateforme pour l’édition du code source et du texte.

Bien que la version actuelle (Sublime text 3) soit en phase bêta, elle est plus rapide que la version 2 et est livrée avec de nombreuses fonctionnalités. Il prend en charge de manière native un large éventail de langages de programmation et de balisage, et les plug- ins d’éditeur de texte sublime gratuits créés par la communauté ont porté ses fonctionnalités à un niveau supérieur.

De nombreux développeurs s’en tiennent à cet éditeur en raison du vaste référentiel de plugins. Dans cet article, nous nous concentrerons sur certains des plugins les plus utiles aux développeurs JavaScript.

peluchage

Les outils de linting aident les développeurs à détecter les erreurs, les divergences syntaxiques et les problèmes potentiels. Il peut également être utilisé pour s’assurer que le projet correspond à une certaine directive de codage.

SublimeLinter-eslint

Il prend en charge la version Sublime Text 3 et fournit une interface à ESLint pour fonctionner avec des fichiers ayant une syntaxe "JavaScript". SublimeLinter 3, Node.js, npm et eslint sont les conditions préalables à l’installation de ce plugin. Il englobe une pléthore de règles avec des options pour également personnaliser L’option exacte vous sera donnée d’écrire dans le fichier de configuration afin de désactiver tous les avertissements et erreurs. Une chose importante à noter ici est que ce plugin est le seul à prendre en charge JSX et le support pour ES6 est bien plus supérieur par rapport aux autres plugins.

Utilisation: Selon la configuration de SublimeLinter, le code sera pelucheux lors de l’édition ou de l’enregistrement. Ceci peut être configuré en utilisant la Choose Lint Modecommande.

Sublime-JSHint

Le plug-in JSHint Gutter est compatible avec Sublime Text 2 et 3. Permet aux développeurs de vérifier le code JavaScript pour détecter les erreurs épouvantables et les conventions de codage. Ce plugin peut également être configuré pour afficher un indice dans la gouttière et fonctionner sans problème avec les fichiers .jshintrc spécifiques au projet. Il s’appuie sur JSHint, un fork de JSLint. Comme le linter est écrit en JavaScript, Node.js est nécessaire pour interpréter le code JavaScript en dehors du navigateur.

Utilisation: Ctrl+alt+Jpour Windows ou Cmd+Option+Jsi vous êtes sur Mac. Vous pouvez également faire un clic droit, sélectionner JSHint et cliquer sur Lint Code. Une autre façon consiste à ouvrir un fichier JavaScript, à ouvrir la console dans Sublime Text depuis View, puis à Show Console, et à taper view.run_command("jshint"). Il est recommandé de configurer votre propre combo de touches pour cela en allant dans Préférences -> Liaisons de touches – Utilisateur, et en ajoutant une commande comme { "keys": ["ctrl+shift+j"], "command": "jshint" }dans ce tableau.

Mise en page

Les outils de formatage sont utilisés pour embellir les blocs de code et les formater pour les rendre plus lisibles.

Sublime-jsfmt

Ce plugin prend en charge les deux versions de Sublime Text et formate automatiquement le code JavaScript selon un style particulier. Le développeur n’a pas besoin de lire les avertissements et de résoudre manuellement le problème de formatage. In peut être installé via le gestionnaire de packages en sélectionnant jsfmtdans le menu déroulant.

Utilisation: le fichier .jsfmtrc spécifique au projet peut être placé dans le répertoire racine du projet pour les configurations. Il est accessible par le chemin suivant: Preferences -> Package Settings -> Sublime JSFMT. En dehors de cela, il existe une disposition pour configurer un raccourci clavier en allant dans Préférences -> Liaisons de touches – Utilisateur et en ajoutant { "keys": ["ctrl+q"], "command": "format_javascript" }dans le tableau.

FormatJs

Il prend en charge les deux versions de Sublime Text. Ce plugin de formatage JavaScript utilise le formateur de ligne de commande de jsbeautifier en arrière-plan pour formater tout le fichier js, json ou seulement la partie sélectionnée d’un fichier. La configuration spécifique au projet peut également être effectuée par les paramètres du fichier .jsbeautifyrc. En dehors de cela, les styles d’espace blanc et de formatage sont également personnalisables.

Utilisation: La liaison de clé par défaut est ctrl+alt+fpour Windows et cmd+option+fsur Mac. Le plug-in utilise des paramètres de tabulation/retrait configurés avec les paramètres standard translate_tabs_to_spaceset tab_sizesublimes.

Analyse de code

Ce sont les moteurs d’inférence de code utilisés pour accélérer le processus de développement en fournissant l’auto-complétion du code, des conseils d’argument de fonction, etc.

Sterne pour Sublime

Ce plugin d’analyse de code pour JavaScript a été développé pour s’intégrer aux éditeurs de code pour une édition JavaScript intelligente. Il est livré avec quelques fonctionnalités astucieuses comme:

Auto-complétion sur les variables et les propriétés
Conseils sur les arguments de fonction
Interroger le type d’une expression
Refactorisation automatique

Vous devez vous assurer que Node.js et npm sont installés avant de procéder à l’installation de ce plugin.

Utilisation: utilisez simplement alt+.pour sauter à la définition de la chose sur laquelle le curseur pointe et alt+,pour revenir à l’endroit où vous étiez lors de l’exécution de la alt+.commande précédente. Enfin, alt+spacepour sélectionner toutes les références à une variable particulière dans le fichier en cours.

Mise en évidence de la syntaxe

Dans cette section, nous allons passer en revue un plugin de surligneur de syntaxe.

JavaScriptSuivant

Ce plugin est un superbe surligneur de syntaxe JavaScript. Outre l’amélioration de la mise en évidence de la syntaxe pour ES5, il prend également en charge la nouvelle syntaxe ES6 telle que les modules, les méthodes succinctes, les fonctions fléchées, les classes et les générateurs. Il peut être installé via le Package Controlen sélectionnant JavaScript Nextdans le menu déroulant.

Utilisation: Afin d’utiliser ce plugin pour un fichier JavaScript individuel, vous pouvez modifier le paramètre dans le view -> syntax -> JavaScriptNext. Pour le définir comme syntaxe JavaScript par défaut, ouvrez un fichier javascript, puis sélectionnez View -> Syntax -> Open all with current extension as... -> JavascriptNext. Le ColorScheme peut également être modifié en en sélectionnant un dans Preferences -> Color Scheme -> JavaScriptNext.

Documentation

Nous allons maintenant découvrir un plugin qui facilite l’écriture de commentaires de code et de documentations.

sublime-jsdocs

Le plug-in DocBlockr prend en charge les textes Sublime 2 et 3 pour JavaScript, y compris les spécifications ES6. Il peut être installé via en sélectionnant simplement DocBlockr dans le fichier package control. Ce plugin est hautement configurable et vous permet de compléter automatiquement les commentaires, d’étendre les commentaires, de décorer les commentaires, d’ajouter de la documentation relative aux variables et aux fonctions.

Utilisation: Écrivez et /**appuyez sur Entrée ou Tabulation pour créer une nouvelle ligne et fermer le commentaire. Lors de la rédaction de la documentation de la fonction, vous verrez qu’elle essaie de deviner intelligemment la valeur de retour et, dans le cas d’une variable, elle essaie de déterminer le type de variable à partir de son nom.

Plugins pour les bibliothèques JavaScript

Vous pouvez installer des plugins pour certaines des bibliothèques JavaScript populaires telles que AngularJS et jQuery. De plus, certains plugins vous aident à accélérer le processus de développement en fournissant des extraits de code. Par exemple, le plug-in d’ extrait de code JQuery peut être installé pour le développement jQuery.

Conclusion

Dans cet article, nous avons couvert certains des plugins utiles pour les développeurs JavaScript. N’hésitez pas à partager tout autre plugin pratique dans la section des commentaires et à aider la communauté des développeurs.