Sublime Text для фронтэнд-разработчика

Original author: Wes Bos
  • Translation


Sublime Text на данный момент является одним из самых популярных текстовых редакторов, используемых для веб-разработки, поэтому надо знать его преимущества и недостатки. Вместо того, чтобы шаг за шагом описать все фичи Sublime Text, эта статья познакомит вас с самыми популярными приёмами и полезными плагинами, позволяющими ускорить разработку.

Подсветка синтаксиса


Скоро наступает 2015 год, и за последние несколько лет в вебе изменилось очень многое — в CSS появились новые возможности, в JavaScript представили новую функциональность и синтаксис; также появилось множество языков, компилируемых в HTML, CSS и JS.

Следующие плагины обеспечат вам наилучшую подсветку синтаксиса. Даже если у вас установлены плагины для нужных языков, не поленитесь ознакомиться с этим списком — возможно, вы захотите поменять некоторые из них.

JavaScript Next — плагин, подсвечивающий синтаксис лучше, чем стандартный JavaScript-хайлайтер. К тому же этот плагин поддерживает фичи EcmaScript 6, такие как модули, классы, генераторы и многое другое.

Плагин CSS3 обеспечивает подсветку для каждой фичи из спецификации CSS3. Это значит, что вы можете использовать любые возможности CSS3 — даже те, которые реализованы ещё не в полной мере — и они будут корректно подсвечены плагином.

Разработчики, использующие Sass, должны установить плагины SCSS или Sass (в зависимости от используемого синтаксиса). Обратите внимание на то, какой именно плагин вы установили. Распространённая ошибка — установить плагин Sass, но при этом использовать синтаксис SCSS, и наоборот.



Разумеется, также существуют плагины для подсветки синтаксиса Stylus и Less.

Пишете на CoffeeScript? Убедитесь, что у вас установлен плагин Better CoffeeScript. Важно использовать именно его, так как официальный плагин CoffeeScript больше не поддерживается его разработчиками. Также доступен плагин для подсветки синтаксиса TypeScript.

Плагин Haml расширяет стандартные возможности для работы с Haml и подсвечивает также код на других языках, записанный в haml-файле: JS, CSS, Sass и так далее. Плагины Slim и Jade добавляют возможность подсветки синтаксиса этих языков.

Плагины


Sublime во многом обязан своей популярностью сообществу, которое создало такое большое количество полезных плагинов. Если вы — новичок, то знайте, что управление плагинами производится через Package Control.
Можно весь день обсуждать лучшие плагины для Sublime Text (я надеюсь, что именно этим вы и займётесь в комментариях), однако в этой статье мы рассмотрим must-have плагины для фронтэндера.

Color Highlighter


При работе с таблицами стилей полезно иметь какое-то наглядное представление того, как выглядит тот или иной цвет. Color Highlighter будет сканировать вашу таблицу стилей и подсвечивать все цвета, закрашивая фон текста в тот цвет, который указан. Также есть возможность настроить плагин так, чтобы он подчёркивал цвета или ставил маркер нужного цвета слева от кода.



Недавно в Color Highlighter была добавлена поддержка Sass, Less и Stylus переменных, благодаря чему этот плагин становится пригодным практически для любого рабочего окружения.

Emmet


Практически все знают об Emmet, и многие его используют ещё с тех пор, когда он назывался «Zen Coding». Однако, я часто вижу, что разработчики упускают из вида довольно полезные возможности этого плагина.

HTML


Emmet великолепен для быстрого написания разметки. Просто напечатайте css-селекторы для нужной вам разметки, и нажмите tab. Используете Jade, Slim или Haml? Emmet работает с ними так же хорошо, как и с HTML.

Emmet

Посмотрите немного примеров использования Emmet. Также не забудьте посмотреть шпаргалку по синтаксису, в которой описаны все возможности для работы с разметкой.

  • element + tab создаёт элемент и позиционирует курсор внутри него.
    • span + tab<span></span>

  • element.className или element#ID + tab создаёт элемент с указанным классом или идентификатором.
    • 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 создаёт вложенные элементы.
    • ul>li + tab<ul><li></li></ul>

  • [element*5] + tab создаёт указанный элемент столько раз, сколько указано.
    • p.hello*2 + tab<p class="hello"></p><p class="hello"></p>



