10 plugins Sublime Text essentiels pour les développeurs JavaScript –

Dans cet article, je présenterai dix plugins Sublime Text indispensables aux développeurs JavaScript, chacun pouvant améliorer votre flux de travail et vous rendre plus productif.

Sublime Text est une excellente application pour à peu près tout développeur à avoir dans sa boîte à outils. C'est un éditeur de texte avancé, hautement personnalisable et multiplateforme qui se situe entre les IDE complets (19459007] (qui sont notoirement gourmands en ressources) et les éditeurs en ligne de commande tels que Vim ou Emacs (qui ont des courbes d'apprentissage abruptes).

Ces dernières années, Sublime a reçu la compétition de bienvenue de Visual Studio Code et de Atom mais Sublime Text tient toujours sa place. étant indiscutablement plus rapide, étant capable d'ouvrir des fichiers plus volumineux plus rapidement que les autres.

Une des choses qui rendent Sublime si génial est son architecture de plugin extensible. Cela permet aux développeurs d'étendre les fonctionnalités de base de Sublime avec de nouvelles fonctionnalités telles que l'achèvement du code ou l'intégration de la documentation de l'API à distance. Sublime Text n'est pas fourni avec les plugins activés: ils sont généralement installés via un gestionnaire de paquets tiers appelé simplement Package Control . Pour installer le contrôle de paquet dans Sublime Text, veuillez suivre le guide d'installation sur leur site web .

Alors allons-y!

Bien sûr, le premier sur ma liste est le Babel plugin. Ce plugin ajoute la syntaxe appropriée à votre code ES6 / 2015 et React JSX. Après avoir installé le plugin, la première chose à faire est de le définir comme la syntaxe par défaut pour tous vos types de fichiers JavaScript et TypeScript.

Si tu n'as pas encore découvert la joie de Babel, je le suggère fortement. Il vous permet de compiler le code ES6 / ES7 / ESNext, JSX et TypeScript vers ES5 pour une prise en charge complète du navigateur. Il s'intègre bien avec tous les outils de construction populaires et la CLI. Évidemment, il ne supporte pas les navigateurs hérités, mais vous pouvez suivre les conseils sur leur page de mises en garde si vous devez supporter IE10 et les versions ultérieures.

est SublimeLinter, qui offre une incroyable intégration ESLint et JSHint dans Sublime. Un linter examinera votre code et vérifiera qu'il a un style approprié et une syntaxe correcte basée sur un fichier de configuration qui peut être archivé avec votre code source. Peu importe si vous êtes un débutant ou avez programmé la majeure partie de votre vie: en JavaScript, un linter est indispensable. Découvrez le ESLint ou JSHint à propos des pages pour voir ce qu'ils peuvent faire pour vous. En fonction de ce que vous avez choisi pour votre projet, vous aurez également besoin des paquets de support de SublimeLinter-eslint ou SublimeLInter-jshint .

Pour que l'un d'eux fonctionne, vous devez inclure un linter dans vos dépendances de projet ou l'installer globalement:

 npm install --save-dev eslint

Si vous ne savez pas comment utiliser npm, consultez notre tutoriel sur pour commencer avec Node Package Manager .

Si vous l'avez installé et configuré correctement, vous devriez voir les changements lorsque vous ouvrez ou enregistrez un fichier JavaScript. Le plugin est incroyablement configurable et peut être fait pour signaler de plusieurs façons qui pourraient être mieux pour votre flux de travail. Par défaut, la description des erreurs sera signalée dans la barre d'état au bas de l'éditeur.

Pour ceux qui utilisent le cadre solide construit par le phénoménal Evan You quand ils travaillent Avec les modèles *. vue vous allez avoir besoin d'un peu d'aide supplémentaire pour rendre votre code lisible. Syntaxe de la vue Le surlignage est là pour vous aider

Le premier plugin à faire de cette liste qui n'est pas uniquement dédiée à JavaScript doit être SideBar Enhancements. Out of the box, Sublime Text a très peu d'options pour manipuler les fichiers dans votre arborescence de fichiers. Pour le dire simplement, SideBarEnhancements corrige cela. Ce plugin fournit notamment un move to trash option pour les fichiers et dossiers, un ouvert avec .. option, et même un presse-papiers. Il vous permet également d'ouvrir des fichiers dans votre navigateur Web, de copier le contenu d'un fichier en tant que données : uri base64 (ce qui est particulièrement pratique pour intégrer des images en CSS) et fournit une multitude d'opérations de recherche. En prime, il s'intègre parfaitement avec SideBarGit pour fournir des commandes Git directement depuis la barre latérale.

Avec la taille toujours croissante des bases de code JavaScript, un moyen judicieux de naviguer dans votre projet et de pouvoir manipuler les fichiers de votre projet est essentiel. Par conséquent, ce plugin devient un must.

