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

Préparer Sublime Text 2 pour le front-end

Par sujet:


Sublime Text 2 FAQSublime Text 2 FAQ

Ce n'est un secret pour aucun programmeur expérimenté ou concepteur de mise en page que l'environnement de développement (pas dans le sens d'IDE, mais plus généralement) est une nécessité vitale. Il fut un temps où je faisais une autre mise en page dans un Notepad ++ pratiquement vide sur un seul moniteur, ouvrant le Photoshop, le navigateur et l'éditeur un par un. Aujourd'hui, à l'ère de «l'automatisation de tout», il m'est difficile d'imaginer comment il était possible de travailler de la sorte.

Sublime Text 2 est un éditeur de texte multiplateforme extensible populaire, pour lequel de nombreux plugins sont écrits, sinon pour toutes les occasions, puis pour beaucoup. Dans cet article, je vais essayer de vous dire comment créer un outil de développement frontal pratique pour travailler avec HTML, CSS et JavaScript de ce concepteur. Un petit disque: je travaille sur Mac OS X, donc dans certains "moments multiplateformes" je ne peux pas finir quelque chose, mais je vais essayer de fournir des informations complètes. Et plus: je ne prétends pas à la vérité dans le dernier cas et j'attends vos options.

Recharge en direct et support pour les préprocesseurs CSS

Pourquoi ai-je combiné ces deux choses différentes en une seule section? Tout cela à cause des spécificités de certains logiciels, dont je parlerai plus tard. Live reload (ou aperçu en direct), si quelqu'un ne le sait pas, c'est un aperçu du navigateur de ce que vous avez fait dans l'éditeur, sans avoir à actualiser la page, c'est-à-dire automatiquement. Avec le support des préprocesseurs CSS, je veux dire ajouter une syntaxe de SASS / SCSS, LESS, Stylus, ou tout ce que vous préférez utiliser dans Sublime Text 2, ainsi qu'organiser la compilation automatique de tout ce système de génération / surveillance, . En fait, tout ceci est combiné dans une section, non seulement pour la raison décrite ci-dessus, mais aussi parce que mon but (je pense, le vôtre aussi) était de faire en sorte que vous puissiez changer quelque chose, par exemple, en scss- fichier, enregistrez-le et consultez immédiatement le résultat dans le navigateur, c'est-à-dire, automatisez le processus de compilation et de mise à jour de la page. Nous avons donc une chaîne "enregistrer fichier"> "compiler"> "mise à jour", ce qui logiquement met tout cela dans une section de l'article.

Introduction

Afin d'installer, désinstaller et mettre à jour confortablement les plug-ins, Sublime Package Control est utilisé , son installation est très simple et est décrite sur cette page . Pratiquement tous les plug-ins dont vous avez besoin sont dans le contrôle de paquet, ils sont donc faciles à trouver ici . Je ne vous 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 paquets est maintenant la norme de facto pour Sublime Text 2.

Tous les plugins soumis sont hébergés sur GitHub, presque tous ont readme, ce qui est mieux lu. Décrire toutes les subtilités ici n'a pas de sens, car tout change, donc dans cet article je vais donner une brève description, et les détails sont parfaitement décrits par les auteurs des plug-ins.

Plugins de base

ZenCoding

ZenCoding a besoin de commentaires, n'est-ce pas? Lancé en 2008, pepelsbey, cet "accélérateur d'écriture de code" a permis d'économiser énormément de temps aux développeurs. Depuis lors, il a été implémenté en tant que plug-ins pour de nombreux éditeurs et IDE.

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

SublimeLinter

Ce plugin ajoute le support de peluches pour de nombreuses langues, y compris HTML, CSS et JavaScript. Pour de meilleures performances, installez node.js , lisez-en plus à ce sujet dans le readme sur GitHub . En général, c'est l'un des plugins, readme auquel il vaut mieux lire complètement.

SublimeCodeIntel

Approche les capacités de Sublime Text 2 aux capacités de l'IDE, en ajoutant "intelligence de code" et "smart autocomplete", en particulier la possibilité d'accéder rapidement à la déclaration, autocomplete pour import'ov et afficher des informations sur la fonction dans la ligne d'état.

Alignement

Ce plug-in de l'auteur de Sublime Package Control simplifie l'alignement des sections de code multi-lignes et multiples.

CSSComb

A propos de CSSComb peut être lu en détail sur le Habr . Cet outil utile brosse votre CSS, plaçant les propriétés dans l'ordre spécifié et les divisant en groupes.

HTML5 et jQuery

Il s'agit d'ensembles d'extraits de balises HTML5 et de méthodes jQuery, dont une liste complète peut être trouvée dans Outils> Extraits.

JsFormat

Plugin pour le formatage du code JS / JSON, en utilisant le service jsbeautifier.org et en ayant des paramètres plutôt flexibles. Formater la section sélectionnée du code ou le fichier entier s'il n'y a pas de sélection. Si le fichier * .js n'est pas implémenté, vérifiez-le avec précaution.

Minifier

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

Préfixe

Un must-have doit avoir pour ceux qui n'utilisent pas de préprocesseurs, et tout le reste sera également utile. Ajoute, si nécessaire, les préfixes du fournisseur (et même dans le bon ordre) en utilisant le service prefixr.com . Cela fonctionne simplement - écrire une propriété sans préfixe, appuyez sur une combinaison de touches et c'est prêt.

SideBarEnhancement

Comme son nom l'indique, ajoute quelques améliorations utiles à 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-papiers

Peut-être que cette fonctionnalité est préférable d'avoir dans l'ensemble du système d'exploitation, mais j'en ai assez dans l'éditeur. Le plugin se souvient de l'histoire du presse-papiers, de sorte que vous pouvez insérer non seulement le dernier fragment copié, mais l'un des précédents.

EncodingHelper

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 plug-in, mais il a d'autres options, par exemple, il sait comment avertir qu'un fichier ouvert avec un mauvais encodage peut être corrompu.

Placeholders

Avez-vous souvent besoin d'insérer du poisson dans le code? Pour tous les amoureux de lorem ipsum cet ensemble d'extraits est certainement utile. En plus du texte simple, il 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 forme l'interface de Sublime Text 2 dans le style natif. Il existe deux variantes de couleurs: Light et Dark, ainsi qu'un support pour les écrans Retina. Cependant, le thème est disponible pour trois systèmes d'exploitation.

Recharge en direct et support pour les préprocesseurs CSS

Ici tout est plutôt ambigu. D'une part, il existe un support pour recharger en direct et regarder / construire un système utilisant des plugins (le premier n'a jamais fonctionné pour moi), mais il existe plusieurs programmes distincts qui permettent de surveiller et de compiler des fichiers de différents préprocesseurs. Dans ce cas, les fonctionnalités qu'ils ont (en termes de capacités fournies par l'interface graphique), complètement différents, et pourtant différents coûts. Quelqu'un peut tout faire jusqu'à l'optimisation des images, mais quelqu'un ne sait pas combien, mais c'est gratuit. En général, tout se résume à trouver la meilleure option pour vous, dans lequel je vais essayer de vous aider ci-dessous.

