Cooking Sublime Text 2 for front-end
It is not a secret for any experienced programmer or coder that a development environment customized by itself (not in the sense of IDE, but more generally) is a vital necessity. There was a time when I was doing the next layout in a virtually bare Notepad ++ on a single monitor, alternately opening 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.
')
To better understand where and what will be discussed, I will first present the structure of the article:
Introduction
A description of the main points, the necessary references, etc.
Plugins
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.
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 it. 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.
ZenCoding
ZenCoding hardly needs comments, right? Launched in 2008 by pepelsbey , this “coding accelerator” saved a terrible amount of developer time. Since then, implemented as plug-ins for many editors and IDEs.
Not so long ago, the ZenCoding plugin has a successor - Emmet . As suggested in the comments , 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 to the capabilities of the IDE by adding “code intelligence” and “smart autocomplete”, in particular, it adds the ability to quickly go 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 plugin is in two key combinations, 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.
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 draws up the Sublime Text 2 interface 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.
Here everything is rather ambiguous. On the one hand, there is support for live reload and watch / build system with plug-ins (the first one did not work for me), but there are several separate programs that, in addition to live reload, are able to 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.
To begin with, 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).
It describes the plugins that will be useful to you if you do not want to use any third-party programs, and prefer to do with one Sublime Text 2.
It is better not to start with the direct addition of various build systems to the editor, but with the SublimeOnSaveBuild plugin. All he does is to automatically run Build (in menu this Tools> Build) for the Build System you have selected at the time 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 ).
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 for me safely. 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.
As such, the relationship to Sublime Text 2 these programs do not have, but since not all are implemented with the help of plug-ins, many will prefer to use separate software for some functions.
Opportunities
LiveReload, firstly and as the name implies, knows how to 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 in the App Store, and there is a free trial. Versions for Linux and Windows are free.
Opportunities
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.
Opportunities
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 full version for Windows. For Linux, unfortunately, there is no version.
Price
Is free.
Personally, I chose LiveReload, despite the fact that CodeKit is more functional. I partially replaced this functionality with plugins for Sublime Text 2 (after all, this article is about Sublime), and I don’t need the rest (there are web services or I just don’t use it).
I think many people will be interested to learn about other variants of the “front-end development environment based on Sublime Text 2,” so I suggest sharing my plugin selections in the comments.
UPD. You can still organize Live edit using a plug-in for SublimeText 2 itself: use the plug-in described in the post in conjunction with the browser extension from LiveReload . There is also information that the dev version of the plugin works better. Thus, it is possible to do very fully without installing additional software, i.e., only plugins.
The comments mentioned that I did not write about the VCS and SFTP plugins. The fact is that this is needed either not by everyone, or is different (someone Git, someone SVN, someone does not need anything). Well, since all the plugins are named after the technologies themselves, the support of which they add, finding them is not difficult if necessary.
And finally, the list of plugins that are recommended in the comments (and the nicknames who made it, of course):
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.
')
To better understand where and what will be discussed, I will first present the structure of the article:
Introduction
A description of the main points, the necessary references, etc.
Plugins
- The main plugins - in this section we will discuss what, in my opinion, should be installed in most cases, in general must have.
- Additional plugins are simply useful extensions; here I will present what I liked, but this list in each particular case can specialize according to your tasks and preferences, so look at the analogs, look for something new, in general customize.
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 it. 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.
Plugins
Main plugins
ZenCoding
ZenCoding hardly needs comments, right? Launched in 2008 by pepelsbey , this “coding accelerator” saved a terrible amount of developer time. Since then, implemented as plug-ins for many editors and IDEs.
Not so long ago, the ZenCoding plugin has a successor - Emmet . As suggested in the comments , 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 to the capabilities of the IDE by adding “code intelligence” and “smart autocomplete”, in particular, it adds the ability to quickly go 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 plugin is in two key combinations, 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 draws up the Sublime Text 2 interface 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 with plug-ins (the first one did not work for me), but there are several separate programs that, in addition to live reload, are able to 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
To begin with, 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).
Plugins
It describes the plugins that will be useful to you if you do not want to use any third-party programs, and prefer to do with one Sublime Text 2.
Automatic compilation
It is better not to start with the direct addition of various build systems to the editor, but with the SublimeOnSaveBuild plugin. All he does is to automatically run Build (in menu this Tools> Build) for the Build System you have selected at the time 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 for me safely. 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
As such, the relationship to Sublime Text 2 these programs do not have, but since not all are implemented with the help of plug-ins, many will prefer to use separate software for some functions.
LiveReload
Opportunities
LiveReload, firstly and as the name implies, knows how to 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 in the App Store, and there is a free trial. Versions for Linux and Windows are free.
Codekey
Opportunities
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
Opportunities
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 full version for Windows. For Linux, unfortunately, there is no version.
Price
Is free.
Personally, I chose LiveReload, despite the fact that CodeKit is more functional. I partially replaced this functionality with plugins for Sublime Text 2 (after all, this article is about Sublime), and I don’t need the rest (there are web services or I just don’t use it).
I think many people will be interested to learn about other variants of the “front-end development environment based on Sublime Text 2,” so I suggest sharing my plugin selections in the comments.
UPD. You can still organize Live edit using a plug-in for SublimeText 2 itself: use the plug-in described in the post in conjunction with the browser extension from LiveReload . There is also information that the dev version of the plugin works better. Thus, it is possible to do very fully without installing additional software, i.e., only plugins.
The comments mentioned that I did not write about the VCS and SFTP plugins. The fact is that this is needed either not by everyone, or is different (someone Git, someone SVN, someone does not need anything). Well, since all the plugins are named after the technologies themselves, the support of which they add, finding them is not difficult if necessary.
And finally, the list of plugins that are recommended in the comments (and the nicknames who made it, of course):
- Bektimirov : LiveCSS . Adds a visual representation of the colors specified in the CSS.
- CyberAP : SublimeFileDiffs . Adds the file comparison function.
- roman01la : YUI-Compressor . Another JS and CSS minification plugin that uses the same-name tool from Yahoo !.
- JCHouse : SublimeTODO . It is useful to use notes in the comments.
Source: https://habr.com/ru/post/154667/
All Articles