Cuisson Sublime Text 2 pour le front-end

reload en direct et le soutien CSS-préprocesseur

Pourquoi deux des choses différentes que je combinées en une seule section? Tout en raison de la nature de certains logiciels, que je vais expliquer plus tard. reload en direct (ou aperçu en direct), si tout à coup quelqu'un ne sait pas ce point de vue dans le navigateur que vous avez fait dans l'éditeur, sans la nécessité d'actualiser la page, t. E. automatiquement. Dans le cadre du soutien de CSS-préprocesseurs Je veux dire l'ajout de Sublime Text 2 support SASS / SCSS, MOINS, Stylus ou quelle syntaxe tout autre chose du fait que vous préférez utiliser, ainsi que l'organisation de la compilation automatique de toutes ces choses (construire / système de veille) . En fait, tout cela est combiné dans une section, non seulement pour les raisons décrites ci-dessus, mais aussi à cause de mon (je pense que votre trop) objectif était de faire en sorte qu'il était possible de changer quelque chose, par exemple, dans scss- fichier, enregistrez-le, et voir immédiatement le résultat dans le navigateur, ie. e. automatiser le processus de compilation et de mise à jour de la page. Nous avons donc une chaîne de "sauvegarder le fichier"> "compiler"> "mise à jour", ce qui est tout à fait logique met tout dans une section de l'article.

introduction

Pour installer confortablement, retirer et mettre à jour des plug-ins utilisation du Sublime Package Control , son installation est très simple et est décrite sur cette page . Presque tous les plugins que vous pourriez avoir besoin, est dans le contrôle du package, il est donc facile à trouver ici . Je ne vous conseille pas d'ignorer cette fiche et mettre quelque chose à la main, sauf si vous avez une raison particulière pour elle. Nous pouvons dire que le contrôle du package est maintenant le standard de facto pour Sublime Text 2.

Tous les plugins soumis disponibles sur GitHub, presque tout le monde a un readme, qui est le mieux lire. Pour décrire tous les détails ici n'a pas de sens, parce que tout est en train de changer, donc dans cet article, je vais vous donner une petite description, et les détails de décrire parfaitement les auteurs des plugins eux-mêmes.

Les principaux plug-ins

ZenCoding

ZenCoding n'a guère besoin de commentaire, est-ce pas? Lancé en 2008 pepelsbey, le "code écrit accélérateur" sauvé une quantité terrible de temps de développement. Depuis lors, il mis en œuvre sous forme de plug-ins pour de nombreux éditeurs et IDE.

Pas si longtemps , il semblait ZenCoding bouchon héritier - Emmet . Comme l'a suggéré, il est déjà assez stable pour l'utiliser.

SublimeLinter

Ce plugin ajoute le support de la fibre pour de nombreuses langues, y compris HTML, CSS et JavaScript. Pour des performances optimales, installez node.js , plus à ce sujet dans le readme sur le GitHub . En règle générale, il est l'un des plugins, le readme qui est le mieux lu dans son intégralité.

SublimeCodeIntel

Apporte possibilités Sublime Text 2 aux capacités IDE en ajoutant une «intelligence Code» et «autocomplete smart», en particulier, ajoute la possibilité de naviguer rapidement à l'annonce, la saisie semi-automatique pour import'ov et afficher des informations sur les fonctions de la barre d'état.

alignement

Ce plug-in de l'auteur contrôle Package Sublime rend simple alignement de plusieurs lignes et sections multiples sélectionnées de code.

CSSComb

A propos de CSSComb détails peuvent être lus sur le Habre . Cet outil utile pricheshet votre CSS, en plaçant la propriété dans un ordre prédéterminé, et les casser en groupes.

HTML5 et jQuery

Il définit les balises HTML5 et snippets méthodes jQuery, la liste complète peut être trouvée dans Outils> Snippets.

JsFormat

Un plug - in pour le formatage JS / JSON-code qui utilise le service jsbeautifier.org et ayant un réglage assez souples. Format un morceau en surbrillance du code, ou le fichier entier s'il n'y a pas de sélection. Vérifiez si l'extension de fichier * .js, ne pas exercer, vous devez donc utiliser avec prudence.

minifier

Minifier peut minifitsirovat le JavaScript ( Google Closure Compiler ou UglifyJS ) et le CSS ( Reducisaurus ). Tous les plug-in est en deux combinaisons de touches, on stocke le résultat dans le fichier courant et le deuxième en une seule name.min.ext nommée.

Prefixr

Unequivocal must have pour ceux qui ne l'utilisent préprocesseurs, et tout le reste vous sera utile, aussi. Ajoute où préfixes besoin au fournisseur (et même dans le bon ordre) avec l'aide du service prefixr.com . Il fonctionne - écrire propriété sans préfixes, appuyez sur la touche de raccourci et vous avez terminé.

SideBarEnhancement

Comme son nom l'indique, il ajoute quelques améliorations utiles dans la barre latérale, comme menu contextuel encadré «Ouvrir avec ...», ce qui permet d'ouvrir le fichier dans un programme tiers.

plug-ins supplémentaires

Histoire Presse - papiers

Peut-être qu'il est préférable d'avoir un fonctionnement tout au long de l'OS, mais il me manque dans l'éditeur. magasins Plugin presse-papiers histoire, de sorte que vous pouvez insérer non seulement le dernier fragment copié, mais aussi l'un des précédents.