Support de syntaxe

D'abord, oubliez les complexités et faites simplement ressortir la syntaxe pour les préprocesseurs dont nous avons besoin. Chacun a son propre plugin, donc tout ce que vous devez faire est de sélectionner le bon: LESS , SASS et SCSS , Stylus (ici, et le système de construction inclus).

Plugins Sublime Texte 2

Compilation automatique

Il est préférable de ne pas commencer directement avec l'ajout de systèmes de construction à l'éditeur, mais à partir du plug-in SublimeOnSaveBuild. Tout ce qu'il fait est de commencer à construire automatiquement (dans le menu, c'est Outils> Construire) pour le système de construction que vous avez sélectionné lorsque vous enregistrez le fichier.

En ce qui concerne l'ajout de Build Systems, tout est le même ici que la prise en charge de la syntaxe, choisissez la bonne: LESS-build , SASS Build (et, bien sûr, Compass ).

Recharge en direct

Avec cela en termes de plug-ins pour Sublime Text 2 n'est pas si rose, plus précisément il n'y a qu'un LiveReload (à ne pas confondre avec le programme ci-dessous), que je ne travaille pas en toute sécurité. Plus précisément, l'extension pour Chrome ne fonctionne pas (l'extension Safari n'a pas testé, et il n'y a pas d'autres navigateurs supportés), enfin, en général, elle n'a pas été mise à jour depuis longtemps. Peut-être que quelqu'un sait comment le cuisiner et le dire dans les commentaires, mais personnellement j'étais trop paresseux pour comprendre plus, alors je suis venu d'utiliser un programme séparé pour "visualisation en direct" et compilation.

Programmes individuels

LiveReload

Caractéristiques: LiveReload, d'abord et comme son nom l'indique, peut suivre les changements de fichiers et les mettre à jour dans le navigateur, et ensuite compiler automatiquement sinon tous, puis beaucoup: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript , Eco, SLIM, HAML, Jade. Pour se recharger en direct, vous devez installer l' extension incluse dans le navigateur , il existe des versions pour Safari, Chrome et Firefox.

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

Prix: La version pour Mac OS X coûte 9,99 $ dans l'App Store, il y a aussi un essai gratuit. Les versions pour Linux et Windows sont gratuites.

CodeKit

Caractéristiques: Ce programme fournit les fonctionnalités les plus étendues et, en général, l'interface graphique la plus pratique et fonctionnelle. Peut 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.

Cross-platform: Ce n'est pas le cas, le programme est uniquement pour Mac OS X.

Le prix est de 25 $. Il y a un essai gratuit.

Scout

Caractéristiques: Contrairement à d'autres programmes, Scout ne peut compiler que SASS et Compass, mais son interface graphique peut spécifier des modes de sortie, et c'est gratuit.

Cross-platform: Il existe des versions pour Windows et Mac OS X, cette fois la version pour Windows est pleine. Pour Linux, malheureusement, il n'y a pas de version.

Prix: gratuit.

Enfin

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

SublimeFileDiffs . Ajoute la fonction de comparaison de fichiers.

YUI-Compresseur . Un autre plugin pour la minisation JS et CSS, en utilisant l'outil éponyme de Yahoo !.

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