Outils de l’intégrateur #1, Sublime Text & plugins


Publié le : 12 Jan 2016 à 21:00 history Modification : 03 Mai 2016 à 13:15 Vu 13010 fois


Dès mes années d’études, Sublime Text est un éditeur de code qui m’a rapidement converti et fait oublier un Dreamweaver parfois balourd. Pour ceux qui ne le connaissent pas encore je vous propose d’en découvrir un peu plus.  Sa grande force est enrichie par un grand nombre d’extensions et add-ons proposés sur un vaste repository pour la plupart des langages informatiques connus ou simplement pour améliorer votre workflow. 

Si vous voulez un bref aperçu, je vous conseille cette excellente introduction signée Grafikart.

Avant-propos

Avant d’aller plus loin, il y a deux sujets à aborder en préambule : le tarif et la version de cet éditeur de texte.

Le prix

En principe, Sublime Text, quelque soit sa version est payant. Le débat pourrait s’arrêter là mais la vérité est que Sublime Text est utilisable de manière illimitée et indéterminée sans avoir à débourser un centime ou avoir recours à une ruse type crack ou Keygen grugé sur Google. La seule contrainte à sa gratuité est qu’il affichera, de temps en temps (une ou deux fois par heure je dirais, au moment de sauvegarder), une boîte de dialogue. Cette dernière vous rappelle que vous utilisez la version « unregistered » et que vous pouvez à tout moment basculer sur la version achetée.

Sur le papier, cela pourrait paraître particulièrement agaçant. Au début oui un peu sans doute. En vérité, on s’y fait puisqu’il suffit de fermer la popup. J’ai bien dit « fermer », et non de cliquer sur « OK », qui aura le malheur de vous rediriger vers le site de l’éditeur, ce qui est vraiment agaçant pour le coup. Au bout de quelques temps, on ferme machinalement la fenêtre de manière quasi-machinale sans se laisser déconcentrer.

Quelle version ?

Sublime Text en est actuellement à sa 3e version. Cependant, cette dernière étant encore à l’état de BETA, je vous recommande, personnellement, d’utiliser la version 2, encore mise à jour et considérée comme stable. Après quelques essais et recherches, il semble que le gap entre les deux versions soit finalement relativement faible.

Au final, le critère clé est la compatibilité des modules que vous installerez sur la version que vous utilisez. En l’occurrence je n’ai quasiment jamais eu de problèmes de rétro-compatibilité en tentant de trouver ou d’installer un package destiné exclusivement à Sublime Text 3.

Edit : Je suis depuis, passé sur la version 3, qui ne présente pas de bugs particuliers.

Le package control

Et puisque nous parlions justement de packages, profitez en pour rentrer dans le vif du sujet. Le Package Control désigne un ensemble d’add-ons et plugins dédié à l’édtieur. Une fois le package installé dans votre version de Sublime Text, vous avez accès à l’ensemble de ces derniers hébergés sur un repository.

Installer le package control

sublime-text-package-control

package-control-liste

  1. Rendez-vous à cette adresse  et téléchargez la version de Sublime Text 2 correspondant à votre système d’exploitation
  2. Installez et démarrez Sublime text 2
  3. Dans le menu en haut de la fenêtre, allez dans « View » > « Show console ». Un champ de texte devrait apparaître en bas de l’interface de Sublime Text 2.
  4. Rendez-vous sur le site du projet « Package control », assurez-vous que l’onglet correspondant à la version de Sublime Text désiré est bien sélectionné. Recopier l’ensemble du code qui s’affichera dans le cadre et redémarrez Sublime Text.
  5. Appuyez sur CTRL+Shift+P (Windows) ou CMD+Shift+P (MAC). Un menu déroulant apparaîtra. Tapez « Install« . L’auto-complétion devrait finir le boulot et vous afficher « Package Control : install Package » dans les résultats.
  6. Appuyez sur Entrée. La liste de toutes les extensions Sublime Text disponibles devrait apparaître.

Dès lors, on va pouvoir installer quelques packages qui vous changeront la vie (oui, n’ayons pas peur des mots !).

Emmet (ex-Zen Coding)

Héritier du Zen Coding, Emmet est probablement le plugin Sublime Text le plus pertinent en terme de workflow que j’ai pu essayer jusqu’à présent. Il vous permet d’écrire votre code en abrégé puis d’appuyer sur tabulation afin d’en générer le code complet

Exemple avec du HTML :

<!-- Afficher une div à l'id "foo" dans laquelle on trouve 
un titre H1 suivi de deux paragraphes contenant du faux texte -->
div#foo>h1+p*2>lorem

