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

Prepare Sublime Text 2 for front-end

On this topic:


Sublime Text 2 FAQSublime Text 2 FAQ

It's no secret for any experienced programmer or layout designer that the development environment (not in the sense of IDE, but more generally) is a vital necessity. There was a time when I was making another layout in practically bare Notepad ++ on a single monitor, opening the Photoshop, the browser and the editor one by one. Today, in the era of "automation of everything", it's hard for me to imagine how it was possible to work like this 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'll try to tell you how to create a convenient front-end developer tool for working with HTML, CSS and JavaScript from this designer. A small disc-size: I work on Mac OS X, so in some "cross-platform moments" I can not finish something, but I'll try to provide full information. And more: I do not pretend to the truth in the final instance and I wait for your options.

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 somebody does not know, it's a browser preview of what you did in the editor, without having to refresh the page, that is, automatically. With the support of 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 integrated 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, uninstall and update plug-ins, Sublime Package Control is used , its installation is very simple and is described on this page . Virtually all the plug-ins that you may need are in the Package Control, so they are easy to find 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, does it? 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 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 performance, 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 declaration, 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 dividing 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 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 implement, so use it with caution.

Minifier

Minifier can minify JavaScript ( Google Closure Compiler or UglifyJS ) and CSS ( Reducisaurus ). The whole plug-in consists of two keyboard shortcuts, one saves the result in the current file, and the second is 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 key combination and it's 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 the 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 can do everything right up to the optimization of images, but someone does not know how much and half, but for free. In general, it all comes down to finding the best option for yourself, in which I will try to help you below.

Syntax support

First, forget about the complexities and just make syntax highlighting for the preprocessors we need. Each has its own plugin, so all you need to do is select the right one: LESS , SASS and SCSS , Stylus (here, and the build system included).

Plugins Sublime Text 2

Automatic compilation

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

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 precisely, the extension for Chrome does not work (the Safari extension did not test, and there are no other browsers support), well, in general it has not been updated for 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 suggests, 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 is $ 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.

At last

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

SublimeFileDiffs . Adds file comparison function.

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

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