EncodingHelper

Entre autres choses, otobrzhaet codant pour un fichier ouvert dans la barre d'état. En général, cela est la seule raison pour laquelle je l'ai installé ce plugin, mais il a également d'autres fonctionnalités, telles qu'il est capable de vous avertir que le fichier est ouvert dans un codage incorrect pourrait être endommagé.

Placeholders

Avez-vous souvent pour insérer le code dans le poisson? Tous les amateurs de lorem ipsum cet ensemble unique des extraits utiles. Outre le texte brut, est en mesure d'insérer des paragraphes, des listes, des images, et ainsi de suite. D.

Thème - Soda

Ce sont mes subjectifs propriétaires de recommandation Mac OS X. Le thème dessine Soda Sublime Text 2 Interface dans le style natif. Il existe deux variantes de couleurs - Lumière et obscurité, ainsi que le soutien pour Retina-écrans. Cependant, le thème est disponible pour trois systèmes d'exploitation.

reload en direct et le soutien CSS-préprocesseur

Ici, tout est assez ambigu. D'une part, il y a un soutien pour rechargement en direct et montre / construire le système en utilisant des plug-ins (d'abord à moi et cela n'a pas fonctionné), mais il existe plusieurs programmes distincts, en plus de la recharge en direct, capables de surveiller et de compiler des fichiers de différents préprocesseurs. Cette fonctionnalité qu'ils ont (en fonction des possibilités offertes par l'interface graphique), tout à fait différentes, et même le prix est différent. Quelqu'un peut tout faire à l'optimisation des images, et quelqu'un ne sait pas comment et demi, mais il est libre. En général, il revient à ce que de choisir pour eux-mêmes la meilleure option, que je vais essayer de vous aider ci-dessous.

Prise en charge de la syntaxe

Pour commencer oublier les complexités et il suffit de faire la coloration syntaxique pour nous le droit préprocesseur. Chacun a son propre plug-in, tout ce que vous devez faire est de sélectionner le droit: de MOINS , SASS et SCSS , Stylus (ici aussi construire le système inclus).

Plugins Sublime Text 2

compilation automatique

Post est préférable de ne pas diriger plus de divers systèmes de construction dans l'éditeur, mais avec SublimeOnSaveBuild plugin. Tout ce qu'il fait est dans la construction de démarrage automatique (dans le menu Outils> Build) pour votre système de construction choisi lorsque vous enregistrez le fichier.

En ce qui concerne l'ajout de systèmes de construction, tout ici est similaire à l'appui de la syntaxe, choisir le bon: de LESS-la construction , SASS Build (et, bien sûr, de Compass ).

reload en direct

Avec cela en termes de plugins pour Sublime Text 2 est pas si rose, plutôt il n'y a qu'une LiveReload (à ne pas confondre avec le programme ci-dessous), que je ne heureusement pas fonctionné. Ou plutôt ne fonctionne pas pour l'extension de Chrome (extension pour Safari est pas testé, mais pas d'autres navigateurs en charge), bien et en général, il est plus mis à jour. Peut-être quelqu'un sait comment faire cuire et de dire dans les commentaires, mais personnellement, j'était trop paresseux pour mieux comprendre, alors je suis venu à l'utilisation d'un programme distinct pour le "live view" et compiler.

Les programmes individuels

LiveReload

Caractéristiques: LiveReload, d'une part, et comme son nom l' indique, il est capable de garder une trace des modifications de fichiers, et les mettre à jour dans votre navigateur, et d' autre part, de compiler automatiquement, sinon la totalité, alors beaucoup: MOINS, SASS, Compass, Stylus , CoffeeScript, IcedCoffeeScript , Eco, SLIM, HAML, Jade. Pour recharger plus direct, vous devez installer la condition extension du navigateur , il existe des versions de Safari, Chrome et Firefox.

Multiplateforme: L'ensemble du programme pour Mac OS X. Il existe une version pour Windows, mais aujourd'hui il est une version pré-alpha. Pour Linux est proposé d'utiliser la garde-livereload .

Prix: La version pour Mac OS X est au prix de 9,99 $ dans l'App Store, il y a un essai gratuit. Des versions pour Linux et Windows gratuit.

CodeKit

Caractéristiques: Ce programme offre la plus grande opportunité et, en général, l'interface graphique la plus pratique et fonctionnelle. Capable de vivre reload sans extensions pour le navigateur pour compiler automatiquement moins, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript et boussole; unir et scripts minifitsirovat, optimiser les images, et ainsi de suite. d.

Cross-plateforme: Il est pas, le programme est uniquement pour Mac OS X.

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

scout

Caractéristiques: Contrairement à d' autres programmes, Scout ne peuvent compiler le SASS et la boussole, mais dans son interface graphique, vous pouvez définir les modes de sortie, et il est gratuit.

Cross-plateforme: Il existe des versions pour Windows et Mac OS X, cette fois pour Windows version complète. Pour Linux, malheureusement, il n'y a pas de libération.

Prix: gratuit.

enfin

LiveCSS . Ajoute un affichage visuel de couleurs définies dans le CSS.

SublimeFileDiffs . Ajoute un fichier fonction de comparaison.

Le compresseur-the YUI . Un autre plug-in pour minification JS et CSS, en utilisant le même nom pour cet outil de Yahoo!.

SublimeTODO . Utiles en utilisant des notes dans les commentaires.