Sublime: Настройка

Настройки Sublime Text 3

Во-первых, рекомендуется все-таки использовать последнюю версию Sublime, т.е. 3 на данный момент, а не 2. Во-вторых, следует выставить ему правильные настройки. Вот пример моих:

{
	"auto_find_in_selection": true,
	"color_scheme": "Packages/User/Colorsublime/themes/idleFingers.tmTheme",
	"default_line_ending": "unix",
	"ensure_newline_at_eof_on_save": true,
	"fallback_encoding": "Cyrillic (Windows 1251)",
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"match_brackets_angle": true,
	"rulers":
	[
		80,
		120
	],
	"show_encoding": true,
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true
}

color_scheme - на ваш выбор, ignored_packages - системный, остальные настройки лучше просто скопировать и вставить в Preferences -> Settings - User.

Плагины

Emmet

Чудесный плагин для верстки. Например, он превращает строчку

#page>div.logo+ul#navigation>li*5>a{Item $}

по нажатию Tab в такой html-код:

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href="">Item 1</a></li>
		<li><a href="">Item 2</a></li>
		<li><a href="">Item 3</a></li>
		<li><a href="">Item 4</a></li>
		<li><a href="">Item 5</a></li>
	</ul>
</div>

Подробнее про Emmet

Alignment

Плагин для выравнивания строчек. По-умолчанию выравнивает по знаку =. Идем в настройки плагина и добаляем выравнивание по двоеточию (Preferences -> Package Settings -> Alignment -> Settings - User):

{
    "alignment_chars": ["=", ":"],
    "alignment_space_chars": ["="]
}

Теперь Вы можете выделить область в редакторе, нажать сочетание клавиш Ctrl + Alt + A и произойдет следующее:

Было:

var $fotorama = $('.fotorama');
var $form = $('form');
var $inputs = $form.find(':input');

var person = {
    name: 'John Doe',
    phone: '+7 921 9999999',
    creditCard: 'Visa'
};

Стало после 2х выравниваний:

var $fotorama = $('.fotorama');
var $form     = $('form');
var $inputs   = $form.find(':input');

var person = {
    name      : 'John Doe',
    phone     : '+7 921 9999999',
    creditCard: 'Visa'
};

DocBlockr

Незаменимый помощник в написании комментариев. Перед функцией или блоком кода следует написать /** и нажать Enter, а структуру комментария плагин напишет сам. Предположим у нас есть функция:

var sendSms = function sendSms(person, message) {
    // ...
};

На строчке перед ней вызываем DockBlockr и получаем следующее:

/**
 * [sendSms description]
 * @param  {[type]} person  [description]
 * @param  {[type]} message [description]
 * @return {[type]}         [description]
 */
var sendSms = function sendSms(person, message) {
    // ...
};

Остается только заполнить то, что внутри квадратных скобок, например:

/**
 * Функция отправки SMS одному человеку
 * @param  {Person}  person  объект класса Person, получатель
 * @param  {String}  message отправляемое сообщение
 * @return {Boolean}         флаг успешности отправки
 */