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