Est-ce que vous ou votre équipe préférez adopter une approche entièrement automatique du peluchage pour vous assurer qu'il est parfait? Ensuite, vous utilisez probablement Prettier un formateur de code opiniâtre. Et si vous l'êtes, ne serait-il pas agréable de voir les changements sur le fichier que vous êtes en train de modifier et de ne pas avoir à attendre que la compilation fasse les changements pour vous? C'est là qu'intervient Prettier. Ce plugin permet aux développeurs d'exécuter Prettier sur le fichier courant qu'ils éditent depuis Sublime.

Si vous n'utilisez pas Prettier comme un outil automatisé, ce plugin peut être utile comme un remplacement moderne pour d'autres plugins Sublime Text tels que JsFormat qui peut aider à apporter de la lisibilité à des fichiers compactés ou tout simplement à des standards de codage incorrects.

Cependant, si vous utilisez déjà ESLint pour votre projet, alors ESLint-Formatter serait probablement plus bénéfique, car il exécutera eslint --fix sur le fichier que vous êtes en train d'éditer.

Si vous travaillez dans un environnement d'équipe ou dans un environnement qui n'est pas obsessivement personnalisé, ce plugin va rapidement devenir un ami proche. Il n'y a rien de plus agaçant que de voir un changement de ligne dans un commit qui ne fait rien au code réel, mais change un espace simple et inutile à la fin d'une ligne.

Mais si vous êtes le genre de personne qui essaie leurs plugins Sublime Text sur le côté plus léger, vous pouvez juste ajouter "trailing_spaces_trim_on_save": true à vos User Preferences pour que Sublime Text les supprime pour vous sur save. Je préfère juste être capable de voir où ils sont, de faire les changements moi-même, avec l'avantage supplémentaire de pouvoir les attraper dans d'autres fichiers que je ne modifie pas explicitement à ce moment-là. Même si cette option est activée, cela ne fait pas de mal d'avoir ce plugin installé … juste au cas où.

Si vous êtes l'un des rares à ne pas utiliser Git pour le contrôle de votre source, vous pouvez probablement ignorer celui-ci. Mais pour ceux d'entre nous qui sommes, GitGutter peut être une addition fantastique à Sublime Text. Les principales caractéristiques qu'il apporte sont:

1. Gutter Icons indiquant des lignes insérées, modifiées ou supprimées
2. Diff Popup avec des détails sur les lignes modifiées
3. Status Bar Text avec des informations sur file and repository
4. Goto Change pour naviguer facilement entre les lignes modifiées

Cela ne fera probablement pas d'améliorations massives dans votre flux de travail, mais c'est un très bon ajout.

Ce plugin arrive en retard dans cette liste, mais il peut être l'un des plugins Sublime Text les plus importants de cette liste. Tout BrackHighlighter ajoute des icônes de coupe et des codes de couleur à la parenthèse, à l'accolade, à la parenthèse ou à l'étiquette assortis. Mais ce qu'il fait vraiment, et ce qui le rend si important, c'est qu'il permet aux développeurs de maintenir leur santé mentale .

Si vous êtes un utilisateur de customisation, ce plugin est hautement configurable tu veux. Consultez leur documentation pour plus d'informations

J'espère que vous gardez au moins un peu de documentation sur les choses que vous construisez, même si c'est juste un simple fichier README.md à la racine de votre projet. Et si vous êtes, alors ne serait-il pas agréable de pouvoir voir un aperçu de ce code Markdown avant de le soumettre? Sublime Text inclut par défaut une bonne syntaxe de Markdown, mais il manque tout moyen de voir comment ce Markdown est rendu … ce qui n'est pas forcément ce que vous vouliez.

Sublime Text est flamboyant, facile à utiliser, et juste carrément puissant de plusieurs façons. Mais soyons honnêtes: à première vue, ça n'a pas l'air génial, surtout quand on le compare à certains de ses concurrents. Normalement, je ne pense pas à ajouter un thème à une liste comme celle-ci, mais dans les thèmes de Sublime Text 3, nous sommes maintenant autorisés à changer les icônes de fichiers dans la barre latérale, et c'est merveilleux! Boxy n'est pas le seul thème qui peut le faire, mais Boxy n'est pas seulement un thème unique: c'est un groupe d'entre eux, et ils sont tous très esthétiquement plaisants à leur manière. Si aucun d'eux ne vous plaît, Seti_UI est aussi un bon choix

Conclusion

Alors nous l'avons – les dix plugins Sublime Text essentiels pour JavaScript développement. Je vous exhorte à essayer un ou deux d'entre eux et à me faire savoir comment vous allez dans les commentaires.

Si j'ai laissé votre plugin favori, s'il vous plaît faites le moi savoir, et je vais envisager de l'ajouter à la

Avant de partir, souvenez-vous que Sublime Text n'est pas un freeware. Il a une version d'essai illimitée (avec un écran nag très occasionnel), mais une licence pour un seul utilisateur coûte 70 $ . Si vous passez la plupart de votre journée à travailler avec un éditeur de texte, je dirais que c'est un investissement digne!

Matt est un développeur de logiciels professionnel et se passionne pour le développement web. En savoir plus sur lui à mawburn.com .