This page has been robot translated, sorry for typos if any. Original content here.

Cuisson Sublime Text 2 pour front-end

Par sujet:


Sublime Text 2 FAQSublime Text 2 FAQ

Ce n'est pas un secret pour aucun programmeur ou compositeur expérimenté qu'un environnement de développement personnalisé pour vous (pas au sens d'IDE, mais plus généralement) est une nécessité vitale. À une certaine époque, je faisais une autre mise en page dans un Notepad ++ pratiquement dépouillé sur un seul moniteur, en ouvrant alternativement Photoshop, un navigateur et un éditeur. Aujourd'hui, à l'ère de "l'automatisation de tout", j'ai du mal à imaginer comment il était possible de travailler de cette façon.

Sublime Text 2 est un éditeur de texte populaire, extensible et multiplate-forme pour lequel de nombreux plug-in sont écrits, sinon pour toutes les occasions. Dans cet article, je vais essayer de dire comment, à partir de ce constructeur, créer un outil de développement frontal pratique pour travailler avec HTML, CSS et JavaScript. Un petit disclaimer: je travaille sur Mac OS X, donc dans certains "moments multi-plateformes", je ne peux pas m'accorder sur quelque chose, mais je vais essayer de fournir des informations complètes. Et pourtant: je ne prétends pas à la vérité en dernier recours et j'attends vos options.

Live reload et support du préprocesseur CSS

Pourquoi est-ce que je combine deux choses si différentes dans une section? Tout cela à cause des spécificités de certains logiciels, dont je parlerai plus tard. Rechargement en direct (ou aperçu en direct), si tout à coup quelqu'un ne le sait pas, il s’agit de visualiser dans le navigateur ce que vous avez fait dans l’éditeur, sans qu'il soit nécessaire d’actualiser la page, c’est-à-dire automatiquement. Par support des préprocesseurs CSS, j'entends ajouter un support pour SASS / SCSS, LESS, la syntaxe Stylus ou tout ce que vous préférez utiliser pour Sublime Text 2, ainsi que l'organisation de la compilation automatique de tout cela (système de construction / surveillance) . En fait, tout cela est combiné dans une section, non seulement pour la raison décrite ci-dessus, mais aussi parce que mon objectif (je pense que le vôtre aussi) était de permettre de changer quelque chose, par exemple en fichier, enregistrez-le et voyez immédiatement le résultat dans le navigateur, c’est-à-dire automatiser le processus de compilation et de mise à jour de la page. Nous avons donc la chaîne «enregistrer le fichier»> «compiler»> «mettre à jour», qui met logiquement tout cela dans une section de l’article.

Introduction

Pour installer, supprimer et mettre à jour confortablement les plugins utilisés par Sublime Package Control , son installation est très simple et est décrite sur cette page . Presque tous les plug-ins dont vous avez besoin sont dans Package Control, il est donc pratique de les rechercher ici . Je ne conseille pas d'ignorer ce plugin et de mettre quelque chose manuellement, sauf si vous avez une raison particulière pour cela. Nous pouvons dire que le contrôle des packages est désormais le standard de facto pour Sublime Text 2.

Tous les plugins soumis sont hébergés sur GitHub, presque tout le monde a un readme qu'il est préférable de lire. Décrire tous les détails ici n'a pas de sens, car tout change, alors dans cet article, je vais vous donner une petite description, et les auteurs eux-mêmes décrivent parfaitement les détails des plug-ins.

Plugins principaux

ZenCoding

ZenCoding a à peine besoin de commentaires, non? Lancé en 2008 par pepelsbey, cet «accélérateur d'écriture de code» a fait gagner un temps considérable aux développeurs. Depuis lors, il a été implémenté en tant que plug-in pour de nombreux éditeurs et IDE.

Il n'y a pas si longtemps, le plugin ZenCoding a un successeur - Emmet . Comme suggéré, il est déjà suffisamment stable pour l'utiliser.

Sublimelinter

Ce plugin ajoute la prise en charge des peluches dans de nombreuses langues, notamment HTML, CSS et JavaScript. Pour de meilleures performances, installez node.js et lisez-en plus à ce sujet dans le fichier lisez - moi sur GitHub . En général, c’est l’un des plugins, un fichier lisez-moi auquel il est préférable de lire intégralement.

SublimeCodeIntel

Il rapproche les capacités de Sublime Text 2 des capacités de l'EDI en ajoutant «intelligence de code» et «intelligence automatique», en particulier, il ajoute la possibilité de passer rapidement à l'annonce, à la saisie automatique pour l'importation et d'afficher des informations sur la fonction dans la barre d'état.

Alignement

Ce plug-in de l’auteur de Sublime Package Control facilite l’alignement de sections de code multilignes et multiples surlignées.

CSSComb

À propos de CSSComb peut être lu en détail dans Habré . Cet outil utile brossera votre code CSS en organisant les propriétés dans un ordre donné et en les divisant en groupes.

HTML5 et jQuery

Il s'agit d'ensembles d'extraits de balises HTML5 et de méthodes jQuery, dont la liste complète se trouve dans Outils> Extraits de code.

Jsformat

Plug- in de formatage de code JS / JSON utilisant le service jsbeautifier.org et disposant de paramètres assez souples. Formate la section de code sélectionnée ou le fichier entier s'il n'y a pas de sélection. Il ne vérifie pas si le fichier a l'extension * .js, vous devez donc l'utiliser avec prudence.

Minifier

Minifier peut minimiser JavaScript ( Google Closure Compiler ou UglifyJS ) et CSS ( Reducisaurus ). L'ensemble du plug-in se compose de deux touches de raccourci, l'une enregistre le résultat dans le fichier actuel et l'autre dans un fichier distinct nommé name.min.ext.

Préfixe

Un sans ambiguïté doit avoir pour ceux qui n'utilisent pas de pré-processeurs, et tout le reste est également utile. Ajoute les préfixes du fournisseur (et même dans le bon ordre), le cas échéant, à l'aide du service prefixr.com . Cela fonctionne simplement - écrivez une propriété sans préfixes, appuyez sur la combinaison de touches et c’est fait.

SideBarEnhancement

Comme son nom l'indique, des améliorations utiles ont été apportées à la barre latérale, par exemple l'élément de menu contextuel de la barre latérale «Ouvrir avec ...», qui vous permet d'ouvrir le fichier dans un programme tiers.

Plugins supplémentaires

Historique du presse-papier

Peut-être cette fonctionnalité est-elle préférable dans l’ensemble du système d’exploitation, mais j’en ai assez dans l’éditeur. Le plugin se souvient de l'historique du presse-papiers, vous pouvez donc coller non seulement le dernier fragment copié, mais aussi n'importe lequel des précédents.

EncodageHelper

Entre autres choses, il affiche l'encodage du fichier ouvert dans la barre d'état. En général, c'est la seule raison pour laquelle j'ai installé ce plugin, mais il a d'autres options, par exemple, il peut vous avertir qu'un fichier ouvert dans le mauvais encodage peut être endommagé.

Placeholders

Devez-vous souvent insérer du poisson dans le code? Tous les amateurs de lorem ipsum cet ensemble d'extraits est certainement utile. En plus du texte simple, peut insérer des paragraphes, des listes, des images, etc.

Thème - Soda

Ceci est ma recommandation subjective aux propriétaires de Mac OS X. Le thème Soda crée l'interface de Sublime Text 2 dans un style natif. Il existe deux variantes de couleur - Clair et foncé, ainsi que la prise en charge des écrans Retina. Cependant, le thème est disponible pour trois systèmes d'exploitation.

Live reload et support du préprocesseur CSS

Ici tout est plutôt ambigu. D'un côté, il existe un support pour le rechargement en direct et le système de surveillance / création à l'aide de plug-ins (le premier ne fonctionnait pas pour moi), mais il existe plusieurs programmes distincts qui, en plus du rechargement en direct, peuvent surveiller et compiler divers fichiers de pré-processeur. Dans le même temps, les fonctionnalités dont ils disposent (en termes de fonctionnalités fournies par l'interface graphique) sont complètement différentes et leur coût est différent. Quelqu'un peut tout faire pour optimiser l'image, alors que d'autres ne peuvent pas en faire la moitié, mais gratuitement. En général, tout revient à choisir la meilleure option pour vous, dans laquelle je vais essayer de vous aider ci-dessous.

Prise en charge de la syntaxe

Premièrement, oublions les difficultés et mettons simplement en évidence la syntaxe pour les pré-processeurs dont nous avons besoin. Chacun a son propre plugin, il suffit donc de choisir le bon: LESS , SASS et SCSS , Stylus (vous trouverez également ici le système de construction).

Sublime Text 2 Plugins

Compilation automatique

Il est préférable de ne pas commencer par l’ajout direct de divers systèmes de compilation à l’éditeur, mais par le plug-in SublimeOnSaveBuild. Tout ce qu'il fait est de lancer automatiquement Build (dans le menu Outils> Build) pour le système de construction de votre choix au moment de l'enregistrement du fichier.

En ce qui concerne l’ajout de systèmes de construction, ici tout est identique à la prise en charge de la syntaxe, choisissez ce dont vous avez besoin: LESS-build , SASS Build (et, bien sûr, Compass ).

Recharge en direct

Avec cela en termes de plugins pour Sublime Text 2, ce n’est pas très rose, ou plutôt il n’ya qu’un seul LiveReload (à ne pas confondre avec le programme ci-dessous), ce qui ne fonctionne pas bien pour moi. Plus précisément, l'extension pour Chrome ne fonctionne pas (l'extension pour Safari n'a pas encore été testée, mais aucun autre navigateur ne peut être prise en charge). Eh bien, en général, elle n'a pas été mise à jour depuis longtemps. Quelqu'un sait peut-être comment le préparer et commenter dans les commentaires, mais personnellement, j'étais trop paresseux pour en comprendre davantage, aussi suis-je venu pour utiliser un programme distinct pour la "visualisation en direct" et la compilation.

Programmes séparés

LiveReload

Caractéristiques: LiveReload, d’une part et comme son nom l’indique, peut surveiller les modifications de fichiers et les mettre à jour dans le navigateur, et d’autre part, compiler automatiquement si ce n’est pas tout, alors beaucoup: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript , Eco, SLIM, HAML, Jade. Pour le rechargement en direct, vous devez installer l’ extension jointe dans le navigateur . Il existe des versions pour Safari, Chrome et Firefox.

Multiplate-forme: En général, le programme pour Mac OS X. Il existe une version pour Windows, mais il s’agit aujourd’hui d’une version pré-alpha. Pour Linux, il est suggéré d'utiliser guard-livereload .

Prix: La version Mac OS X coûte 9,99 $ sur l'App Store et un essai gratuit est disponible. Les versions pour Linux et Windows sont gratuites.

Codekey

Caractéristiques: Ce programme fournit les fonctionnalités les plus complètes et, en général, l'interface graphique la plus pratique et la plus fonctionnelle. Capable de recharger en direct sans extensions de navigateur, compiler automatiquement Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript et Compass; combinez et réduisez les scripts, optimisez les images, etc.

Multiplication: Ce n'est pas le cas, le programme est uniquement destiné à Mac OS X.

Prix: 25 $. Il y a un essai gratuit.

Scout

Caractéristiques: Contrairement aux autres programmes, Scout ne peut compiler que SASS et Compass, mais dans son interface graphique, vous pouvez définir les modes de sortie, ce qui est gratuit.

Multiplate-forme: Il existe des versions pour Windows et Mac OS X, cette fois la version Windows est complète. Pour Linux, malheureusement, il n'y a pas de version.

Prix: gratuit.

Enfin

LiveCSS . Ajoute un affichage visuel des couleurs spécifiées dans le CSS.

SublimeFileDiffs . Ajoute la fonction de comparaison de fichiers.

YUI-Compressor . Un autre plug-in de minification JS et CSS qui utilise l'outil de même nom de Yahoo!.

SublimeTODO . Il est utile d'utiliser des notes dans les commentaires.