Sublime Text for frontend developer

Sublime Text is currently one of the most popular text editors used for web development, so you need to know its advantages and disadvantages. Instead of step by step describing all the features of Sublime Text, this article will introduce you to the most popular techniques and useful plugins to speed up development.

Syntax highlighting

Soon 2015 is coming, and a lot has changed in the web over the past few years - new features have appeared in CSS, new features and syntax have been introduced in JavaScript; There are also many languages ​​compiled into HTML, CSS and JS.
')
The following plugins will give you the best syntax highlighting. Even if you have installed plugins for the necessary languages, do not be lazy to get acquainted with this list - you may want to change some of them.

JavaScript Next is a plugin that highlights syntax better than standard JavaScript highlighter. In addition, this plugin supports features EcmaScript 6, such as modules, classes, generators, and more.

The CSS3 plugin provides highlighting for each feature from the CSS3 specification. This means that you can use any of the features of CSS3 - even those that are not yet fully implemented - and they will be correctly highlighted by the plugin.

Developers using Sass should install the SCSS or Sass plugins (depending on the syntax used). Pay attention to what kind of plugin you installed. A common mistake is to install the Sass plugin, but use the SCSS syntax and vice versa.



Of course, there are also plugins to highlight the syntax of Stylus and Less .

Do you write in CoffeeScript? Make sure you have the Better CoffeeScript plugin installed. It is important to use it, since the official CoffeeScript plugin is no longer supported by its developers. A plugin for syntax highlighting TypeScript is also available.

The Haml plugin extends the standard capabilities for working with Haml and also highlights code in other languages ​​written in a haml file: JS, CSS, Sass, and so on. The Slim and Jade plugins add syntax highlighting for these languages.

Plugins

Sublime owes much of its popularity to the community that has created such a large number of useful plugins. If you are a beginner, then know that plugins are managed through Package Control .
You can discuss the best plugins for Sublime Text all day (I hope that this is what you will do in the comments), but in this article we will look at the must-have plug-ins for the front-end.

Color highlighter

When working with style sheets, it is helpful to have some kind of visual representation of what a particular color looks like. Color Highlighter will scan your style sheet and highlight all colors, painting the text background in the color specified. It is also possible to customize the plugin so that it emphasizes the colors or sets the marker of the desired color to the left of the code.



Recently, support for Sass, Less and Stylus variables has been added to Color Highlighter, making this plugin suitable for almost any desktop environment.

Emmet

Virtually everyone knows about Emmet , and many have been using it since when it was called “Zen Coding”. However, I often see that developers are missing out on the rather useful features of this plugin.

HTML

Emmet is great for quickly writing markup. Just type css selectors for your markup, and hit tab. Do you use Jade, Slim or Haml? Emmet works with them as well as with HTML.



See some examples of using Emmet. Also do not forget to look at the cheat sheet with syntax , which describes all the possibilities for working with markup.

• element + tab creates an element and positions the cursor inside it.
  
  • span + tab → <span></span>
    
  
  
• element.className or element#ID + tab creates an element with the specified class or identifier.
  
  • span.hello + tab → <span class="hello"></span>
    
  • p.odd.warning + tab → <p class="odd warning"></p>
    
  • div#contact + tab → <div id="contact"></div>
    
  
  
• element>childElement + tab creates nested elements.
  
  • ul>li + tab → <ul><li></li></ul>
    
  
  
• [element*5] + tab creates the specified element as many times as specified.
  
  • p.hello*2 + tab → <p class="hello"></p><p class="hello"></p>
    
  
  

You can also use the $ symbol as a counter. Use $$ for a counter starting from zero.

li.item$*3 + tab →

 <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> 

Brackets are used to specify the attributes of the element, curly - to specify the content.

figure*2>img[src="dog$.jpg"]+figcaption{This is dog $} →

 <figure> <img src="" alt=""> <figcaption>This is dog 1</figcaption> </figure> <figure> <img src="" alt=""> <figcaption>This is dog 2</figcaption> </figure> 

CSS

Exploring Emmet's CSS capabilities is one of the best frontend investments. This will not only increase the speed of development, but will also help prevent often-made mistakes.

In CSS, emmet works with abbreviations resembling property / value pairs. There are no well-defined abbreviations, emmet works on the basis of the so-called fuzzy matching - it makes the choice of which property to use, based on what you entered.

Examples:

• posrel → position: relative;
• posab → position: absolute;
• fl → float:
• fr → float: right;
• db → display: block;
• dib → display: inline-block;
• tdn → text-decoration: none;
• c → color: #
• w → width:
• w100 → width: 100px;
• w100p → width: 100%;
• p → padding:
• p10 → padding: 10px;
• p10p → padding: 10%;
• bt1-s-red → border-top: 1px solid red;

You get the idea - it would be nice to train your brain so that you can use this technique on the fly instead of typing full property / value pairs.

Sublime linter

Code verification is a very important part of the development process. If you have never used linter before, then know that this is a tool to check the quality of the code. He checks the code for errors and the use of bad practices.

With Sublime Linter, you can easily check almost any code. As frontenders, we should check our javascript and, if possible, CSS. If you make a mistake in the code, Sublime Linter will highlight it with a small red circle.

Themes and color schemes

Still using the standard theme and color scheme? Probably should get acquainted with other themes and color schemes. There are two ways to change the appearance of the sublime. The color scheme changes the syntax highlighting colors, while the theme changes the color of interface elements such as tabs, sidebars and the like.

In the latest build of Sublime Text 3, it became possible to place various icons for files in the sidebar.

Check out some popular Sublime Text themes:

Solarized dark

Solarized is a fantastic theme that is available in many text editors. It has become the favorite standard theme of many developers.

Cobalt2

Cobalt2 is my own theme, which has been debugged and improved over the past five years. It is based on the original Cobalt theme and has many improvements. The emphasis in this topic is on purity and bright contrast.

Seti ui

A very young theme that has a dark design with an emphasis on blue.

Goto anything

If you switch to sublime from another text editor, then you are probably used to sidebar and file navigation from your old editor. Sublime introduces GoTo anything concept. In the simplest case, you can use it to open any file from your project folder. Just press ctrl + p, and the input field will open with a list of files. Enter the desired file and press enter. This search box supports fuzzy matching, so you don’t have to worry about the correct name or the correct path to the file.

In addition, GoTo anything supports specifying the line number in the file (jquery.js: 205), the symbol number (jquery.js: 205: 15), and the whole word (jquery.js@ajax), which allows you to quickly move to the desired functions, methods or selectors.

Your opinion

Sublime Text is full of useful features and plugins. They are so many that enough for a book !

Share your favorite plugins and tricks in the comments.