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

Cooking Sublime Text 2 for front-end

On this topic:


Sublime Text 2 FAQSublime Text 2 FAQ

It is not a secret for any experienced programmer or typesetter that a development environment customized for you (not in the sense of IDE, but more generally) is a vital necessity. There was a time when I was doing another layout in a virtually bare Notepad ++ on a single monitor, alternately opening up Photoshop, a browser and an editor. Today, in the era of "automation of everything", I find it hard to imagine how it was possible to work this way at all.

Sublime Text 2 is a popular, extensible, cross-platform text editor for which many plugins are written, if not for all occasions, then for many. In this post I will try to tell how from this constructor to put together a convenient front-end developer tool for working with HTML, CSS and JavaScript. A small disclaimer: I work on Mac OS X, so in some "cross-platform moments" I can not agree on something, but I will try to provide complete information. And yet: I do not pretend to the truth in the last resort and am waiting for your options

Live reload and CSS preprocessor support

Why do I combine two such different things into one section? All because of the specifics of some software, which I will discuss later. Live reload (or live preview), if suddenly someone does not know, this is viewing in the browser of what you did in the editor, without the need to refresh the page, that is, automatically. By supporting CSS preprocessors, I mean adding support for SASS / SCSS, LESS, Stylus syntax or anything else that you prefer to use to Sublime Text 2, as well as organizing automatic compilation of all this stuff (build / watch system) . In fact, all this is combined into one section, not only because of the reason described above, but also because my (I think yours too) goal was to make it possible to 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 the “save file”> “compile”> “update” chain, which quite logically puts all this in one section of the article.

Introduction

In order to comfortably install, remove and update plugins used by Sublime Package Control , its installation is very simple and described on this page . Almost all the plug-ins you may need are in Package Control, so it’s convenient to look for them here . I do not advise 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 everyone has a readme, which is better to read. Describing all the details here does not make sense, because everything changes, so in this article I will give a small description, and the authors themselves perfectly describe the details of the plug-ins.

Main plugins

ZenCoding

ZenCoding hardly needs comments, right? Launched in 2008 by pepelsbey, this “code writing accelerator” 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 ZenCoding plugin has a successor - Emmet . As suggested, it is already stable enough to use it.

Sublimelinter

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

SublimeCodeIntel

It brings the capabilities of Sublime Text 2 closer to the capabilities of the IDE by adding “code intelligence” and “smart autocomplete”, in particular, it adds the ability to quickly jump to the ad, autocomplete for import and display information about the function in the status bar.

Alignment

This plug-in from the author of Sublime Package Control makes it simple to align multi-line and multiple highlighted sections of code.

CSSComb

About CSSComb can be read in detail in Habré . This useful tool will brush your CSS by arranging properties in a given order and breaking them up into groups.

HTML5 and jQuery

These are sets of HTML5 tag snippets and jQuery methods, the full list of which can be found in Tools> Snippets.

Jsformat

JS / JSON code formatting plugin using jsbeautifier.org service and having quite flexible settings. Formats the selected section of code or the entire file if there is no selection. It does not check whether the file has the extension * .js, so you need to use it with caution.

Minifier

Minifier can minify JavaScript ( Google Closure Compiler or UglifyJS ) and CSS ( Reducisaurus ). The entire plug-in consists of two shortcut keys, one saves the result in the current file, and the second in a separate one with the name name.min.ext.

Prefixr

An unambiguous must have for those who do not use preprocessors, and everything else is also useful. Adds vendor prefixes (and even in the correct order), where appropriate, using the prefixr.com service. It works simply - write a property without prefixes, press the key combination and it’s done.

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 paste not only the last copied fragment, but also 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 plugin, but it has other options, for example, it can warn you that a file opened in the wrong encoding may be damaged.

Placeholders

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

Theme - Soda

This is my subjective recommendation to the owners of Mac OS X. The Soda theme creates 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 CSS preprocessor support

Here everything is rather ambiguous. On the one hand, there is support for live reload and watch / build system using plug-ins (the first one did not work for me), but there are several separate programs that, in addition to live reload, can monitor and compile various preprocessor files. At the same time, the functionality they have (in terms of the capabilities provided by the GUI) is completely different, and the cost is different. Someone can do everything up to image optimization, while others can’t do half, but for free. In general, it all comes down to choosing the best option for yourself, in which I will try to help you below.

Syntax support

First, let's forget about the difficulties and just make syntax highlighting for the preprocessors we need. Each has its own plugin, so all that is required is to choose the right one: LESS , SASS and SCSS , Stylus (here you will also find the build system).

Sublime Text 2 Plugins

Automatic compilation

It is better to start not with the direct addition of various build systems to the editor, but with the SublimeOnSaveBuild plugin. All that he does is to automatically start Build (in the menu this Tools> Build) for the Build System of your choice at the moment of saving the file.

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

Live reload

With this in terms of plugins for Sublime Text 2 is not so rosy, or rather there is only one LiveReload (not to be confused with the program below), which does not work well for me. More precisely, the extension for Chrome does not work (the extension for Safari has not been tested, but there is no support for other browsers), well, in general, it has not been updated for a long time. Maybe someone knows how to prepare it and will tell 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.

Separate programs

LiveReload

Features: LiveReload, firstly and as the name implies, can monitor file changes and update them in the browser, and secondly, automatically compile if not everything, then much: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript , Eco, SLIM, HAML, Jade. For the live reload itself, you need to install the attached extension in 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 Mac OS X version costs $ 9.99 on the App Store, and there is a free trial. Versions for Linux and Windows are free.

Codekey

Features: This program provides the most extensive features and, in general, the most convenient and functional GUI. Able to live reload without browser extensions, automatically compile Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and Compass; combine and minimize scripts, optimize images, etc.

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

Price: $ 25. There is a free trial.

Scout

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

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

Price: Free.

At last

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

SublimeFileDiffs . Adds the file comparison function.

YUI-Compressor . Another JS and CSS minification plugin that uses the same-name tool from Yahoo !.

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