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

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 :

"auto_complete": true,
  "auto_complete_triggers":
  [
    {
      "characters": ".",
      "selector": "source.js"
    }
  ],
  "ensure_newline_at_eof_on_save": true,
  "folder_exclude_patterns":
  [
    "node_modules",
    ".git"
  ],
  "highlight_line": true,
  "highlight_modified_tabs": true,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true

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

Ces raccourcis ne sont disponibles que si vous sélectionnez un langage autre que celui par défaut « Plain Text ». Pour le modifier, en bas à droite de votre écran, cliquez sur « Plain Text » et sélectionnez un langage: Html, Php, etc..

Voici les plus utiles :

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 « [ ] ») :

{ "keys": ["ctrl+i"], "command": "reindent"} //Vérifiez que Ctrl+I n’est pas utilisé, sinon remplacez le dans Key Bidings – Default.

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 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

> : créer et imbriquer des balises

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

Exemple : nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

* : 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

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

+ : 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

<h1></h1>
<h2></h2>
<p></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)

<nav>
    <ul>
        <li></li>
    </ul>
</nav>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<h1></h1>
<h2></h2>
<p></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}

<ul>
    <li>Élément de liste</li>
</ul>

$ : 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

<ul>
    <li>Élément n°1</li>
    <li>Élément n°2</li>
    <li>Élément n°3</li>
    <li>Élément n°4</li>
</ul>

# : 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

<p id="mon_id"></p>

. : 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

<p class="ma_classe"></p>