Sublime text как пользоваться

Sublime text как пользоваться

Sublime Text 3 — кроссплатформенный текстовый редактор. Один из самых распространённых качественных инструментов для разработчика. Мой выбор также пал на Sublime Text, и я очень рад этому, так как использую его и сейчас в ежедневной работе. Рекомендую начинающим фронт-энд разработчикам: легкий, удобный и интуитивно понятный текстовый редактор. Описание основных характеристик можно почитать здесь.

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

Использовал платформу Windows, поэтому сочетание клавиш может не соответствовать при использовании OSX. Информацию об использовании горячих клавиш можно посмотреть здесь engРесурс или rusРесурс

Статья довольно информативная, поэтому я подготовил для вас содержание, чтобы можно было легко сориентироваться:

• Шаг 1. Установка Sublime Text 3
• Шаг 2. Подключение Package Control
• Шаг 3. Установка плагинов
• Шаг 4. Тонкие ручные настройки Sublime Text 3
• Шаг 5. Быстрый перенос Sublime Text 3 на другой PC

Шаг 1. Установка Sublime Text 3

Скачиваем текстовый редактор здесь Download Sublime Text 3

Выбираем версию в соответствии с ОС:

Открываем скаченный файл и начинаем установку. Принимаем все значения по умолчанию. Итак, текстовый редактор Sublime Text установлен!

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

Шаг 2. Подключение Package Control в Sublime Text

Package Control необходим для того, чтобы можно было устанавливать дополнения и плагины в Sublime Text из репозитория пакетов. Полное описание всех плагинов здесь PackageControl

В версии Sublime Text 3 разработчик позаботился о пользователях и добавил Package Control автоматически с установкой текстового редактора. Давайте проверим. Заходим в Sublime Text 3 нажимаем ctrl+shift+p ( или Preference > Package Control ) в меню вводим Package и видим, что Package Control установлен.

Чтобы установить Package Control самостоятельно перейдите по ссылке installPackageControl

