Sublime Text 2 et les packages indispensables

Grinny Hermant - Alexandra Muge

Sommaire

  • Sublime Text 2
    • Présentation 
    • Raccourcis utiles
  • Package Control
    • Installation
    • Utilisation
  • Emmet
    • Présentation
    • Syntaxe
  • SublimeLinter
  • DocBlockr

  • Alignement

  • Bracket Highlighter

  • Color Picker

Sublime Text 2

Comment l'utiliser pleinement ?

Présentation

Permet également la création de plugins personnalisés (en Python)

Editeur de texte générique codé en C++ et Pyhton

  • Fonctionnalités de base d'un éditeur (coloration syntaxique personnalisable, auto complétion, système de plugins, etc.)
  • Minimap, pour prévisualiser l'intégralité du fichier dans une barre latérale
  • Sélection et édition dans plusieurs sections de code en parallèle
  • Marque-page au sein des fichiers
  • Sauvegarde automatique
  • Recherche et remplacement par expressions réguilières 
  • Support des macros et de plugins en Python
  • Personnalisation des raccourcis claviers

Raccourcis utiles

  • Ctrl+X: supprimer la ligne courante
  • Alt+F3: édition multiligne
  • Ctrl+Maj+P: palette de commande
  • Ctrl+Clic: édition multiple en simultané
  • Ctrl+G: saut vers une ligne
  • Ctrl+N: nouvel onglet
  • Ctrl+Maj+N: nouvelle fenêtre
  • Ctrl+Maj+T: rouvrir le dernier onglet fermé
  • Ctrl+Alt+P: changer le projet courant
  • Ctrl+K+B: afficher masquer l'ecplorateur de fichier

Raccourcis utiles

  • Ctrl+Maj+Alt+P: identifier le scope d'un document
  • Alt+Maj+(1,2,3,4,5,8,9): changer de mise en page
  • Ctrl+Maj+(1,2,3,4,5,8,9): envoyer vers
  • Ctrl+D: sélectionner l'occurence suivante dans le fichier
  • Ctrl+Maj+C: montrer la console
  • Ctrl+Maj+D: dupliquer la ligne courante
  • Ctrl+Maj+/: commenter / décommenter
  • Ctrl+P: accès rapide aux fichiers du projet

Package Control

L'indispensable,

pour gérer et installer vos plugins simplement

Comment ?

Installation via la console (Ctrl + Alt + C)

import urllib2,os,hashlib;
h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0';
pf = 'Package Control.sublime-package'; 
ipp = sublime.installed_packages_path();
os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) );
by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest();
open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; 
print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Utilisation

L'utilisation se fait via la palette de commande (Ctrl+Alt+P). 

  • Taper le nom d'une commande, d'un fichier etc.
  • Les suggestions les plus cohérentes s'affichent alors dans une liste en dessous.
  • Valider avec Entrée

Toute installation de plugin se fera grâce à Package Control « Ctrl + Shift + P » => Install Package.

Emmet

Coder plus rapidement

Présentation

Cette extension vous permet de générer du code HTML et CSS en utilisant seulement des abréviations, qui peuvent être personnalisées dans le fichier JSON.

Exemple : Taper div puis Entrée donnera :

<div></div>

Intègre également un générateur de Lorem Ipsum

ul.generic-list>lorem10.item*4

<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
    <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
    <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

"Anti-sèche" complète : http://docs.emmet.io/cheat-sheet/

Syntaxe

Syntaxe


div>ul>li

Résultat

Child : >

<div>
    <ul>
        <li></li>
    </ul>
</div>

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

Sibling : +


div+div>p>span+em^bq

Climb-up: ^

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

div+div>p>span+em^^^bq
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Syntaxe

Syntaxe


ul>li*5

Résultat

Multiplication: *

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

div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Grouping: ()

Syntaxte

Syntaxe


div#header+div.page+div#footer.class1.class2.class3

Résultat

ID et Classes

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

Attributs

a{Click me}
a{click}+b{here}
a>{click}+b{here}
<a href="">Click me</a>
<a href="">click</a><b>here</b>
<a href="">click<b>here</b></a>

Texte : {}

Syntaxte

Syntaxe

Résultat


ul>li.item$*3

Numérotation

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

ul>li.item$$$*3

ul>li.item$@-*5
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ul>li.item$@3*5
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ul>li.item$@-3*5
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Abréviations CSS

SublimeLinter

Vérification de syntaxe

Il s’agit d’un vérificateur de syntaxe en temps réel. A noter qu’il faut ensuite installer le ou les plugins de langage, par exemple pour PHP : SublimeLinter-php

Attention : Pour Sublime Text 3 uniquement

SublimeLinter permet de coder de façon plus efficace.

SublimeLinter

DocBlockr

Commenter rapidement le code

Alignment

Pour les maniaques de l'alignement avec ctrl+alt+a

Bracket Highlighter

Met en surbrillance les débuts et fins de parenthèses, crochets et accolades en plus d’ajouter une icône dans la marge

Color Picker

Plus de complications dans le choix des couleurs

Les plugins indispensable de Sublime Text

By Grinny Hermant

Les plugins indispensable de Sublime Text

  • 3,230