Также вы можете использовать символ $ в качестве счётчика. Используйте $$ для счётчика, начинающего отсчёт с нуля.

li.item$*3 + tab

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


Квадратные скобки используются для указания атрибутов элемента, фигурные — для указания контента.

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


Изучение возможностей Emmet в CSS — это одна из лучших инвестиций для фронтэндера. Это не только повысит скорость разработки, но и поможет предотвратить часто совершаемые ошибки.

В CSS emmet работает при помощи сокращений, напоминающих пары свойство/значение. Нет чётко определённых сокращений, emmet работает на основе так называемого fuzzy matching — он делает выбор, какое свойство использовать, на основе того, что вы ввели.

Примеры:

  • 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;


Вы поняли идею — неплохо бы натренировать ваш мозг, чтобы вы могли на лету использовать эту технику вместо печатания полных пар свойство/значение.

Sublime Linter


Проверка кода является весьма важной частью процесса разработки. Если вы никогда раньше не использовали linter, то знайте, что это инструмент для проверки качества кода. Он проверяет код на ошибки и использование плохих практик.

С помощью Sublime Linter вы можете легко проверить практически любой код. Как фронтэндеры, мы должны проверять наш JavaScript и, по возможности, CSS. Если вы совершите ошибку в коде, Sublime Linter подсветит её небольшим красным кружком.

Sublime Linter

Темы и цветовые схемы


Всё ещё используете стандартную тему и цветовую схему? Наверное, стоит ознакомиться с другими темами и цветовыми схемами. Есть два пути поменять внешний облик саблайма. Цветовая схема меняет цвета подсветки синтаксиса, в то время как тема меняет цвет элементов интерфейса, таких как вкладки, сайдбар и тому подобное.

В последней сборке Sublime Text 3 появилась возможность разместить в сайдбаре разные иконки для файлов.

Посмотрите несколько популярных тем для Sublime Text:

Solarized Dark


Solarized — это фантастическая тема, которая доступна во многих текстовых редакторах. Она стала любимой стандартной темой многих разработчиков.

Solarized Dark

Cobalt2


Cobalt2 это моя собственная тема, которая отлаживалась и совершенствовалась на протяжении пяти последних лет. Она основана на оригинальной теме Cobalt и имеет множество улучшений. Акцент в этой теме сделан на чистоте и ярком контрасте.

Cobalt2

Seti UI


Весьма молодая тема, имеющая тёмный дизайн с акцентом на синий цвет.

Seti UI

GoTo anything


Если вы переходите на саблайм с другого текстового редактора, то вы наверняка привыкли к сайдбару и навигации по файлам из вашего старого редактора. Sublime представляет концепт GoTo anything. В простейшем случае вы можете использовать его, чтобы открыть любой файл из папки вашего проекта. Просто нажмите ctrl+p, и откроется поле ввода со списком файлов. Введите навзание нужного файла и нажмите enter. Это поле поиска поддерживает fuzzy matching, так что вам не придётся беспокоиться о правильности набранного названия или о правильном пути к файлу.

Кроме того, GoTo anything поддерживает указание номера строки в файле (jquery.js:205), номера символа (jquery.js:205:15), и целого слова (jquery.js@ajax), что позволяет быстро переходить к нужным функциям, методам или селекторам.

GoTo anything

Ваше мнение


Sublime Text полон полезных функций и плагинов. Их столько, что хватит на книгу!

Поделитесь в комментариях своими любимыми плагинами и приёмами.
Share post

Similar posts

