SublimeText – Emmet – LiveStyle

Cet article s’adresse au développeurs web qui souhaitent Booster leurs  rapidité de production.

En installant quelques plugin sur votre navigateur préféré (Chrome) et votre éditeur de texte favori (SublimeText), nous aller voir qu’il est possible d’augmenter de 20 à 30% votre rapidité de développement web.
Notamment dans la partie webdesign de création d’un nouveau projet web.

Package control

Tout d’abord ouvrez SublimeText et allez au menu View > Show  Console, puis coller dans la fenêtre qui s’ouvre la ligne suivant afin d’installer Package Control qui vous permettra d’installer des module sur votre éditeur de texte.

Pour SublimeText2 :

Pour SublimeText3 :


Ouvrez l’installateur de paquets

Allez au menu Préférences > Package Control puis tapez Install Package, attendez que le logiciel installe les dépendances puis une fois que la fenêtre d’installation des paquets s’ouvre, vous pouvez effectuer une recherche pour installer les paquets désirés


Installer Emmet sur SublimeText

Appelé précédemment Zen Coding ce plugin est l’outil indispensable à tout codeur PHP, il offre tout un lots de fonctionnalités vous permettant d’accroître votre vitesse de développement, tels que la selection multi-lignes, la création automatique de tableaux, listes, etc… un système d’indentation et de complétion des balises, et tout un tas d’autres fonctionnalités. (Voir http://emmet.io/)

Suivez la procédure d’installation de paquets ci-dessus puis recherchez et installer Emmet.

Installer LiveStyle sur SublimeText

LiveStyle est un outils composé de 2 parties. L’une à installer sur l’éditeur SublimeText et l’autre à installer sur Chrome il vous permet une fois installé de modifier vos fichiers CSS directement via l’inspecteur d’éléments de Chrome. Fini les aller-retour entre votre navigateur et votre éditeur de texte pour designer votre site web. Appliquez directement tout vos styles directement sur chrome, il vous suffira une fois satisfait des changement de vous rendre sur SublimeText pour enregistrer les modifications apportés.

Pour installer LiveStyle sur Sublime texte suivez la procédure d’installation des paquet décrite ci-dessus en recherchant et installant SublimeText (celui-ci installera l’extension PyV8 automatiquement)

Puis aller sur Chrome installer l’extension suivante : https://chrome.google.com/webstore/detail/diebikgmpmeppiilkaijjbdgciafajmg

Une fois installer il vous suffira d’ouvrir sur SublimeText les fichiers css de votre application web, puis d’ouvrir l’inspecteur d’éléments de votre application web sous chrome vous verrez alors apparaître un nouvel onglet nommé LiveStyle.

Activez le, puis (si ce n’est pas fait automatiquement) liée les fichier css de votre application web à ceux éditer dans SublimeText.

Note : No active editor

Dans le cas ou après une installation vous avez une alerte No active editor, vérifiez dans Préférences > Settings – User que vous n’avez pas de références à LiveStyle dans la section ignored_packages.
Si oui, il vous suffit de  supprimer la ligne en question et d’enregistrer les préférences.

 

Laisser un commentaire

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

Partenaires

Cekome Graal Network Panoramaweb