Dès que vous commencez à développer un site, est un éditeur de texte, qu'il s'agisse d'un simple bloc-notes IDE.
Dans cet épisode, Addy & Matt découvre sa collection de plug-ins pour Sublime Text et découvrez comment chacun facilite son flux de travail.
Contrôle des packages
Pour obtenir les packages (ou plug-ins) référencés dans l'épisode, vous devez Package Control, il est pratique et simple à installer. à installer et vous pouvez trouver la procédure à suivre ici.
JSHint
JSHint est un outil lint JavaScript qui examine votre code JavaScript et met en évidence les erreurs ou les mauvaises pratiques possibles dans votre code.
Par exemple, si vous avez accidentellement saisi un nom de variable incorrect, comme
ci-dessous, alors JSHint indiquera que fo n'a jamais été défini et qu'il est
provoquera 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 des et en plaçant votre curseur dans ce morceau de code, vous obtiendrez une erreur s'affiche en bas à gauche de Sublime.
Les autres problèmes qu'il détecte sont les suivants:
- Variables définies, mais jamais utilisées
- Éviter de créer des fonctions dans des boucles
- Utiliser les méthodes de comparaison appropriées
Pour installer le package SublimeLinter-JSHint, procédez comme suit : vous devez également installer le package SublimeLinter et suivre les sur la page du package SublimeLinter-JSHint.
Certains développeurs peuvent trouver utile d'inclure le fichier JSHint Gutter plug-in. Elle place un petit point dans le dans la gouttière d'une ligne présentant un problème JSHint.
JSCS
JSCS met en évidence les endroits où votre JavaScript ne suit pas un style de codage spécifique.
Par exemple, JSCS peut être utilisé pour définir si les espaces doivent être utilisé après les mots clés, comme "if", ou définir si des accolades doit se trouver sur la même ligne ou sur une nouvelle ligne d'une méthode.
Le package SublimeLinter-JSCS met en évidence les problèmes de façon intégrée dans un style semblable à celui de JSHint ce qui facilite la correction des problèmes.
C'est extrêmement utile lorsqu'il s'agit de travailler équipe, car tout le monde peut suivre le même guide de style et de garder votre code cohérent.
Mieux encore, avec le package JSCS-Formatter, vous pouvez corriger automatiquement les problèmes sur la page.
en appuyant sur ctrl + shift + p, puis en saisissant "JSCS Formatter: Format this file".
et en appuyant sur Entrée. Pour en savoir plus, consultez l'article de blog d'Addy.
Surligneur de couleur
Surligneur couleur ajoute une couleur à l'arrière-plan n'importe quelle définition de couleur dans votre CSS ou Sass.
Vous pouvez définir s'il doit être souligné avec une en plein arrière-plan quand vous le survolez, affiche une couleur sur l'arrière-plan de la définition. Accédez à "Package Settings" (Paramètres du package) > 'Surligneur couleur' > "Settings - Default" (Paramètres – Par défaut) pour afficher les paramètres initiaux et modifiez vos paramètres dans "Paramètres - Utilisateur".
Pour surligner tout l'arrière-plan ajoutez ce qui suit à "Paramètres - Utilisateur" :
{
"ha_style": "filled"
}
Couleur des gouttières
Couleur des marges est une alternative au surligneur, au lieu d'afficher la couleur au-dessus de la variable color, cela place la couleur dans la gouttière de cette ligne.
Sélecteur de couleur
Si vous avez besoin d'un moyen simple et rapide de sélectionner une couleur sur votre écran, puis le package Color Picker Package (Sélecteur de couleur). peut vous convenir.
Appuyez sur ctrl + shift + c et le tour est joué ! Vous avez obtenu un sélecteur de couleur.
AutoFileName
AutoFileName est un simple petit plug-in qui donne la liste des fichiers possibles à mesure que vous tapez. C'est super si vous saisissez le nom d'une image ou Ajoutez un fichier CSS ou JS pour gagner du temps. et, surtout, réduit le risque de fautes de frappe.
Préfixe automatique
Nous avons tous vécu ce moment de réalisation où nous avons oublié de ajouter une propriété CSS avec préfixe. Avec Préfixe automatique il suffit de l'exécuter sur votre CSS pour qu'il se ajoutez tous les préfixes dont vous avez besoin.
Ça veut dire qu'on part de ça...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
à ce qui suit, simplement en appuyant sur ctrl + shift + p et en saisissant
'CSS avec préfixe automatique' et 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 leurs versions à prendre en charge dans les paramètres du package. Accédez à la page Contrôle des packages pour en savoir plus.
Plus…
Il existe une multitude d’autres plug-ins qui existent pour Sublime Text, alors n'hésitez pas à explorer Package Control.
Pour d'autres conseils et astuces, consultez l'excellent diaporama de WesBos des raccourcis clavier et d'autres plug-ins pour Sublime Text.
WesBos a également écrit un livre intitulé "Sublime Text for the Advanced User" qui pourraient vous intéresser, messieurs merveilleux. :)