Mobile Menu

Sublime Text & Emmet : astuces et raccourcis pour développer sans soucis

08 / 02 / 2017
Développement, Intégration

Sublime Text & Emmet

Sublime Text, le meilleur éditeur de texte ?

Sublime Text est un éditeur de texte multi-plateforme (OSX, Linux, Windows) destiné à la création et à l’édition de fichiers textes. Extrêmement puissant et rapide, il est devenu incontournable dans le monde de l’intégration et du développement. La version actuelle est Sublime Text 2, mais Sublime Text 3 est déjà disponible en bêta.

Cet article n’a pas pour but de vous présenter les possibilités de Sublime Text, mais plutôt de vous apprendre à mieux l’utiliser afin de gagner du temps. Si vous ne l’avez pas encore testé, nous ne pouvons que vous recommander de le télécharger. Si vous êtes déjà un utilisateur régulier, ce qui suit vous sera certainement très utile !

Améliorer la configuration de Sublime Text

Bien que Sublime Text soit un excellent éditeur, il comporte quelques défauts mineurs que nous allons vous aider à corriger. Le code suivant vous permet d’apporter quelques modifications de confort, comme par exemple la mise en surbrillance des lignes, la réduction de largeur des tabulations ou encore l’ajout automatique de points.

  1. Ouvrez Sublime Text
  2. Cliquez sur Préférences > Settings – User
  3. Mettez une virgule après le dernier réglage : ],
  4. Collez le code ci-dessous :

Pour une personnalisation plus poussée, référez-vous à la documentation de Sublime Text (rubrique « Customization »).

Raccourcis clavier de Sublime Text : développer plus rapidement

Les raccourcis clavier vous permettent de gagner en efficacité et en productivité. Prenez votre temps pour les apprendre, il est généralement plus bénéfique de mémoriser un raccourci en lui associant une utilité tout en codant, plutôt que d’essayer de tout retenir d’un seul coup.

Tout d’abord, sachez que tous ces raccourcis sont disponibles au sein même du logiciel :
Préférences > Key Bidings – Default

Voici les plus utiles :

Ctrl+OOuvrir un fichier
Ctrl+NNouveau fichier
Ctrl+Shift+NNouvelle fenêtre
Ctrl+WFermer un fichier
Ctrl+Shift+WFermer une fenêtre
Ctrl+Shift+TRouvrir le dernier fichier fermé
Ctrl+SSauvegarder
Ctrl+Shift+SSauvegarder sous
Ctrl+CCopier la ligne ou la sélection
Ctrl+XCouper la ligne ou la sélection
Ctrl+VColler la ligne ou la sélection
Ctrl+Shift+VColler et indenter la ligne ou la sélection
Ctrl+YRétablir ou répéter
Ctrl+ZAnnuler
Ctrl+Shift+DDupliquer la ou les lignes
Ctrl+ /Commenter
Ctrl+Shift+ /Bloc de commentaire
Ctrl+KUMettre en majuscule
Ctrl+KLMettre en minuscule
Ctrl+FOuvrir le panneau de recherche
Ctrl+HOuvrir le panneau de remplacement
Ctrl+Shift+POuvrir la palette de commandes
Alt+F3Sélectionner toutes les occurrences
Clic moletteSélection verticale
Ctrl+ASélectionner tout

L’astuce oboqo

Vous en avez marre d’avoir des lignes de code mal indentées ? Dirigez-vous vers :

Préférences > Key Bindings – User

et copiez-collez y ce morceau de code (à placer entre les « [ ] ») :

Pour tout ré-indenter, exécutez la commande Ctrl+A puis Ctrl+I (gain de temps énorme).

Automatiser son code avec Emmet

Emmet est un plugin de Sublime Text permettant de rédiger son code encore plus simplement, sans avoir à écrire la totalité d’une structure HTML mais en l’abrégeant. Son ancêtre ZenCoding sur Notepad++ permettait de faire la même chose mais en beaucoup moins développé. Actuellement, il existe un nombre incalculable de possibilités avec Emmet !

Installer des plugins grâce à Package Control

Pour pouvoir bénéficier des raccourcis Emmet, il vous faut installer Package Control :

  1. Ouvrez la console de Sublime Text (View > Show Console)
  2. Copiez-collez y le code donné sur cette page (ATTENTION, choisissez la bonne version de Sublime Text)
  3. Redémarrez Sublime Text

Pour vérifier que vous avez réussi l’installation, regardez dans Préférences si Package Control apparait.

L’astuce oboqo

Si l’installation a échoué, dirigez-vous vers l’installation manuelle proposée sur la même page.

  1. Téléchargez Package Control.sublime-package
  2. Ouvrez Sublime Text, dirigez-vous vers : Préférences > Browse Packages…
  3. Remontez dans le dossier Sublime Text (ou Sublime Text 3 selon votre version)
  4. Copiez le fichier dans le dossier Installed Packages
  5. Redémarrez Sublime Text