Comments 46

    +23
    И вот уже два года, что я пользуюсь Sublime, статьи про него абсолютно однотипны. Один и тот же набор плагинов с вариациями. А я все жду, когда же кто-нибудь запилит нормальную навигацию на клавиатуре по дереву файлов слева. Когда же портируют NerdTree?
      +2
      Кстати говоря, интересен вопрос, ведётся ли сейчас работа над следующей версией саблайма? А то последний стабильный билд был выложен 29 августа, и третья версия до сих пор в бете.
        0
        А еще интереснее, что билд, выложенный 29 августа, не был анонсирован ни в блоге, ни в твиттере. А предыдущий был только в декабре прошлого года.
          +2
          Читал у них на форуме, что сейчас проект пилят только 2 человека, и то только один из них программирует. Третий саблайм он решил дописать в одиночку, а на четвертый будет набираться команда.
          Вообще самое время открыть проект на гитхабе и писать дальше сообществом. Нет смысла строить из него платную проприетарщину, когда уже есть достойные конкуренты.
            –7
            Sublime мертв — да здравствуют Atom и Brackets.
              +5
              Да здравствуюет Atom, размером c полноценную IDE и тормозящий на 8 ядрах.
                +1
                brackets и atom построены на базе chromium и тормозят дико. У Brackets правда есть преимущество — плагин который позволяет разбирать на запчасти PSD. У atom есть пара маленьких плюсов, один из которых хоткеи почти 1 в 1 как в sublime text. А в целом и тот и другой печаль и боль.
                  0
                  Не замечал тормозов в Brackets.
              +3
              Переключитесь на dev версию, последний билд 16 октября www.sublimetext.com/3dev
                0
                А как быть с этим:
                Sublime Text 3 dev builds are currently available to registered users only.
                ?
                  0
                  Но ссылка на скачивание то есть)
                    –2
                    — BEGIN LICENSE — Andrew Weber
                    Single User License
                    EA7E-855605
                    813A03DD 5E4AD9E6 6C0EEB94 BC99798F
                    942194A6 02396E98 E62C9979 4BB979FE
                    91424C9D A45400BF F6747D88 2FB88078
                    90F5CC94 1CDC92DC 8457107A F151657B
                    1D22E383 A997F016 42397640 33F41CFC
                    E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
                    5CDB7036 E56DE1C0 EFCC0840 650CD3A6
                    B98FC99C 8FAC73EE D2B95564 DF450523
                    — END LICENSE ------
                0
                А чем не подходит ctrl+p и ввести имя файла? Довольно удобно.

                К слову, сам перешел с webstorm (ну, ладно, практически перешел), по причине быстродействия.
                  0
                  Я видел FileBrowser, но я так и не смог им пользоваться.
                    0
                    SidebarEnhancements рулят, но не полностью.
                    Для перемещения по дереву и открывания директорий использую:
                     //Vim-like navigation in sidebar-tree
                        { 
                            "keys": ["h"], "command": "move", "args": {"by": "characters", "forward": false}, 
                            "context": [ {"key": "control", "operand": "sidebar_tree"} ]
                        },
                        {
                            "keys": ["j"], "command": "move", "args": {"by": "lines", "forward": true}, 
                            "context": [ {"key": "control", "operand": "sidebar_tree"} ]
                        },
                        { 
                            "keys": ["k"], "command": "move", "args": {"by": "lines", "forward": false}, 
                            "context": [ {"key": "control", "operand": "sidebar_tree"} ]
                        },
                        { 
                            "keys": ["l"], "command": "move", "args": {"by": "characters", "forward": true}, 
                            "context": [ {"key": "control", "operand": "sidebar_tree"} ]
                        },
                    // Копирование файлов
                       { 
                            "keys": ["y"], "command": "side_bar_copy", "args": {"paths": []}, 
                            "context": [ {"key": "control", "operand": "sidebar_tree"} ]
                        },
                       // Удаление файлов
                       { 
                            "keys": ["d"], "command": "side_bar_delete", "args": {"paths": []}, 
                            "context": [ {"key": "control", "operand": "sidebar_tree"} ]
                        }
                    


                    Однако трюк с копированием и удалением не работает для директорий, только для файлов. Естественно навигация hjkl включается только после того, как TreeView получит фокус.
                  0
                  Пользуюсь всего месяц Sublime Text 2, подскажите, пожалуйста:

                  1. Есть ли какой-то более удобный способ подключений по ftp/sftp (у меня сейчас ввиде плагина Files -> SFTP/FTP -> Setup Server; Browse connection etc… Например в notepad++ очень удобное это реализовано.

                  2. При использование какого либо стороннего менеджера ftp (например filezilla), правой кнопкой — открыть с помощью и при открытии каждый новый файл запускаем собственную программу, а хотелось бы в новой вкладке.

                  3. При первом открытии файла с расширение php указал программу по дефолту Sublime Text, но при использование filezilla или другого ftp менеджера предлагает использовать стандартный текстовый редактор. Sublime Text можно выбрать только через меню «открыть с помощью» — что я сделал не так?

                  Спасибо.
                    +1
                    1.Зачем через меню? Просто Ctrl+Shift+P -> Browse Server и т.д.
                    2. FileZilla -> Настройки -> Правки файлов -> Не использовать редактор по умолчанию, использовать ассоциации файлов
                    3. Решается после 2.
                      +1
                      Спасибо, но:

                      1. Все равно неудобно. Хотелось бы иметь что-то по типу как в notepad++.
                      3. Не решилось. Открывает каждый файл в новой программе, а не вкладке
                        0
                        Кому как, мне нравится с клавиатуры, с notepad++ не работал, как там незнаю.
                        Насчет открытия файлов в новой вкладке, попробуйте в настройках ST open_files_in_new_window поставить false
                      0
                      Всё ниже Вам правильно рассказали, но позвольте посоветовать: при разработке гораздо проще вообще исключить FTP из этой цепочки, работайте с локальным сервером. Есть куча готовых решений типа (для win) OpenServer или Denwer. Связка «локальный сервер + live.js» упрощает жизнь в разы.
                        +1
                        мне нравится использование winscp, умеет как фтп так и sftp, просто выставляете сублайм внешним редактором и по f4 файл копируется в темп и открывается на редактирование при каждом сохранение скидывается назад. Минус нет навигации в самом сублайме, зато более стабильно когда связь обрывается.
                          0
                          Порядок работы через WinSCP всегда очень нравился. Очень радовало, что можно просто открыть файл как с локального компьютера и отредактировать. Именно этой простоты не хватало при работе с саблаймом из под Ubuntu. Но для нее нашелся другой способ, не менее удобный — плагин SFTP для Sublime. Тут тоже все удобно и есть дерево файлов. Если вам оно нужно — то советую попробовать этот плагин, если ранее с ним не сталкивались.
                        0
                        Хорошо бы JavaScript Next-ом подменить стандартный JavaScript.tmLanguage. Стандартный уж очень вольно иногда трактует синтаксис.
                        +1
                        FakeImg иногда оказывается полезен.
                          0
                          Попробуйте EasyMotion, не пожалеете.
                            +2
                            Как по мне вот самая классная тема kkga.github.io/spacegray для sublime. Base16 самый нормальный набор цветов для глаза.
                              0
                              Жалко Netbeans медленно развивается. Сублимы и Брекетсы — это конечно хорошо для фронтенда и яваскрипта, но для всяких php-шников они плохо годятся. А PhpStorm тоже в паре простых вещей уступает нетбинсу, хотя и развивается хорошо.
                                0
                                Каких например?
                                  0
                                  Там была пара банальных вещей, которые мне сильно не понравились, и которые хорошо работают в Нетбинсе.

                                  Вкладки в нетбинсе реализованы в несколько раз удобнее. Текущая реализация вкладок в PHPStorm мне совершенно не нравится: ни режим по-умолчанию, когда они отображаются все сразу; ни второй режим, когда вкладки помещены в одном горизонтальном списке, он ближе к нетбинсу, но на деле оказался каким-то глючным. И также, что мне во вкладках не понравилась — это отсутствие возможности тасовать их через горячие клавиши (в нетбинсе за это отвечают кнопки ctrl+shift+alt+[left|right], чем я часто пользуюсь).

                                  Что-то там было еще, но уже более мелкое по неудобству… Сейчас уже не помню) В общем, поработал я несколько дней в PHPStorm'е, да и вернулся обратно в Нетбинс) Он конечно не такой красивый, но основную задачу он всё равно очень хорошо выполняет, автодополнение PHP-кода работает как надо, быстрый поиск по классам, быстрый переход к файлу в дереве, быстрый поиск по файлам, работа с Git — в общем, все основные вещи, которые мне нужны от IDE, он делает, и очень даже хорошо. Поэтому я и остаюсь до сих пор на нём.
                                    0
                                    Вспомнил, что еще было, и это тоже связано с вкладками)
                                    В последнем Нетбинсе для вкладок можно включить отображение в заголовке названия папки, в которой лежит файл.
                                    В PHPStorm тоже есть эта функция, но работает она, опять же, как-то черезчур интеллектуально: родительская папка появляется только тогда, когда открыто два файла с одинаковым именем. А мне не надо, чтобы папка отображалась только в этом случае, мне надо чтобы всегда) Потому что так намного быстрее понимаешь, что это за файл у тебя открыт… Поэтому еще вернулся обратно в Нетбинс.
                                    0
                                    Вот уже как год пересел с Sublime на Storm, в последнем души не чаю. Просто нужно заставить себя принять идеологию проектов и всё пойдёт как по маслу. Сублайм остался в качестве продвинутого блокнота.
                                    +1
                                    Читал эту статью в оригинале. Тут же установил CSS3, т.к. поднадоело руками вбивать CSS3 свойства. Но увы… в SCSS новые свойства не подхватились :(

                                    А ещё… очень удручает текущая ситуация с ST3. К примеру баг-трекер их… я так понял, он даже не официальный :( Меня очень раздражают баги в ST3, связанные с кривой поддержкой раскладок клавиатуры и локалей отличных от английской. Взять тот же поиск по файлу. Не работает поиск без учёта регистра. Очень сильно мешает в некоторых ситуациях. Или взять те же горячие клавиши… Пришлось продублировать уже десятка 3 на русский вариант. Да и вообще багов хватает.

                                    Если то, что написано в комментариях выше, про то, что редактор развивается одним единственным человеком, то я думаю, пока всё… не очень хорошо :(
                                      +1
                                      Блин, после пары лет разработки в виме, попытка попробовать поюзать sublime text 2 закончилась полным фиаско: автоматически руки тянутся сделать y5y/d5d и.т.д.
                                        0
                                        vintage, vintageous вам в помощью
                                          +1
                                          А зачем тогда ST?
                                        +1
                                        Где-то год, наверное, сижу на ST — и меня не покидает чувство неудовлетворения.
                                        Сам по себе вроде такой аккуратный, красивый, фишки прикольные.
                                        Но плагины… кто в лес, кто по дрова. Одни какие-то недопиленные, другие непонятно как заставить работать, третьи непонятно куда и зачем ставятся (под Виндой, во всяком случае), четвертые вроде как и работают, но странноватым образом.

                                        Вот сейчас приглянулась тема Seti UI, решил попробовать. Так она зачем-то переколбасила всё меню цветовых тем, всё что было раньше засунула в подпапку, а рядом — отдельную папку для себя любимой, а в ней еще вложенную подпапку, и только внутри темы. Вот нафига?!

                                        И почти во всех плагинах, что я ставил, были какие-то приколы. Честно, я не верю людям, которые говорят, что 20-30 плагинами можно превратить ST в крутую IDE (ну разве что перелопатить их все и допилить самому?) Эта мегасистема будет на ходу разваливаться.
                                          +1
                                          От саблайма уже пора отказываться, господа и дамы.
                                          Его разработка ужасно замедлилась.
                                          Я купил его и сидел год на 3 ветке. Как она была дев, так и осталась. На линуксе дерево файлов просто не работало — большие директории постоянно делали вид, что загружаются, а консоль молчала. Плюс память, он сжирал гигабайт по 6 в легкую, с парой плагинов. И всё это никак не исправлялось, а новые релизы появляются очень очень редко.
                                          Его практически забросили, на мой вкус. А это основной инструмент, да ещё и платный.

                                          Для себя я выбрал атом — это такой же саблайм, только у него уже встроенный пакетный менеджер, все возможности по стилизации (cssом) интерфейса, миллион пакетов, которые легко сделать самому, опенсорс и всё такое.

                                            0
                                            Всё же фронтенд, через «е» — почитайте словарик фронтенд-разработчика.
                                              0
                                              Почему?
                                                0
                                                Как было в английском варианте — end (энд), так и осталось, почему вдруг в русском варианте вторая часть слова должна измениться?
                                                  0
                                                  Вообще-то принято через «э» траснкрибировать слова с буквой «a». Cat — кэт. И то не всегда, например, тег — исключение из данного правила. А уж слова с «e» всегда пишут через «е».
                                              0
                                              Я бы еще упомянул замечательный плагин Trailing Spaces, который подсвечивает messy whitespace (лишние\случайные пробелы и табы), довольно полезно для чистоты Вашего кода.
                                              И, возможно, стоило упомянуть тот факт, что Sublime Linter — это оболочка, поверх него еще нужно поставить js-lint и css-lint и тогда все заработает (по крайней мере, в 3ем саблайме наблюдал такое).
                                              0
                                              Автор, вообще, все эти плагины ставил сам? Emmet и CSS3 не работают вместе. Это даже написано в описание последнего (CSS3).

                                              Only users with full accounts can post comments. Log in, please.