Обучайся бесплатно с WAYUP Premiere сегодня вечером

Что за сублимация?

SublimeText 3 - мощный текстовый редактор со встроенной подсветкой синтаксиса, ориентирован на достаточно большое количество языков программирования (в том числе HTML, CSS и JS). Лицензия у этого продукта условно-бесплатная, то есть пользоваться им можно, но есть небольшой недостаток: 1 раз (после кажого запуска программы, на 5-ом сохранении) SublimeText 3 просит зарегистрировать его. Сам редактор написан на популярном языке Python. Главным конкурентом по отношению к SublimeText является Notepad++. В SublimeText, как и в Notepad++, можно устанавливать плагины, чем мы и будем сегодня заниматься.

Настройка SublimeText 3

Прежде чем устанавливать полезные плагины для редактора, необходимо установить так называемый Package Control. Для этого пройдем по следующему пути: View -> Show console... и введем в консоли следующий запрос:

import urllib.request,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

После этого подождем несколько секунд... и Package Control готов к использованию!

Теперь устанавливим необходимые плагины. Чтобы сделать это, необходимо открыть окно Command Pallete... по пути: Tools -> Command Pallete (или через сочетание клавиш: Ctrl+Shift+P) и в окно ввода ввести команду install package. После этого - нажать Enter, а затем - наименование нужного плагина.

Полезные плагины для front-end-разработки

1. Emmet
Наверняка вы уже наслышаны об этом плагине, который может сократить время разработки в разы. С помощью него вы, в буквальном смысле этого слова, сможете создать HTML-сайт всего за 20-30 символов! Как работает данный плагин я здесь объяснять не буду, т.к. мануалов по этому вопросу в сети довольно много - достаточно погуглить.

2. BracketHighlighter
Как же сложно кодить, когда в коде чрезмерно много скобок (неважно каких: круглых, фигурных, квадратных, угловых) . Теперь этого можно не боятсья! BracketHighlighter сможет показать места открытия и закрытия скобок, а в HTML он будет показывать места открытия и закрытия тэга. Полезный плагин, двумя словами.

3. AutoFileName
С помощью этого плагина вы сможете прописывать ссылки на внешние источники вдвое быстрее.

4. ColorPicker
Не знаете, какой подобрать цвет для текста? Или для фона блока? Не беда! ColorPicker поможет в этом!

5. CSSComb
Этот плагин приведет ваш CSS-код к более приятному для восприятия стилю кода.

Резюме

Конечно же, этот список можно продолжать бесконечно, однако, на мой взгляд, описанные плагины прекрасно подойдут для качественной front-end-разработки с помощью SublimeText 3. Особенно, если вы уже начали использовать секрет быстрого написания CSS-кода.

До встречи, друзья!

Как вам материал?