Tous les développeurs construisent leur propre ensemble d’outils lorsqu’il s’agit de gérer divers projets. Les outils qu’un développeur Web utilise peuvent réduire le temps nécessaire à la réalisation d’un site Web ou d’une application Web, et peuvent faciliter la gestion des tâches.
Les outils intelligents sont essentiels au flux de travail de tout développeur réussi, donc si vous souhaitez améliorer votre boîte à outils avec un tout nouveau sac d’astuces, c’est une bonne idée de lire attentivement cet article du début à la fin.
Les éditeurs de code ne manquent pas pour vous faciliter la tâche. Décider parmi eux devient beaucoup plus difficile quand il y a tant d’options qui vous attendent.
Par conséquent, nous présenterons une option qui se démarque des autres: Sublime Text. C’est l’un des éditeurs de code les plus utilisés sur le marché et il est préféré par des milliers de programmeurs, développeurs Web et concepteurs Web.
Ce qui est si impressionnant avec Sublime Text, c’est sa flexibilité. Vous pouvez facilement étendre l’éditeur de code en utilisant des plugins Sublime Text créés pour presque tous les usages imaginables. Et, vous pouvez même créer des packages personnalisés qui amélioreront visiblement votre flux de travail et augmenteront votre productivité.
Continuez à lire dans cet article créé par notre équipe de wpDataTables et découvrez certains des meilleurs packages Sublime Text, comment ils fonctionnent et comment vous pouvez les utiliser.
Plugins Sublime Text : Installation de packages
Avant de lister les plugins Sublime Text que nous considérons pertinents pour tous les concepteurs de sites Web, vous devez apprendre à installer des packages sur cet éditeur de code. Voici les étapes que vous devez suivre :
- Téléchargez le fichier zip du référentiel de packages. Vous pouvez le faire à partir de la page GitHub du package.
- Extrayez les fichiers dans votre dossier Sublime Text Packages. Vous devriez le trouver sous : {{ nom d’utilisateur }}AppDataRoamingSublime Text {{ version }}Packages
Ou
- Installez le package via le contrôle de package officiel de Sublime Text Cliquez sur le lien et copiez le code qui correspond à la version de Sublime Text que vous possédez.
- Collez le code dans votre console Sublime Text, à laquelle vous pouvez accéder en appuyant sur CTRL + ~.
- Redémarrez votre éditeur de code, ouvrez la fenêtre de commande en appuyant sur CTRL + Maj + P, et tapez "Package Control: Install Package" (ou simplement "Install Package" – la saisie semi-automatique affichera les options souhaitées)
Une fois le paquet installé, n’apportez aucune modification à son fichier de configuration par défaut, à moins que vous ne sachiez exactement ce que vous faites. Les packages Sublime Text sont principalement destinés à être personnalisés avec l’utilisation de fichiers de remplacement séparés afin que vos modifications ne soient pas perdues lors de la mise à jour des packages.
Sublime Text Plugins Tous les développeurs Web devraient essayer
En parlant de l’extensibilité de l’éditeur de code, il serait utile de répertorier quelques-uns des meilleurs plugins Sublime Text et comment ils peuvent vous aider à devenir un meilleur développeur dans les plus brefs délais.
J’espère que vous trouverez ces plugins utiles et pertinents pour votre travail. Voici la liste :
Contrôle des colis
Sublime Text Package Control est probablement l’outil le plus populaire disponible pour cet éditeur de code. Il vous permet de télécharger, d’installer et de mettre à jour des packages directement depuis l’interface Sublime Text.
Bien que "plugin" et "package" soient souvent utilisés de manière interchangeable, les packages incluent des plugins, des menus, des extraits et d’autres éléments qui peuvent être utilisés pour étendre Sublime Text à votre guise.
Au lieu de télécharger les fichiers du package par vous-même et de les installer dans le bon dossier, laissez ce plugin tout faire pour vous sans quitter Sublime Text. Si vous êtes un programmeur, considérez-le comme pip pour Python ou npm pour node.js.
Alignement
L’alignement fait exactement ce que son nom l’indique: c’est l’un de ces plugins Sublime Text qui rend votre travail 10 fois plus facile en alignant votre code pour le rendre plus net et plus facile à lire. Il fonctionne très bien avec PHP, JavaScript, CSS, etc.
Vous pouvez aligner des sections, des sélections multilignes ou l’intégralité de votre code à l’aide de délimiteurs tels que "=". Même si vous pensez que cela n’aide pas beaucoup, une fois que vous l’utiliserez, vous deviendrez accro à son utilité.
Emmet
Parmi les plugins Sublime Text les plus utilisés se trouve Emmet, un plugin simple qui peut améliorer la productivité de tout développeur en aidant avec son workflow CSS et HTML.
Par exemple, si vous écrivez html: 5 et appuyez sur CTRL + E tout en utilisant Emmet, vous aurez accès à un modèle de page HTML5 de base avec lequel travailler. Le plugin est simple, mais extrêmement efficace et il améliorera certainement votre travail.
Modifier les devis
Vous détestez gérer les devis? Félicitations, vous faites partie des millions de développeurs qui ont également du mal à les maintenir cohérents. ChangeQuotes vous aidera.
Il peut facilement convertir les guillemets simples/doubles et les ré-échapper. Si vous souhaitez modifier les guillemets, placez votre curseur à l’intérieur du texte cité et ouvrez la palette de commandes. Exécutez le plugin et vous n’avez plus besoin de sélectionner la ligne entière pour modifier les guillemets. C’est beaucoup plus rapide comme ça !
Améliorations de la barre latérale
Ce plugin Sublime Text ajoutera de nouvelles fonctionnalités à votre menu latéral. Par exemple, vous pouvez créer un nouveau fichier beaucoup plus rapidement tout en restant dans votre dossier de projet actuel. Vous pouvez également déplacer plus facilement des fichiers et des dossiers, les dupliquer au besoin et ouvrir des fichiers dans le Finder ou dans votre navigateur.
SublimeEnhancements ajoute une multitude de fonctionnalités utiles dans la barre latérale qui vous aideront à gérer votre projet plus efficacement. Installez-le pour découvrir toutes les fonctions utiles.
SublimeLinter
Si vous êtes un utilisateur de Sublime Text 3, vous allez adorer SublimeLinter. Peu de plugins Sublime Text ont été mis à jour pour la dernière version de l’éditeur, il est donc toujours agréable de voir que les développeurs de plugins se concentrent sur la mise à jour de leurs produits. Plutôt que d’avoir tous vos linters dans un seul paquet, ce plugin vous permet d’installer ceux que vous utilisez régulièrement.
Fondamentalement, le SublimeLinter vous donne un cadre à utiliser pour lisser le code. Au cas où vous ne le sauriez pas, le linting représente le processus de signalisation de la syntaxe non portable ou incorrecte dans votre code. En termes plus simples, il vous avertit lorsque le code est encombré de bogues.
SublimeGit
Travailler avec un logiciel de contrôle de version est courant pour les développeurs. Le plus populaire est Git. Pour ceux qui en ont assez de sauvegarder des fichiers texte et de retourner à un terminal pour exécuter quelques commandes Git, SublimeGit sera la réponse. Ce plugin Sublime Text vous permet d’exécuter toutes vos commandes Git dans l’éditeur de texte.
En utilisant SublimeGit, les développeurs peuvent faire plus en moins de temps, augmentant ainsi considérablement leur productivité. Vous n’aurez pas à basculer entre votre éditeur de code et la ligne de commande.
Auparavant, il n’était disponible qu’en tant que plugin payant, mais l’année dernière, il est devenu open source. Il possède de nombreuses fonctionnalités que vous trouverez utiles, ainsi que la documentation SublimeGit, qui vous aidera à comprendre et à utiliser le plugin.
GitGutter
Vous pouvez toujours exécuter des commandes Git dans Sublime Text lui-même, mais ce n’est pas le moyen le plus rapide de gérer cette tâche. Sublime Text vous fait exécuter une commande distincte, au lieu de vous permettre de visualiser les modifications en temps réel. Eh bien, c’est là que GitGutter intervient.
GitGutter est similaire à Atom de certains points de vue. Il ajoute les mêmes types de fonctionnalités à Sublime Text, ce qui signifie que vous pouvez commencer à ajouter des indices de différence à la gouttière de votre barre latérale. En survolant les indicateurs de votre barre latérale, vous avez accès à des popups de différences très pratiques.
TOUPET
La mise en évidence est primordiale pour remarquer rapidement les erreurs et les bogues. Pour les développeurs, corriger les erreurs rapidement et efficacement est un must absolu. SASS vous aide à le faire. Il met en évidence la syntaxe SASS et SCSS et aidera tout développeur CSS qui utilise ces langages d’extension.
GitHubinator
Ceux qui utilisent les référentiels GitHub/Bitbucket doivent essayer GitHubinator. Ce plugin affiche le texte sélectionné sur le référentiel distant. Ainsi, le texte que vous recherchez est mis en surbrillance et vous pouvez simplement cliquer sur le menu contextuel pour lancer la page Web correspondante dans le navigateur.
Comme dans le cas des autres plugins Sublime Text répertoriés ici, GitHubinator aide les développeurs à gagner du temps et à éviter les actions répétitives.
GitOpenChangedFiles
Comme vous pouvez le constater, ce plugin est utilisé pour ouvrir les fichiers modifiés à partir d’un référentiel Git. Il vous suffit de l’installer et de lancer le plugin pour ouvrir les fichiers que vous avez précédemment modifiés dans votre branche Sublime Text.
Ce n’est pas vraiment un plugin, mais ceux qui ont besoin de cette fonction la trouveront très pratique.
Terminal
Vous savez combien de temps dure le processus d’ouverture des dossiers de projet avec Sublime Text. Terminal vous permet d’ouvrir les dossiers directement à partir de Sublime Text dans la plate-forme avec un seul raccourci clavier. N’est-ce pas pratique ?
Lors de l’exécution de lignes de commande dans un dossier donné, vous devez passer par quelques étapes chronophages et assez stressantes. Terminal réduit ces étapes au raccourci clavier CTRL + SHIFT + T.
SublimeREPL
L’utilisation de SublimeREPL rendra le travail d’un programmeur 10 fois plus facile. Ce plugin vous permet d’exécuter des interpréteurs des langages les plus courants, notamment NodeJS, Python, Ruby, Scala ou Haskell.
Vous pouvez exécuter un interpréteur sur n’importe laquelle de ces langues et plus encore, directement depuis Sublime Text. Jetez un œil aux autres fonctions du plugin pour mieux comprendre ce qu’il peut faire.
Babel
Si vous avez besoin de définitions de langage pour ES6 + Javascript, vous devez utiliser Babel. Peu de plugins Sublime Text offrent de bonnes définitions de langage, en particulier pour sa dernière version. Babel est spécialement conçu pour Sublime Text 3 et ne prend pas en charge les versions antérieures. Il prend également en charge la syntaxe React JSX.
AllAutocomplete
Par défaut, Sublime Text utilise l’option de saisie semi-automatique uniquement sur les mots présents dans le fichier actuel. Pour étendre cette fonctionnalité à tous les fichiers ouverts, vous pouvez utiliser AllAutocomplete, un plugin qui recherche tous les fichiers que vous avez ouverts et trouve des correspondances, tout en suggérant des mots.
CSSComb
CSSComb trie les propriétés CSS afin que votre code devienne plus propre et plus facile à lire. Il met le code dans le bon ordre et vous permet de personnaliser ses propriétés sans trop de tracas. C’est un plugin utile pour ceux qui travaillent dans des équipes où tous les membres n’écrivent pas le code de la même manière.
MarkdownPreview
De nombreux développeurs ont l’habitude de créer des fichiers Markdown dans GitHub, StackEdit ou Markable, dans le cloud. Si vous êtes un écrivain de la vieille école et que vous préférez conserver vos fichiers localement, vous devriez essayer MarkdownPreview.
Vous pouvez également installer MarkdownEditing et mettre votre code Markdown en surbrillance.
DocBlockr
Dans certaines entreprises, toutes les directives de codage doivent être respectées religieusement. Cela peut mettre la pression sur les épaules des développeurs. DocBlockr vous facilite la tâche en créant des commentaires pour votre code, en analysant les fonctions, les variables ou les paramètres et en ajoutant automatiquement des éléments de base.
Vous n’aurez qu’à taper /et le plugin fait le travail pour vous.
Extraits de code CSS matérialisés
MaterialiseCSS est un framework frontal mémorable créé par Google. Il est moderne, entièrement réactif et prêt à être utilisé par tous les concepteurs et développeurs. Ce plugin Sublime Text vous aidera à utiliser Materialise CSS dans l’éditeur de texte avec l’utilisation d’extraits communs.
Les extraits CSS matérialisés ajoutent des composants CSS directement dans l’ éditeur de code, afin que vous puissiez y accéder avec des commandes de base. Les extraits CSS matérialisés peuvent économiser beaucoup de temps et d’énergie qui seraient normalement pris en tapant la syntaxe manuellement et en ajoutant des composants CSS séparément.
Format standard
Sans formatage, votre code aura l’air désordonné et difficile à parcourir. StandardFormat vous permet de créer une base de code beaucoup plus solide tout en aidant les gens à lire votre code plus rapidement et plus efficacement chaque fois qu’ils en ont besoin.
Le plugin est basé sur la bibliothèque Standard Format JS, qui sera appliquée à ce que vous écrivez. Tout le monde sait lire le format JS traditionnel, ce plugin s’avère donc très utile pour les développeurs.
Extraits de requête média CSS
Les requêtes multimédias sont utilisées pour développer des applications et des logiciels pour les appareils mobiles ou des tailles d’écran évolutives. Sans ces requêtes, vous ne pouvez pas transformer votre projet en un projet compatible avec les mobiles.
CSS Media Query Snippets vise à vous aider dans cette tâche, en proposant des modèles pré-écrits pour les requêtes multimédias. Vous pouvez simplement utiliser le modèle pour apporter des modifications.
Exécuteur Shell
Nous savons tous que l’accès Shell est un sujet controversé en raison des configurations non sécurisées que les serveurs exécutaient dans le passé. Être la proie des pirates était beaucoup plus courant à l’époque où les commandes Shell Exec étaient accessibles de l’extérieur, ouvrant des vulnérabilités dans la plate-forme.
Ce plugin vous aide à exécuter des commandes shell dans Sublime Text 3, étant donné qu’Internet est maintenant beaucoup plus sûr. C’est un bon moyen de gagner du temps, mais n’oubliez pas de configurer les paramètres du pare-feu et de déterminer les modèles d’accès pour éviter la situation susmentionnée.
Laravel BladeSurligneur
Laravel est un framework open-source pour PHP et il a influencé le développement PHP de manière assez visible. Laravel utilise Blade Engine, une syntaxe qui vous permet de développer de nouveaux logiciels en plus du framework.
Sublime Text ne serait pas le même sans Laravel Blade Highlighter si vous utilisez Laravel quotidiennement. Avec plus de 300 000 installations, ce plugin est incontournable pour tout développeur PHP.
Fin des réflexions sur ces plugins Sublime Text
Sublime Text est assez puissant en soi, mais les plugins et les packages le rendent encore plus puissant. Le plus grand avantage de ces plugins est de vous faire gagner du temps en vous aidant à personnaliser Sublime Text en fonction de vos besoins, exigences et tâches quotidiennes.
Chaque développeur préfère une certaine routine de codage, et vous pouvez maintenir cette routine en sélectionnant les plugins Sublime Text qui conviennent le mieux à votre situation. Choisissez ceux qui ont du sens pour votre façon de travailler et votre travail. Cela rendra tout plus efficace et moins chronophage.
Bonne chance avec vos tâches de codage !
Si vous avez aimé lire cet article sur les plugins Sublime Text, vous devriez consulter celui-ci sur les thèmes Sublime Text.
Nous avons également écrit sur quelques sujets connexes tels que les meilleurs packages Atom et comment devenir développeur front-end.