Vous génère :

<div id="foo">
  <h1></h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quibusdam autem provident, necessitatibus aliquam esse, odit numquam dolore minus laboriosam sint doloremque et, voluptatem soluta facere consequatur enim accusantium nostrum!</p>
  <p>Veniam molestias, quaerat rem quam saepe delectus, laboriosam tempora velit voluptatibus id, at sed, dolores aliquam beatae. Veniam, voluptatibus, quo rem, sit quam pariatur molestias est obcaecati culpa beatae explicabo.</p>
</div><!-- /#foo -->

Exemple en CSS

#foo {
    p:a+t0+l0+db+w100%+h200+m15+p10px15px+fz13px+fw300
}

Vous génère :

#foo {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 200px;
    margin: 15px;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 300;
}

Naturellement, l’indentation se fait automatiquement une fois le code généré. Une fois les abréviations mémorisées, le pli se fait très vite. À savoir que Emmet / Zen-coding est implanté nativement dans Dreamweaver pour ceux qui l’ignorent.

La liste complète des abbréviations d’Emmet

Livereload

Extension Google Chrome + Package Sublime Text

livereload

Ce package l procure l’énorme avantage de ne plus avoir à actualiser une page dans le navigateur lorsque vous en modifier le code source. Toutes modifications étant détectées, la synchronisation se fait instantanément. Idéal pour ceux qui codent en local sur deux moniteurs. Un vrai gain de temps au quotidien et un répit bien mérité pour votre touche F5.

Pour fonctionner, il vous faudra installer l’extension pour Chrome + le package pour Sublime Text.

Attention : il vous faudra aller dans les paramètres de l’extension dans votre navigateur et autoriser l’exécution de l’extension sur des fichiers en local. L’extension ne semble pas fonctionner vers un serveur distant.

SFTP

Package Sublime Text

sublime-text-sftp

Package Sublime Text vous permettant de synchroniser les répertoires de vos projets web entre source Locale et Distante (FTP). Pour fonctionner, il faudra créer un fichier « sftp-settings.json » à la racine de votre projet ou dossier à synchroniser.

C’est ce fichier qui contiendra vos paramètres de connexion distante et préférences (Upload automatique après sauvegarde, Synchronisation automatique à l’ouverture de Sublime Text, demande de confirmation avant upload, etc…). C’est également particulièrement utile lorsque vous reprenez un projet qui a potentiellement été modifié en production par quelqu’un d’autre depuis votre dernière intervention.

Attention : Il est possible de créer des extensions pour empêcher à certains fichiers (notamment le fichier sftp-settings.json qui contient vos données FTP en clair) ou types de fichiers (genre ces foutus .DS_STORE) de se retrouver balancer sur votre FTP.

Parcourir la documentation de SFTP

CSS Comb

J’ai découvert le concept de CSS Comb en utilisant Gulp sur mes projets. Le principe est qu’il va réorganiser, nettoyer, corriger votre CSS à votre convenance simplement avec une commande : CTRL + Shift + C. Pour les maniaques de la lisibilité de leur CSS comme je peux l’être, il va pousser le sens du détail jusqu’à la taille des indentations, mettre les accolades à la ligne ou sur la même ligne que le sélecteur (éternel débat), l’espace avant/après les « : » qui suivent une propriété, ordonner les règles selon un ordre du style : position, typographie, effets (transition, ombre, etc…).

Pour ce qui est du paramétrage de vos préférences, dans Sublime Text, tout se trouve à cet endroit, au format .json (attention aux erreurs de syntaxes qui rendront le plugin inactif) : Preferences > Package Settings > CSScomb

 

BracketHighlighter

bracketUn problème fréquent lorsque l’on utilise par exemple des frameworks type Bootstrap et sa grille responsive, c’est que l’on a vite tendance à se retrouver avec une soupe de div. Pour ceux qui ne sont pas très rigoureux niveau lisibilité de leur code et indentation, il peut être pratique d’avoir un indice visuel pour dire où se trouve la balise fermante d’un couple de balises.

Go to anything

go-to-anything-package
Ce package vous permet, en tapant CTRL+P, et en rentrant le début du nom d’un fichier ciblé, de connaître son emplacement et l’ouvrir en un clic grâce à un menu déroulant ergonomique.

Partager cet article

Outils de l’intégrateur #1, Sublime Text & plugins 0 commentaire(s)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

En naviguant sur Origarti, vous acceptez que celui-ci utilise des "cookies", afin de nous permettre d'améliorer régulièrement votre expérience.