Prepare Sublime Text 2 for front-end

Live reload and support for CSS preprocessors

Why did I combine these two different things into one section? All because of the specifics of some software, which I'll talk about later. Live reload (or live preview), if someone does not know it, it's a browser preview of what you did in the editor, without having to refresh the page, that is, automatically. With support for CSS preprocessors, I mean adding a syntax of SASS / SCSS, LESS, Stylus, or whatever else you prefer to use in Sublime Text 2, as well as organizing the automatic compilation of all this build / watch system, . In fact, all this is merged into one section, not only because of the reason described above, but also because my (I think, yours too) goal was to make it so that you could change something, for example, in scss- File, save it and immediately see the result in the browser, i.e. automate the process of compiling and updating the page. So we have a chain "save file"> "compile"> "update", which logically puts all this into one section of the article.

Introduction

In order to comfortably install, remove and update plug-ins, Sublime Package Control is used , its installation is very simple and is described on this page . Almost all the plug-ins that you may need are in the Package Control, so they are convenient to search here . I do not advise you to ignore this plugin and put something manually, unless you have a special reason for this. We can say that Package Control is now the de facto standard for Sublime Text 2.

All submitted plugins are hosted on GitHub, almost all have readme, which is better read. To describe all the subtleties here does not make sense, because everything changes, so in this article I will give a brief description, and the details are perfectly described by the authors of the plug-ins.

Basic Plugins

ZenCoding

ZenCoding hardly needs comments, right? Launched in 2008, pepelsbey, this "code-writing accelerator" has saved a terrible amount of developer time. Since then it has been implemented as plug-ins for many editors and IDEs.

Not so long ago, the plugin ZenCoding appeared heir - Emmet . As suggested, it is already sufficiently stable to use it.

SublimeLinter

This plugin adds lint support for many languages, including HTML, CSS and JavaScript. For better work, install node.js , read more about this in the readme on GitHub . In general, this is one of the plugins, readme to which it is better to read completely.

SublimeCodeIntel

Approaches the capabilities of Sublime Text 2 to the capabilities of the IDE, adding "code intelligence" and "smart autocomplete", in particular adds the ability to quickly go to the ad, autocomplete for import'ov and display information about the function in the status line.

Alignment

This plug-in from the author of Sublime Package Control makes simple alignment of multi-line and multiple allocated code sections.

CSSComb

About CSSComb can be read in detail on the Habr . This useful tool brushes your CSS, placing the properties in the specified order and splitting them into groups.

HTML5 and jQuery

These are sets of snippets of HTML5 tags and jQuery methods, a complete list of which can be found in Tools> Snippets.

JsFormat

Plugin for JS / JSON code formatting, using the jsbeautifier.org service and having rather flexible settings. Format the selected section of the code or the entire file if there is no selection. Checking whether the file has the extension * .js does not perform, so use it with care.

Minifier

Minifier can minify JavaScript ( Google Closure Compiler or UglifyJS ) and CSS ( Reducisaurus ). The whole plug-in consists of two key combinations, one preserves the result in the current file, and the second plug-in is stored in a separate file named name.min.ext.

Prefixr

A must-have must have for those who do not use preprocessors, and all the rest will also come in handy. Adds, where necessary, vendor prefixes (and even in the correct order) using the prefixr.com service. It works simply - write a property without prefixes, press a combination of keys and is ready.

SideBarEnhancement

As the name implies, adds some useful improvements to the sidebar, for example, the context menu item of the sidebar "Open with ...", which allows you to open the file in a third-party program.

Additional plugins

Clipboard history

Perhaps this functionality is better to have in the entire OS, but I have enough of it in the editor. The plugin remembers the history of the clipboard, so you can insert not only the last copied fragment, but any of the previous ones.

EncodingHelper

Among other things, it displays the encoding of the open file in the status bar. In general, this is the only reason I installed this plug-in, but it has other options, for example, it knows how to warn that a file opened in the wrong encoding can be corrupted.

Placeholders

Do you often have to insert fish into the code? To all lovers of lorem ipsum this set of snippets is definitely useful. In addition to simple text, he can insert paragraphs, lists, pictures, etc.

Theme - Soda

This is my subjective recommendation to owners of Mac OS X. The Soda theme forms the interface of Sublime Text 2 in a native style. There are two color variations - Light and Dark, as well as support for Retina displays. However, the theme is available for three operating systems.

Live reload and support for CSS preprocessors

Here everything is rather ambiguous. On the one hand, there is support for live reload and watch / build system using plugins (the first one has never worked for me), but there are several separate programs that, besides live reload, can monitor and compile files of various preprocessors. In this case, the functional they have (in terms of capabilities provided by the GUI), completely different, and yet different cost. Someone knows how everything up to the optimization of images, and someone does not know how much, and half, but for free. In general, it all comes down to finding the best option for yourself, which I'll try to help you with below.

Syntax support

First, forget about the complexities and just make syntax highlighting for the preprocessors we need. Each has its own plug-in, so all you need to do is choose the right one: LESS , SASS and SCSS , Stylus (there is also a build system in the kit).

Plugins Sublime Text 2

Automatic compilation

It's better not to start directly with adding build systems to the editor, but from the plug-in SublimeOnSaveBuild. All that it does is to automatically start Build (in the menu it's Tools> Build) for the Build System you selected at the time the file was saved.

As for adding Build Systems, everything is the same here as syntax support, choose the right one: LESS-build , SASS Build (and, of course, Compass ).

Live reload

With this in terms of plug-ins to Sublime Text 2 is not so rosy, more precisely there is only one LiveReload (not to be confused with the program below), which I do not work safely. More specifically, the extension for Chrome does not work (Safari extension did not test, but there are no other browsers support), well, it has not been updated in a long time. Perhaps someone knows how to cook it and tell it in the comments, but personally I was too lazy to understand more, so I came to use a separate program for "live viewing" and compilation.

Individual Programs

LiveReload

Features: LiveReload, first and as the name implies, can keep track of file changes and update them in the browser, and secondly, automatically compile if not all, then much: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript , Eco, SLIM, HAML, Jade. For live reload itself, you need to install the included extension to the browser , there are versions for Safari, Chrome and Firefox.

Cross-platform: In general, the program for Mac OS X. There is a version for Windows, but today it is a pre-alpha version. For Linux it is suggested to use guard-livereload .

Price: The version for Mac OS X costs $ 9.99 in the App Store, there is also a free trial. Versions for Linux and Windows are free.

CodeKit

Features: This program provides the most extensive features and, in general, the most convenient and functional GUI. Can live reload without browser extensions, automatically compile Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and Compass; Combine and minify scripts, optimize images, and so on.

Cross-platform: It's not, the program is only for Mac OS X.

The price: $ 25. There is a free trial.

Scout

Features: Unlike other programs, Scout can only compile SASS and Compass, but its GUI can specify Output Modes, and it is free.

Cross-platform: There are versions for Windows and Mac OS X, this time the version for Windows is full. For Linux, unfortunately, there is no version.

Price: Free.

Finally

LiveCSS . Adds a visual display of the colors specified in CSS.

SublimeFileDiffs . Adds the file comparison function.

YUI-Compressor . Another plugin for the JS and CSS miniseries, using the eponymous tool from Yahoo !.

SublimeTODO . It is useful to use notes in the comments.