Dès que vous commencez à développer un site, le premier outil que vous utilisez est un éditeur de texte, qu'il s'agisse d'un simple bloc-notes ou d'un IDE complet.
Dans cet épisode, Addy et Matt examinent leur collection de plug-ins pour Sublime Text et expliquent comment chacun d'eux facilite leur workflow.
Contrôle des packages
Pour obtenir les packages (ou plug-ins) référencés dans l'épisode, vous devez installer l'outil Package Control. Cette fonctionnalité est simple et pratique à installer. Pour savoir comment procéder, consultez cette page.
JSHint
JSHint est un outil lint qui examine votre code JavaScript et met en évidence les erreurs possibles ou les mauvaises pratiques.
Par exemple, si vous avez accidentellement saisi un nom de variable incorrect, comme ci-dessous, JSHint signalera que fo n'a jamais été défini et va provoquer une erreur.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
Le plug-in JSHint signale les problèmes en affichant un cadre jaune autour du texte pertinent. Si vous placez le curseur dans cette portion de code, un message d'erreur s'affiche en bas à gauche de Sublime.
Il peut également détecter les problèmes suivants:
- Variables définies, mais jamais utilisées
- Éviter de créer des fonctions dans des boucles
- Utiliser les bonnes méthodes de comparaison
Pour installer le package SublimeLinter-JSHint, vous devez également installer le package SublimeLinter et suivre les instructions d'installation figurant sur la page du package SublimeLinter-JSHint.
Certains développeurs peuvent également trouver utile d'inclure le plug-in gouttière JSHint. Il place un petit point dans la marge de n'importe quelle ligne présentant un problème JSHint.
JSCS
JSCS met en évidence les endroits où votre code JavaScript ne suit pas un style de codage spécifique.
Par exemple, JSCS peut être utilisé pour définir si des espaces doivent être utilisés après les mots clés, tels que "if", ou pour définir si les accolades doivent être sur la même ligne ou sur la nouvelle ligne d'une méthode.
Le package SublimeLinter-JSCS met en évidence les problèmes intégrés dans un style semblable à JSHint, ce qui permet de les corriger facilement.
Cette approche est extrêmement utile pour travailler en équipe, car tout le monde peut suivre le même guide de style et garder votre code cohérent.
Bonne nouvelle : avec le package JSCS-Formatter, vous pouvez résoudre automatiquement les problèmes sur la page en appuyant sur ctrl + shift + p, en saisissant "JSCS Formatter: Format this file" et en appuyant sur Entrée. Pour en savoir plus, consultez cet article de blog d'Addy.
Surligneur couleur
Le surligneur de couleur ajoute une couleur à l'arrière-plan de toutes les définitions de couleurs dans votre CSS ou Sass.
Vous pouvez définir si elle doit s'afficher sous forme de soulignement avec un arrière-plan complet lorsque vous pointez dessus ou si elle affiche toujours une couleur sur l'arrière-plan de la définition. Accédez à Paramètres du package > "Surligneur de couleurs" > "Paramètres – Par défaut" pour afficher les paramètres initiaux et modifier vos paramètres dans "Paramètres – Utilisateur".
Pour mettre en surbrillance l'arrière-plan complet, ajoutez le code suivant au fichier "Paramètres – Utilisateur" :
{
"ha_style": "filled"
}
Couleur des gouttières
L'option Couleur de la marge est une alternative au surligneur de couleur. Au lieu d'afficher la couleur au-dessus de la variable de couleur, elle la place dans la marge de cette ligne.
Sélecteur de couleur
Si vous avez besoin d'un moyen rapide et facile de sélectionner une couleur à partir de votre écran, le package de sélection des couleurs peut être fait pour vous.
Appuyez sur ctrl + shift + c, et voilà ! Vous avez créé un sélecteur de couleur.
AutoFileName
AutoFileName est un simple petit plug-in qui vous fournit une liste des fichiers possibles à mesure que vous saisissez du texte. C'est très pratique si vous essayez de saisir le nom d'une image ou d'ajouter un fichier CSS ou JS, car cela vous fait gagner du temps et, surtout, réduit le risque de fautes de frappe.
Préfixe automatique
Nous avons tous connu ce moment où nous avons oublié d'ajouter une propriété CSS avec le préfixe. Avec Autoprefixer, vous pouvez l'exécuter facilement sur votre CSS et ajouter tous les préfixes dont vous avez besoin.
Ça veut dire qu'il faut passer à autre chose...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
comme suit, en appuyant simplement sur ctrl + shift + p, en saisissant "préfixe automatique CSS", puis en appuyant sur Entrée.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
Vous pouvez également définir les navigateurs et les versions de navigateur que vous souhaitez prendre en charge dans les paramètres du package. Pour en savoir plus, consultez la page de contrôle des packages.
Plus…
De nombreux autres plug-ins existent pour Sublime Text. Veillez donc à explorer Package Control.
Pour obtenir d'autres conseils et astuces, consultez l'excellente présentation de WesBos sur les raccourcis clavier et autres plug-ins pour Sublime Text.
WesBos a également écrit un livre intitulé Sublime Text for the Power User qui pourrait vous intéresser.