Видим 2 способа подключения: Simple и Manual. Рекомендую использовать вариант Simple. Для этого необходимо скопировать код (выделил красным), открываем консоль в Sublime Text ( Ctrl+` или View > Show console ), вставляем скопированный код и ожидаем завершения установки. После успешного завершения необходимо перезагрузить текстовый редактор.

Проверяем наличие Package Control. Видим, что в порядке, теперь можно перейти к следующему шагу.

Шаг 3. Установка плагинов

В Package Control вы можете подключить огромное количество плагинов из доступных пакетов, но как правило, вы не будете использовать больше 15. Предлагаю свой вариант сборки необходимых плагинов, которые значительно упрощают разработку.

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P или Preference > Package Control . Затем вводим команду «Install Package» и выбираем нужный пакет из списка.

Также обратите внимание, что часть плагинов уже может быть установлена по умолчанию. Как мы видим на скриншоте: AutoFileName, BracketHighlighter, Color Highlighter, Emmet, LiveReload.

Плагины, которые рекомендую установить:

1. Emmet

Ускоряет написание HTML и CSS кода. Набираете !+Tab и получаете базовую HTML разметку. Неправда ли, как это упрощаете и ускоряет верстку?

Или вот еще один вариант:

Ну разве это не совершенно? Подробный справочник сокращений для ускорения верстки по ссылке EmmetDescription

2. AutoFileName

В помощь при написании путей до внешних файлов: картинки, плагины, таблицы стилей и т.д.

3. Sass

Плагин для подсветки Sass синтаксиса кода в Sass и Scss файлах. Первое время у вас не будет необходимости его использовать, но когда увидите, что у вас начало появляться много рутины, то это именно, то что нужно автоматизировать, также код уже стал большим и тяжело читабельным, тогда здесь и будете приступать к изучению новых технологий gulp, jade, sass. Вот тогда и почувствуете все прелести этого плагина.

4. OneDarkMaterial and OneDark Color Scheme

Тема оформления UI Sublime Text и цветовая схема для подсветки кода. Мне нравится данная тема, когда сидишь сутками за монитором начинаешь понимать все мелочи интерфейса, для меня данная тема сильно снижает нагрузку на глаза за счет удобной читабельности в сравнении с темой по умолчанию и многими другими.

После установки пакета необходимо зайти в Preferences.sublime-settings | Preferences > Settings и установить дополнительные настройки

5. BufferScroll

Превосходный плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, и вам не приходиться искать все заново. Подключается внешним способом, перейдите на GitHub страницу плагина , скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges . Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает!

6. Autoprefixer

Добавляет вендорные префиксы для обработки различных механизмов рендеринга. Они в основном используются для движков WebKit, Gecko и Microsoft, которые сгруппированы в качестве «vendor prefixes». (-moz-, -webkit-,-ms-,-o-)

7. Livereload

Позволяет редактировать код и обновлять страницу сайта на локальном сервере в реальном времени. Т.е. я редактирую код страницы и она автоматически обновляется, показывая мне изменения. Незабываем, что в html файле нужно будет подключить отдельный скрипт для работы этого плагина. Отличное решение, но как только приступите к изучению комлектовщика проектов (я использую Gulp) тогда потребности не будет в этом плагине, но первое время очень сильно экономит время. Подробное руководство по установке LiveReloadInstall

8. Colorhighlighter, ColorPicker

Палитра + background при :input in Sublime. Этот плагин позволит визуально выделять цвета, указанные в CSS-файлах. Вы сможете увидеть написанный цвет в режиме реального времени. Также, в Color Highlighter есть поддержка Sass, Less и Stylus, благодаря чему этот плагин становится пригодным для любых боевых условий.

9. CSS comb

Чистый, красивый код. Звучит немножко странно, но действительно данный плагни форматирует ваш CSS (и Sass) в соответствии с предпочтительным стилем.Полезно для тех разработчиков, которые любят в алфавитном порядке все или предпочитают группировать определенные правила вместе.

10. Alignment

Функциональное выравнивание фрагментов кода. поможет вам взмахом руки Ctrl+Alt+A выровнять выделенный текст согласно заданным настройкам. Это означает, что вы можете выровнять несколько выборок или строк через разделитель, например = . Просто наберите ctrl + alt + a на Windows или cmd + ctrl + a на Mac, чтобы выровнять свой выбор. Подробное руководство можно найти здесь AligmentTutorial

11. SublimeLinter

Программа, которая сканирует ваш код и обнаруживает ошибки. Пропущенный » ; « или » пробел « или » < ". Какая бы ошибка ни была, она откроет ее. Linter присутствует для нескольких языков. Обычно вам необходимо установить основной пакет linter, а затем добавить отдельные надстройки на основе языка-интерфейса.

Шаг 4. Тонкие ручные настройки Sublime Text 3

Заходим в Sublime Text 3 далее Preferences.sublime-settings | Preferences > Settings . Ы В открывшемся окне Preferences.sublime-settings | User вставляем код, что указан ниже:

Для клавиатурных сокращений заходим в Default (Windows).sublime-keymap | Preferences > Key Bindings:

Теперь если нажать Alt+Shift+F код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

Шаг 5. Быстрый перенос Sublime Text 3 на другой PC

Для того, чтобы сделать быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку «C:\Users\Имя пользователя\AppData\Roaming\Sublime Text 3» в безопасное место на вашем диске или на флешку, а потом разместить у другого пользователя или на другом компьютере в этой-же директории под пользователем.Показать меню можно нажатием клавишы alt на клавиатуре.

Если у вас все получилось, то должен выйти нижеприведённый результат с учетом установки всех плагинов.

Спасибо за внимание, вдохновения и радости от проделанной работы!

Краткое руководство по Sublime Text

Sublime Text — один из лучших текстовых редакторов в мире. Количество встроенных функций и расширений, которые доступны благодаря плагинам восхищает даже самого искушенного пользователя. Git, Vim, Python, Shell Script, регулярные выражения — все лучшие изобретения человечества собраны в этой маленькой программе. Приложение невероятно красиво и удобно в использовании. Один раз открыв Sublime вы не закроете его никогда.

Установка

Удивительно, но столь функциональное приложение весит всего лишь чуть более 7 мегабайт. Установка мгновенна и не требует участия пользователя.

Пользоваться продуктом без ограничений функций можно бесплатно, но приложение иногда очень ненавязчиво напоминает о необходимости приобретения лицензии. Sublime Text один из немногих продуктов, который своим высочайшим качеством вызывает непреодолимое желание поделиться своими кровными с разработчиками. Тем более что текстовый редактор настолько хорош и стоит гораздо больше, чем те $70, которые за него просят.

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

Основы использования

При запуске программы открывается безымянный текстовый файл.

В левом нижнем углу отображается строка и символ, на котором сейчас находится курсор. При наборе текста в Sublime кажется, будто клавиши под пальцами становятся мягче и процесс печати идет резвее.

Если подвести указатель мыши к верхней стороне экрана, то отобразится меню. В разделе File можно сохранить текущий документ или открыть новый для редактирования.

Файл можно сохранить под любым расширением.

И в большинстве популярных кодировок:

Верно и обратное. В Sublime можно открыть файл с любым расширением и кодировкой.

К слову, в Sublime вся введенная информация сохраняется автоматически. Текстовый редактор крайне редко принудительно завершает работу (у меня это было один-единственный раз, когда я пыталась сделать 20 тысяч замен символов в тексте одной командной), но даже в таком случае ни один напечатанный символ не пропадет.

Перемещение по документу

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

Переставить курсор на определенную строку или символ можно с помощью меню Goto.

Если полоса прокрутки случайно убежала далеко от местоположения курсора, то выручит пункт меню Scroll — > Scroll To Selection.

Но самая мощь Sublime ощущается при использовании закладок. Добавить закладку в текст можно с помощью пункта меню Goto -> Bookmarks -> Toogle Bookmark. Перемещаться между закладками можно с помощью команд Next Bookmark и Previous Bookmark.

Поиск и замена

Если выбрать пункт меню Find ->Find, то внизу экрана появится панель поиска.

C окошком для ввода искомых символов и кнопками в правой части экрана все понятно. Разберемся для чего нужны иконки в левом нижнем углу экрана.

Самая левая кнопка включает поддержку регулярных выражений. Объяснять что это такое и зачем они нужны в этой статье не будем. Об этом лучше почитать у Джеффри Фридла.

Следующая за ней кнопка делает поиск чувствительным к регистру.

Кнопка с двумя кавычками настраивает поиск на нахождение только точных совпадений. Пример: на запрос «7» найдется только » 7 «, а «87» и «78» не найдется.

По умолчанию, поиск идет в тексте начиная от текущего положения курсора и далее вправо и вниз (по ходу чтения). Кнопка с перевернутой стрелкой позволяет сменить это направление на противоположное.

Рядом с белым окном находится кнопка, которая подсвечивает все найденные в тексте совпадения. А кнопка слева от нее ограничивает область поиска выделенным фрагментом.

Аналогичная панель появляется при вызове пункта меню Find -> Replace.

Палитра команд

Для повышения продуктивности многие команды можно запускать из палитры команд, которая открывается из пункта меню Tools -> Command Palette.

Темы

Стандартный внешний вид Sublime безупречен. Для тех кто с этим не согласен есть пара десятков дополнительных тем оформления. Они доступны из пункта меню Preferences — > Color Sheme.

Настройки

Настройки Sublime меняются путем редактирования текста конфигурационного файла. К каждому параметру прилагается как минимум один абзац пояснений, что позволяет без труда разобраться что к чему. Обратите внимание, что выбранную тему оформления тоже можно менять через текст конфигурационного файла.А теперь перейдем к функциям Sublime, которые делают его великолепным редактором кода.

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

Подсветка синтаксиса в этом текстовом редакторе выглядит просто волшебно. Вот, к примеру, немного PHP и SQL: А вот HTML + JavaScript:

Sublime Text умеет эффектно подсвечивать код, написанный на трех десятках языков программирования.

• AppleScript;
• ActionScript;
• C;
• C++;
• C#;
• CSS;
• D;
• Dylan;
• Erlang;
• HTML;
• Groovy;
• Go;
• Haskell;
• Java;
• JavaScript;
• LaTeX;
• Lisp;
• Lua;
• Markdown;
• MATLAB;
• OCaml;
• Perl;
• PHP;
• Python;
• R;
• Ruby;
• SQL;
• TCL;
• XML;
• YAML.

Чтобы включить соответствующие оформление надо просто сохранить файл под правильным расширением.

Если вам нужно подсвечивать Brain Fuck, Fortran или еще какую-нибудь экзотику, то можно написать для этой цели собственный плагин или установить уже готовый.

Автодополнение кода

Sublime можно полюбить только за то, что кавычки и скобки в нем не нужно набирать два раза.

Стоит ввести в Sublime один символ, как он тут же предложит варианты завершения строки:

Для людей которые любят называть переменные наподобие «$moyPosledniyZimniyDenKogdaYaKatalsyaNaKonkah» эта функция бесценна.

Сворачивание кода

Если при взгляде на код голова кругом идет от иерархии циклов и условий, то значит это плохой код чтобы в нем разобраться без Sublime не обойтись. Слева, в том месте где отображается нумерация строк возле начала циклов и условий есть засечки, которые позволяют скрывать ненужные блоки кода. Для PHP эта функция работает отлично:

Сниппеты

Сниппет — это фрагмент кода или текста для многократного использования. В пункте меню Tools -> Snippets есть несколько десятков сниппетов для веб-разработчиков.

При желании можно создавать собственные сниппеты и использовать коллекции чужих сниппетов.

Проекты

Еще одна замечательная функция Sublime, которая пригодится не только программистам — возможность объединить несколько файлов в один проект, что позволяет открывать и закрывать эти файлы одним движением руки, а также применять к ним групповые операции.

Чтобы отобразить в Sublime боковую панель с обозревателем файлов необходимо перетащить нужную папку на поле для набора текста.

Теперь можно сохранить выбранные файлы в виде проекта с помощью пункта меню Project -> Save Project As. После этого файлами можно манипулировать как отдельным проектом.

Сочетания клавиш

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

Макросы

Для автоматизации своих действий в Sublime не нужно знать ни одного языка программирования. Ведь есть функция записи активностей пользователя. Для начала записи макроса необходимо выбрать пункт меню Tools — > Start Record Macro и выполнить необходимые действия.

Для запуска записанного макроса используется команда Playback Macro. Записанный макрос можно сохранить под расширением sublime-macro и делиться им с другими пользователями.

Vim

Гарантированный способ повысить скорость набора кода — научиться работать в текстовом редакторе vim, который существует уже почти четверть века. Он позволяет работать с текстом не притрагиваясь к мыши или трекболу. Это повышает производительность труда как минимум на треть. Задача освоения vim не самая простая, но она стоит того, чтобы за нее взяться.

Для работы в режиме Vim, в стандартной комплектации Sublime есть плагин Vintage Mode. По умолчанию он находится в неактивном состоянии. Включить его можно прописав в конфигурационном файле значение true для параметра vintage_start_in_command_mode.

"vintage_start_in_command_mode": true

И указать каким образом будет производиться вход и выход из vim режима:

Если вы пока еще не работали с vim, то велика доля вероятности что вам стоит научиться это делать. Вот эту картинку можно поставить на рабочий стол и в минуты размышлений созерцать ее и запоминать комбинации клавиш для vim/Vintage Mode для Sublime:

Плагины

Скачать различные плагины для Sublime можно на сайте Package Control. Вот небольшая подборка дополнений, которые на мой взгляд являются самыми полезными:

• Package Control. Это дополнение позволяет управлять всеми плагинами для Sublime;
• Git. Плагин для работы с популярной системой контроля версий;
• Terminal. Использование командной строки в разы ускоряет работу с файлами проекта;
• Alignment. Выравнивает отступы в HTML, CSS, JavaScript и PHP;
• Trimmer. Убирает лишние пробелы;
• ColorPicker. Мгновенно подбираем цвет и вставляем в текст его шестнадцатеричный код;
• MarkdownEditing. Удобная подсветка синтаксиса Markdown.

Где искать дополнительную информацию

На русском языке

Есть сайт с русскоязычной документацией по Sublime, но на данный момент на нем довольно мало информации.

На английском языке

У пользователей Sublime Text есть форум, на котором за все время создано около 15 тысяч тем и каждый человек может задать свой вопрос.

О Sublime Text издана отдельная книга, которая содержит самое полное руководство по использованию текстового редактора. Стоит она 40 долларов, но ее авторы гарантируют, что это скромная инвестиция окупится мгновенно.

Для владельцев iOS-девайсов:

• Ошибка «Обнаружен iPhone, но его не удалось правильно идентифицировать» — как исправить
• Как скинуть фото с айфона на комп через айтюнс
• Как делиться покупками в семейном доступе на iPhone

Теги: Mac OS X Инструкции для Mac Mac OS X OS X El Capitan Инструкции для Mac

Следующая В 2016 году хакеры начнут проявлять еще больший интерес к iPhone и iPadПредыдущая iPhone 7 получит однокристалльный SiP-процессор

Sublime Text 3 жив. (Настройка и работа)

Sublime Text 3 — кроссплатформенный текстовый редактор.

Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)

Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.

1. Установка программы и контроль за дополнениями (Package Control)

1. Устанавливаем Sublime Text 3. Тут всё просто — качаем и запускаем.

Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.

2. Настройки программы:

1. Используем пробелы, вместо табов.
   «translate_tabs_to_spaces»: true
2. Размер таба равен 4 пробела.
   «tab_size»: 4

— Пожалуй на этом обязательные MustHave настройки заканчиваются. Перейдём к индивидуальным:

1. Полноэкранный режим F11 + скрытие панели menu (alt). Позволяет максимально использовать монитор для работы и не отвлекаться на статус панели OS.
2. Запрет переноса строки. Наверное лучшее свойство из перечисленных. Не даёт путаться в pug синтаксисе. Показывает всегда ожидаемый код и вложенность независимо от размера экрана. Горизонтальная прокрутка осуществляется shift + колёсико, (либо тачПанель)
   «word_wrap»: «false»
3. Themes. Ничего не могу сказать по этому поводу. Просто найдите то, что нравится (желательно использовать тёмную схему). Я использую „theme“: „Material-Theme-Darker.sublime-theme“.
4. Подсветка синтаксиса. Ну я думаю тут не должно быть проблем. Если следить, что бы расширение и подсветка совпадали (Pug for Pug, а не Jade for Pug)
5. View → Side Bar → Hide Open Files — Освобождает пространство для дерева проекта. Т.к это поле так и так дублируется вкладками и тремя точками сверху

3. Полезные клавиши ‘hotkey’ :

1. В первом пункте скажем, что пропустим все стандартные сочетания, такие как ctrl(⌘) + Z (⌘ — далее просто ctrl). Отменить, сохранить, повторить, закрыть вкладку, восстановить вкладку, и тд…
2. Пожалуй следующее самое популярное сочетание это:
   crtl + P — Позволяет выполнить поиск по файлам открытого вами проекта. Позволяет избавится от огромного дерева открытых стилей.
3. Следующее по важности:
   ctrl + D — Поиск копий выделенного текста. Идеально подходит для мульти-редактирования. И для поиска дублей. Особенно в больший файлах и больших фрагментов. Для мульти-курсора зажмите ctrl и используйте мышь.
4. ctrl + L — Выделяет всю строку и позволяет удалить её полностью. Хорошо работает совместно с ctrl+D.
5. Поиск… Ну наверное первое это ctrl+F — поиск по файлу. Второе и более важное это поиск в папке по множеству файлов ctrl + shift + F (Можно вызвать кликнув по папке правой кнопкой и выбрать ‘Find in folder…’) Советую не включать в поиск папку «Известного толстячка»
6. ctrl + shift + up/down — Перемещает строку наверх/вниз (меняет их местами). Удобно для работы со стилями и переменными.
7. Теперь небольшой туториал по комбинациям комбинаций клавиш. Вы наверное видели эти комбинации через запятую. Вот и я видел… а теперь я знаю как их использовать. Для этого по очереди нажимаем эти комбинации (можно не отпускать общую мод клавишу)
   Вот полезные из них:
8. ctrl + K, ctrl + 4 — Скрывает все ветки, вложенность которых больше 4. Аналог стрелочки свернуть. (ctrl + K, ctrl + J — разворачивает всё что есть)
9. ctrl + K, ctrl + B — Скрывает/показывает SideBar. (хорошо работает с F12)

Sublime Text 3 для верстки сайтов. Настройка внешнего вида и установка плагинов. Руководство для начинающих

Сегодня расскажу о редакторе кода, которым пользуюсь для верстки сайтов уже много лет. Быстрый, удобный и полностью настраиваемый Sublime Text 3.

Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!

Внешний вид программы

Первым делом, после установки Sublime Text 3, я настраиваю внешний вид программы.

Боковая панель

Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.

Цветовая схема

Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.

Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.

Для того что устанавливать новые цветовые схемы, плагины и прочие дополнения, мне нужно сперва установить установщик этих дополнений. Звучит сложно, но на деле все гораздо проще.

Перехожу в меню Tools – Command Palette, либо нажимаю Ctrl+Shift+P. Открывается вот такое окно с поиском, в поле поиска ввожу install пока не увижу пункт Install Package Control, и нажимаю на него. Спустя несколько секунд получаю сообщение о том, что Package Control успешно установлен. Теперь я могу приступить к установке нужной цветовой схемы.

Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.

В поле поиска ввожу название того дополнения, которое хочу установить, в данный момент — это цветовая схема под названием Base16 Color Schemes, точнее это целый пакет с множеством цветовых схем. Нажимаю на найденный пункт и ожидаю установки. Индикатор процесса установки можно увидеть на нижней панели программы. Получив там же короткое сообщение о том, что все установлено перехожу к смене схемы. Для этого открываю уже знакомый пункт меню Preferences – Color Scheme и вижу в открывшемся окне уже большое множество разных вариантов. Меня интересует схема Ocean, ввожу название в поиске, их тут есть две: одна более контрастней другой.

Моя любимая цветовая схема установлена, ты конечно же можешь выбрать себе любую другую.

Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme

Сочетание цветов очень важно для работы с кодом, так как это влияет не только на восприятие, но и на усталость и здоровье твоих глаз. Так что подбери себе цветовую схему так, чтобы тебя ничего в ней не напрягало. И помни про перерывы в работе!

Дополнительные настройки

Дополнительно повысить восприятие кода и комфорт при работе с ним мне помогут следующие дополнительные настройки. Переходим Preferences – Settings. Открывается такое окно разделенное на две части. В левой части настройки по умолчанию, их изменить нельзя, а вот в правой части ты можешь эти настройки переназначить, каждая следующая должна идти через запятую. Вот какие настройки использую я:

"margin": 0, // Убирает отступы "font_size": 10, // Размер шрифта по умолчанию "draw_indent_guides": true, // Включает/выключает направляющие линии "draw_white_space": "all", // Отображает непечатаемые символы "tab_size": 3, //Размер табуляции "remeber_open_files": true, // Помнит открытые ранее файлы 

Поясню каждую настройку.

"margin": 0, // Убирает отступы 

Убирает странные отступы в программе между кодом и боковой панелью, что делает общую картину более компактной.

"font_size": 10, // Размер шрифта по умолчанию 

Выставляет размер шрифта по умолчанию.Также быстро изменить размер шрифта, работая с кодом, можно зажав контрол и покрутив колесо мыши.

Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset

"draw_indent_guides": true, // Включает/выключает направляющие линии 

Эти линии очень полезны для новичка, потому что визуально соединяют открывающий и закрывающий элемент, что существенно помогает в ориентации в коде.

Лично я отключаю их (false) по двум причинам. Первая — я уже не новичок и без них неплохо справляюсь, вторая причина — это следующая настройка.

"draw_white_space": "all", //Отображает непечатаемые символы 

Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.

"tab_size": 3, //Размер табуляции 

Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер 🙂

"remember_open_files": true, //Помнит открытые файлы 

Например мы работали работали, а потом неожиданно закрыли программу 🙂 Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.

Разделение рабочего окна

Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.

Поскольку практически всегда приходится работать с несколькими разными файлами, например index.html style.css и какой-то js файл, то дополнительным удобством будет разделение окна с кодом на секторы. Варинтов несколько. Переходим в View – Layout и смотрим что тут у нас есть.

Соответственно Single – это вид без разделений как сейчас, Columns: 2, 3, 4 это разбивка по вертикали. Например нажав на Columns: 2 наш экран с кодом разделится пополам, и мы можем часть файлов переместить в пустую колонку, например CSS слева HTML и JS справа, что делает работу более наглядной и быстрой.

Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.

Так что у тебя есть широкий выбор по вкусу. Я чаще всего использую одно разделение по вертикали.

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

Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.

Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.

Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.

Например, в дальнейшем я планирую работать с файлами SCSS, открыв его я увижу сплошную простыню из набора белых символов. Не очень удобно, правда?

Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.

Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?

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

Следующее, что мы сделаем это установим ряд плагинов и дополнений. Их существует огромное количество, а я расскажу про основные, которые активно использую сам и которые в разы ускорят весь процесс верстки. Приступим!

Плагины

AutoFileName

Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.

BracketHighliter

BracketHighliter можно перевести как подсветка кавычек. Установим его. Нажимаем Ctrl+Shift+P, Install Package Control ищем BracketHighliter. Устанавливаем. Тут даже открывается отдельный файл с сообщением об успешной установке. Теперь в нашем коде будет подсвечиваться начальный и конечный элемент, например открывающий и закрывающий тег, начальная и конечная ковычка, открывающая и закрывающая скобка. Это очень помогает с ориентацией в коде.

ColorHighliter

Обрати внимание на этот код — это код цвета, но какого именно непонятно.

Давай установим плагин. Ctrl+Shift+P, Install Package Control ищем ColorHighliter. Опять открывается отдельный файл с сообщением об успешной установке. И сообщения о некой ошибке, игнорируем их. Смотрим на наш код с цветом, и теперь видим что за цвет скрывается за буквенноцифровым кодом. Сам плагин можно дополнительно настроить в меню Tools — ColorHighliter но сейчас не будем останавливаться на этом. Все и так стало намного лучше.

Великий и могучий Emmet

Устанавливаем по наработанной схеме. Ctrl+Shift+P, Install Package Control ищем Emmet. Открывается отдельный файл с сообщением с просьбой перезагрузить программу для окончания установки. Закрываем и открываем Sublime. Получаем сообщение, что все установлено.

Итак, что же умеет Emmet?

Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать «block» и нажать клавишу Tab. Мы получим:

Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:

.block>span 

Жмем клавишу Tab и получаем:

Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следующее:

 < "snippets":< "html":< "snippets":< "bl":"Теперь для того чтобы вызвать запись:

нам достаточно написать bl и нажать клавишу Tab

Из этого следует, что возможности Emmet безграничны, и мы можем настроить свои сниппеты как угодно и работать очень быстро. Подробную информацию о возможностях плагина можно найти на сайте https://emmet.io

GotoCSSDeclaration

Плагин поможет нам с навигацией в коде. Устанавливаем ровно так же как и предыдущие плагины. Далее назначим горячие клавиши для работы с плагином для этого переходим Preferences – Key Bindings, и пишем следующий код

Где [«ctrl+1«] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.

Tag

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

Зовут его Tag и установить нам придется его вручную. По этой ссылке можно скачать архив с плагином. Далее распаковываем в особую папку программы. Для Windows 10 это C:\Users\[Подставь свое имя пользователя]\AppData\Roaming\Sublime Text 3\Packages. Далее закрываем Sublime и открываем снова и добавляем горячие клавиши открыв Preferences – Key Bindings и дописав следующее:

Где ctrl+` это и есть наше сочетание клавиш.

Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`

и потом вставить результат копирования в наш CSS ctrl+v.