Pour vérifier que vous avez réussi l’installation, regardez dans Préférences si Package Control apparait.

Installer Emmet sur Sublime Text

Pour installer Emmet, commencez par ouvrir la palette de commande (Ctrl+Shift+P). Tapez « Package Control : Install Packages », ou tout simplement « install » car Sublime Text filtre automatiquement par lettre et ordre de lettre. Puis appuyez sur [Entrée].

Une multitude de plugins vous sont alors présentés sous forme de longue liste déroulante. Nous nous intéresserons uniquement à Emmet, mais nous vous donnerons quelques plugins à installer en fin d’article.

Tapez « Emmet » dans la barre de recherche, et appuyez sur [Entrée] : Emmet est installé.

L’astuce oboqo

Il se peut que votre ordinateur rencontre un problème lors de l’installation (avec PyV8 binary). Pas de panique, nous avons la solution :

  1. Téléchargez la bonne version de PyV8 Binary
  2. Allez dans Sublime Text et ouvrez Browse Packages… (Préférences > Browse Package…)
  3. Créez un dossier nommé « PyV8 » (le nom est important !)
  4. Collez le fichier pyv8-win64-p3 dans ce dossier (pour Sublime Text 3 sous Windows 64 bit)
  5. Si le fichier est en .zip, décompressez-le
  6. Redémarrez Sublime Text

Problème résolu.

Abréviations Emmet : optimiser votre code

Nous allons voir ensemble les principales abréviations d’Emmet qui vont vous permettre de gagner un temps précieux. Comme pour les raccourcis de Sublime Text, prenez votre temps pour les apprendre. Mémoriser un raccourci en lui associant une utilité tout en codant sera plus efficace que d’essayer de tout retenir d’un seul coup.

Une fois l’abréviation Emmet tapée, appuyez sur [TAB] pour l’exécuter.

! : créer l’entête de document HTML

Le point d’exclamation ! permet de générer le doctype, les balises <html>, <head>, <body> et <title> ainsi que la règle d’encodage du document HTML.

Exemple : !

> : créer et imbriquer des balises

Le chevron > permet de générer une structure de balises imbriquées.

Exemple : nav>ul>li

* : créer plusieurs occurrences d’une même balise

L’étoile * permet de créer une série de plusieurs balises du même type.

Exemple : div*5

+ : créer plusieurs balises non imbriquées entre elles

Le plus + permet de créer une suite de différentes balises.

Exemple : h1+h2+p

() : combiner plusieurs abréviations

Les parenthèses () permettent de grouper des abbréviations Emmet pour créer des structures plus complexes.

Exemple : (nav>ul>li)+(div*5)+(h1+h2+p)

{} : insérer du contenu dans une balise

Les accolades {} permettent d’ajouter du texte dans une balise générée.

Exemple : ul>li{Élément de liste}

$ : faire une énumération dans une série de balises

Le dollar $ permet d’énumérer des balises grâce à une incrémentation.

Exemple : ul>li{Élément n°$}*4

# : créer des balises avec un identifiant

Le dièse # permet d’attribuer un id à une balise générée.
Si la balise n’est pas précisée devant l’id, une balise <div> est créée par défaut.
A noter que l’on peut écrire plusieurs id à la suite pour générer plusieurs balises : #id1#id2

Exemple : p#mon_id

. : créer des balises avec une classe

Le point . permet d’attribuer une classe à une balise générée.
Si la balise n’est pas précisée devant la classe, une balise <div> est créée par défaut.
A noter que l’on peut écrire plusieurs classes à la suite pour générer plusieurs balises : .class1.class2

Exemple : p.ma_classe


Si vous souhaitez utiliser d’autres abréviations, consultez le site officiel d’Emmet.

Pour aller plus loin

J’espère que ce court article vous aura été utile, et qu’il vous permettra de développer plus rapidement et plus facilement. Si vous débutez dans le domaine, voici une trousse à outils pour bien démarrer dans le web. Et pour vous qui souhaitez aller encore plus loin, voici quelques plugins à installer sur Sublime Text pour apprécier encore plus cet éditeur de texte :

  • CSSlisible : pour réordonner proprement votre code CSS (ordre des déclarations, indentation), ou tout simplement pour dé-minifier du CSS (Ctrl + Alt + L)
  • Minifier : pour minifier le HTML, CSS et JavaScript avec Ctrl+Alt+M.
  • Prefixr : pour les préfixes constructeurs CSS (Ctrl + Alt + X)
  • CSSLint : pour CSSLint (affichage des erreurs de conception) (Ctrl+Alt+C)
  • Color Highlighter : pour afficher les couleurs CSS dans la source en highlight au focus
  • StringEncode : pour (entre autres) convertir des caractères en entités HTML, par exemple les chevrons de balises, les &, etc.
  • Alignment : pour aligner vos morceaux de codes en une seule combinaison de touches
  • SublimeLinter : pour le moteur de base de tous les linters pris en charge
  • DocBlockr : pour faciliter énormément la saisie de commentaires dans le code