Как установить Sublime Text?

Sublime Text 3: установка, настройка, плагины

Sublime Text 3 — проприетарный кроссплатформенный редактор веб-кода, написан на языках программирования C++ и Python разработчиком Джоном Спиннером. Первая альфа-версия вышла в 2011 году. Последняя версия Sublime Text 3 вышла в 2013 году и имеет возможность подсветки синтаксиса для C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML. Редактор оснащен менеджером пакетов, который позволяет пользователю находить, устанавливать, обновлять и удалять пакеты без перезагрузки программы. В этой статье я расскажу как установить и настроить Sublime Text 3, а также поделюсь некоторыми полезными «фишками».

1. Особенности веб-редактора Sublime Text
2. Преимущества Sublime Text
3. Недостатки Sublime Text
4. Установка Sublime Text 3
5. Установка менеджера пакетов
6. Установка плагинов
7. Установка темы
8. Горячие клавиши Sublime Text 3
9. Горячие клавиши плагина Emmet
10. Как добавить просмотр кодировки
11. Как автоматически отформатировать код
12. Полезные ссылки

Особенности веб-редактора Sublime Text

Данный редактор веб-кода я стал использовать относительно недавно, ранее «кодил» в обычном Notepad ++. Но со временем понял, что мне его не достаточно, нужно что-то более профессиональное и в то же время легкое в освоении, где можно будет максимально автоматизировать процесс построения/редактирования кода. Такие «монстры» как ID Php Storm и Visual Studio Code мне почему-то не совсем впечатлили, хотя остаются прекрасными решениями, а вот Sublime Text сразу, как говорится, «лег на душу» и наше знакомство с ним прошло мгновенно. То, что в Notepad++ забирало минуты, в Sublime я делал за секунды.

Преимущества Sublime Text

• Легкий, занимает мало дискового пространства, потребляет мало оперативной памяти, компактный;
• Простой и понятный веб-интерфейс, доступный новичку и полезный опытному пользователю (содержит множество «плюшек»);
• Поддержка различных тем, скинов, расширений, модулей, плагинов;
• Поддержка сниппетов (заготовок) веб-кода;
• Кросплатформенный — поддерживает все современные ОС;
• Поддержка макросов;
• Поддержка автосохранения.

Недостатки Sublime Text

• Платный. Распространяется по коммерческой лицензии — цена 59$.

Установка Sublime Text 3

Скачать можно по ссылке:

После установки, запускаем редактор с помощью меню «Пуск» в ОС Windows:

По умолчанию программа выглядит так:

Установка менеджера пакетов

Первое, что нужно сделать — установить Package Control (Менеджер Пакетов) — специальный репозиторий с различными дополнениями к редактору Sublime Text 3. Для того чтобы установить переходим в меню: Tools -> Install Package Control.

Получаем сообщение, что менеджер пакетов установился успешно, нажимаем «Ок»:

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

Далее установим плагин Emmet — позволяет ускорить написание веб-кода за счет того, что он умеет генерировать HTML-разметку. Переходим в Preferences -> Package Control:

Далее введите install и выберите Package control: Install package:

Далее напишите Emmet и выберите пункт Emmet for Sublime Text 3:

Получаем сообщение, что Emmet установился успешно:

Давайте попробуем проверить как работает плагин Emmet. Создадим файл index.html и сгенерируем разметку: зажмите клавишу Shift и введите восклицательный знак.

Появится сниппет разметки HTML-документа. Нажмите клавишу Tab, чтобы применить его:

Как вы видите одним нажатием клавиши у нас сгенерировалась полностью рабочая HTML-разметка. Далее можем сгенерировать мета-тег

. Для этого просто введите h1 и нажмите на клавишу Tab — плагин Emmet сгенерирует открывающий и закрывающий тег:

И подобным образом можно генерировать любые другие html-теги.

Установка темы

Теперь попробуем установить тему оформления и подсветки синтаксиса для редактора Sublime Text 3. Я буду использовать простую тему Spacegray Monokai.

Установка проходит стандартно через Менеджер пакетов (Ctrl+Alt+P): Preferences -> Package Control -> Install-> Monokai — Spacegray:

Чтобы применить тему переходим в меню Preferences -> Color Scheme и выбираем цветовую тему:

Кстати, удалить любое расширение (плагин или тему) в Sublime Text 3 также легко, как и установить — в Менеджере пакетов достаточно прописать Remove package и выбрать необходимое расширение.

Горячие клавиши Sublime Text 3

• Ctrl + Shift + P — вызов менеджера пакетов;
• Ctrl + ` — открыть консоль;
• F11 — полноэкранный режим;
• F9 — сортирует все строки в алфавитном порядке;
• F6 — проверка правописания;
• Shift + F11 — свободный полноэкранный режим;
• Ctrl+K + Ctrl+B — вывести/спрятать боковую панель;
• Ctrl + G — перейти к строке по номеру;
• Ctrl + R — перейти к символу;
• Ctrl + « — перейти к классу;
• Ctrl + I — поиск на лету;
• Ctrl + H — поиск и замена;
• Ctrl + / — закомментировать/раскомментировать текущую строку;
• Ctrl + Shift + / — добавить комментарий;
• Ctrl +Shift + J — выделить блок;
• Ctrl + L — выделение целой строки;
• Ctrl + Z — отмена последних действий, шаг назад;
• Ctrl + T — быстрое перемещение по файлам;
• Сtrl + N — создать новую вкладку (файл);
• Alt + . — закрыть незакрытый тег;
• Ctrl+K + Ctrl+Space — установить метку;
• Ctrl+K + Ctrl+W — удалить метку;
• Ctrl+K + Ctrl+G — удалить все метки;
• Ctrl+K + Ctrl+U — трансформирует выделенный текст в верхний регистр;
• Ctrl+K + Ctrl+L — трансформирует выделенный текст в нижний регистр;
• Ctrl + Shift + A — выделить содержимое html-тега;
• Ctrl + Shift + D — продублировать строку вниз;
• Ctrl + Shift + N — создать новое окно;
• Ctrl + Shift + W — закрыть текущее окно;
• Ctrl + Shift + V — вставить с отступом;
• Ctrl + Shift + [ — свернуть код;
• Ctrl + Shift + ] — развернуть код;
• Ctrl + O — открыть файл;
• Ctrl + Shift + T — открыть последний закрытый файл;
• Ctrl + C — копировать;
• CTRL + V — вставить;
• CTRL + X — вырезать;
• Ctrl + S — сохранить текущий файл;
• Ctrl + Shift + S — вызвать окно «Сохранить как»;
• Ctrl + + — увеличить размер шрифта в редакторе;
• Ctrl + — — уменьшить размер шрифта в редакторе;
• Ctrl + q — записать макрос;
• Ctrl + Shift + q — воспроизвести макрос;
• Ctrl + Alt + Shift + P — отобразить название контекста, в котором находится курсор;

Горячие клавиши плагина Emmet

• Shift + ! — сгенерировать разметку html-документа;
• ul>li*5 — выведет 5 тегов li, заключенных в тег ul;
• #selector — выведет

Как добавить просмотр кодировки

Переходим в меню Preferences -> Settings и добавляем строку: «show_encoding»: true.

Можно также просмотреть текущую кодировку в консоли с помощью команды: view.encoding().

Сохранить файл в указанной кодировке: File -> Save with encoding.

Также существует специальный плагин для работы с разными кодировками — EncodingHelper.

Легкий и быстрый редактор кода Sublime Text 3

В своей работе, программисты пользуются разными редакторами кода, такими как PHPStorm от JetBrains, Eclipse и другими “тяжелыми” IDE, но для разработки можно использовать и более “легкие” решения, например, Atom или Sublime Text 3.

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

В чем преимущества редактора Sublime Text 3

Мы выделили несколько полезных качеств редактора кода Sublime Text 3:

1. Скорость и низкие требования к ресурсам компьютера
Редактор действительно быстро работает даже на “слабом” железе.

2. Работа в популярных операционных системах
Вы можете запустить редактор кода Sublime Text 3 в операционных системах Windows, Linux и Mac OS.

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

Как установить Sublime Text

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

После того, как ваш редактор установится, он сразу же готов к работе.

А чтобы расширять возможности редактора, вам понадобится плагин Package Control. С помощью плагина Package Control вы можете устанавливать и управлять дополнениями для Sublime Text, поэтому имеет смысл его установить сразу.

Как установить Package Control

Устанавливается Package Control не совсем обычно, но достаточно просто:

1. Перейдите по ссылке https://packagecontrol.io/installation и скопируйте из таба SUBLIME TEXT 3 код. Этот код с сайта package control нужно скопировать целиком.

2. После того, как скопировали код, перейдите в редактор Sublime Text 3 и выберите View > Show Console, и внизу редактора появится поле, куда нужно вставить скопированный код, и нажмите на Enter.

Если вы все сделали правильно, вы увидите, процесс установки Package Control. Затем вы увидите сообщение о том, что требуется перезагрузить Sublime Text 3 для вступления в силу изменений, нажмите ОК, закройте Sublime Text 3, а затем откройте вновь.

Для того, чтобы убедится, что вы верно установили Package Control, давайте попробуем установить тему оформления к нашему редактору, под названием spacegray.

Как сменить тему оформления в Sublime Text

Для установки новой темы оформления spacegray, перейдите в Preferences — Package Control и в открывшемся окне напечатайте install package, и из выпадающего списка выберите данный пункт. Затем в открывшемся окне, напечатайте spacegray и выберите Monokai — Spacegray.

После того как тема установится, вы можете выбрать новую тему в Preference — Theme.

Как установить плагин Emmet в Sublime Text

Плагин Emmet позволяет писать код быстрее, благодаря сочетанием клавиш. Например базовую HTML5-разметку вы можете создать сочетанием клавиш ! + tab. Удобно правда?

Для установки Emmet перейдите в Preferences — Package Control и в открывшемся окне напечатайте install package, затем введите слово emmet и выберите его для запуска процесса установки. Иногда требуется перезагрузка Sublime Text 3 после установки новых дополнений.

Важно: плагин Emmet в Sublime Text 3 не будет генерировать код, если вы ранее не сохранили файл, например, как index.html

Более подробную работу с Emmet и горячие клавиши мы рассматриваем в курсе HTML/CSS и других курсах Профессия веб-программист. Пройдя данные курсы, вы получите знания основ программирования и создадите на практике свой первый профессиональный сайт о кино.

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

Выводы

В данной статье мы рассмотрели редактор кода Sublime Text, а также несколько полезных инструментов для работы с ним. Если вы ищите полезные инструменты для веб-разработчиков, ознакомьтесь со статьей, и вы узнаете, как браузер Google Chrome поможет вам в разработке программного обеспечения.

Скачать Sublime Text 3

На данный момент Sublime Text 3 — это лучший текстовый редактор для программистов, верстальщиков и web разработчиков. Основная его особенность заключается в том, что в нем нет ничего лишнего, и в то же время в нем есть все, что может потребоваться. Если какой-то функционал отсутствует, то его всегда можно дополнить одним из 1000 бесплатных плагинов. Если и этого мало, то под свою задачу можно либо написать плагин самостоятельно, либо заказать у умельцев.

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

Как установить Sublime Text 3

Для начала нужно определиться с тем, как у вас операционная система, на данный момент саблайн выпускается под 3 ОС:

1. OS X для компьютеров apple;
2. Windows 32 (86) и 64);
3. Linux repos (32 и 64).

В зависимости от ОС скачаем с нашего сайта нужный архив с последней версией Sublime Text 3, далее 2 раза кликаем по .exe файлу, например: Sublime Text Build 3176 x64 Setup.

Далее идет стандартная установка:

1. Нажимаем Запустить (скрин 1/6);
2. next (скрин 2/6);
3. Выбираем куда хотим установить и снова next (скрин 3/6);
4. Ставим галочку add to explorer context menu, это нужно, что бы кликнув по файлу правой кнопкой мыши мы могли: открыть с помощью -> Sublime Text 3 (скрин 4/6);
5. install (скрин 5/6);
6. Все, программа установлена (скрин 6/6)!

Инструкция по установке Sublime Text 3 (см 6 скринов)

Интерфейс программы

После того, как Вы в первый раз откроете текстовый редактор он будет выглядеть так:

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

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

Настроить интерфейс можно через верхнее меню – VIEW, где:

1. view – side bar –show side bar. Показывает левый сайд бар, по началу он пусто, но если мы создадим на рабочем столе папку: new project и просто перетащим ее в Sublime, то она там появится и далее мы сможем работать с проектом, который будет находиться в этой папке.
2. View – show minimap. Показывает в правом сайд баре в каком месте кода вы находитесь. Очень удобно при работе с большими проектами.
3. View – show tab Показывает все открытые вкладки
4. View – show status bar. Показывает нижнее меню. Кстати в самом правом углу можно менять кодировки. Вообще в зависимости от открываемого файла Sublime Text 3 по расширению понимает, что это за файл и сразу его открывает, как надо, но иногда бывает, что нужно подсказать, что это PHP, Python, C++ или что-то еще. Чуть левее находится Индентация, с помощью нее можно менять табы на пробелы и наоборот приводя код в более структурированное состояние.
5. View – hide menu. Нажали? Если да, то меню в Sublime у вас скрылось, для того, чтобы вернуть надо нажать ctrl+shift+p и набрать menu
6. View – show console. Показать консоль
7. Enter Full Screen и Enter Distraction Free Mode. Полноэкранный и еще более полноэкранный режим.
8. Layout, Groups, Focus Group, Move File to Group. Разбивка экрана на 2-3-4 части для работы с несколькими файлами. Разбивать можно как вертикально, так и горизонталью.

Интерфейс (на 7 скриншотах)

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

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

Сами по себе настройки хранятся во вкладке: верхнее меню – preferences – settings. В левой части будут настройки по умолчанию, а в правой пользовательские (preferences.sublime- settings user). Правильнее вносить корректировки именно в правой части (user). По началу там практически ничего нет. Добавим такую строчку: «draw_white_space»: «all», и сохраним. Как видно, теперь пробелы и табы начали подсвечиваться, а это очень удобно.

(см 2 скрина)

Для того, чтобы увеличить/уменьшить шрифт достаточно просто нажать ctrl+покрутить колесико мышки

Более детальных рекомендаций по настройке дать тяжело, так как у всех свои задачи и предпочтения, но со временем Вы поймете, что именно надо.

Полезные функции в Sublime Text 3

Функций в Sublime великое множество, находятся они в верхних вкладках меню “Edit” и “Selection”. Описать все функции будет просто не возможно. На youtube есть огромное количество видеороликов, в которых все детально рассказано и показано. Но все же стоит рассказать о нескольких самых популярных и удобных функциях в саблайме:

1. ctr + / (контр + слеш) закомментировать строчку;
2. tab — увеличить индентацию;
3. shift + tab уменьшить индентацию;
4. ctrl+shift+v — вставить с учетом индентации;
5. shift+ctrl+d — дублирование строк.

Так же можно делать точечные выделения с помощью комбинации ctrl + левый клик мыши.

Функция множественного выделения

Лицензионный ключ для Sublime Text 3

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

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

Скачать Sublime Text 3

Далее можно скачать Sublime Text 3 под свою операционную систему.

* Из-за невостребованности торрент файлов они были убраны с сайта.

Желаем вам успешных разработок!

У нас Вы можете скачать последнюю версию текстового редактора под все ОС.

Sublime Text 3

Дата выхода: 01 октября 2019.

Версия: 3.2.2 Build 3211.

• Windows XP/Vista/7/8/10;
• Linux;
• MacOS.

Быстрая настройка Sublime Text 3 для верстки сайтов

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

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

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения верски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.

По умолчанию Sublime Text выглядит довольно печально:

Установка Package Control в Sublime Text

Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чем вы получите соответствующее уведомление.

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

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

Установка плагинов в Sublime Text

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

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

Самые популярные плагины для Sublime Text:

• Emmet — ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
• AutoFileName — дополняет код при написании путей до файлов в верстке;
• Gist — подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
• Sass — плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
• terminus — плагин встроенного терминала Sublime Text.
• W3​CValidators — мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

• One Dark Color Scheme — цветовая схема для подсветки кода;
• One Dark Material — Theme — тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

Один из таких плагинов BufferScroll — потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.

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

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:

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

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

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

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

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку

«C:Users<Ваш пользователь>AppDataRoamingSublime Text 3″
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

SublimeText. Руководство по настройке

20 сентября 2019 / Разработка

Итак, сначала вопрос, который волнует всех в первую очередь – да, программа платная. Стоит она на конец 2018 года 80 долларов (годом раньше было 40), в сети можно найти версии, вылеченные от жадности. Однако можно без проблем работать и с незарегистрированной версией. Единственное отличие – в топе программы будет написано слово UNREGISTERED и периодически (где-то раз в 2 часа) при попытке сохранения выскакивает окошечко с предложением купить платную версию. Других ограничений не замечено.

Обзор SublimeText

Автором называют некоего Джона Скиннера. Разработка началась в ноябре 2007 года, причём было объявлено о том, что поставлена цель «создать лучший текстовый редактор всех времён и народов ». Первая версия вышла 18 января 2008 года, вторая в 2011, третья в 2013 году. К 2018 году Скиннер со товарищи быстро сориентировались в тенденциях рынка и сосредоточились на Python, накидав много приятных возможностей для программистов «на змее».

Изначально в качестве целевой аудитории подразумевались разработчики, а потому в программе была предусмотрена проверка синтаксиса для множества популярных языков программирования. Это C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML. Можно подключать плагины и для других языков.

Программа выполнена с суровым интерфейсом без кнопок и декоративных элементов, что позволяет на 100% использовать экранное пространство для дела. Экран можно разбить на несколько рабочих областей. Например, слева открывать файл html, а справа css и параллельно с ними работать. Отдельный плюс – можно открывать не отдельные файлы, а целые каталоги и работать в них. Далее мы подробно рассмотрим, что к чему, на примере нашего проекта.

Подсвечивается всё очень красиво, по дефолту установлена приятная для глаза тёмная тема с контрастным выделением. Её ещё очень любят показывать в фильмах и ТВ-передачах, когда нужно снять «что-то о программистах».

Для установки, удаления и настройки плагинов применяется менеджер пакетов. Настраивается редактор довольно специфично – для этого нужно открывать и редактировать файл настроек. Для этого нажимаете в меню «Preferenses —>Settings», после чего можно будет увидеть расположение файла настроек.

Особая гордость разработчиков – интеллектуальный поиск (Incremental Find), который будет находить не только точное вхождение, но и близкие по написанию значения. Понятно, можно использовать обычный поиск, в том числе и с регулярными выражениями.

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

Вы просто ставите курсор в нужное место, затем зажимаете шифт и правую кнопку мыши и ведёте мышь вверх или вниз. Курсоры появляются в нескольких местах, и вы можете вводить символы или удалять текст сразу в колонке. Другой вариант – можно создать дополнительные курсоры в любом месте «Ctrl + клик мыши».

Недостатки – это, как обычно, обычно оборотные стороны достоинств. Профессионалы скажут, что Sublime не дотягивает до полноценной IDE и будут правы. Новичкам покажется жутковатым способ настройки через JSON. Любителям офисных программ будет скучновато без красивых кнопок в интерфейсе. Кого-то будут раздражать периодические призывы купить программу, а кому-то не понравится необходимость работы со сторонними плагинами. Тем не менее, как показывает опыт, для разработки сайтов средней и малой сложности SublimeText вполне годится.

Установка и настройка

С установкой никаких проблем нет, достаточно скачать дистрибутив с официального сайта. Представлены версии для Linux, MacOS 32-и 64-разрядной Windows, в том числе portable версии. Файл загрузки невелик, около 8Мб, в дальнейшем, после установки плагинов, программа разрастается до 20-30 Мб. Память потребляет тоже очень скромно, то есть, в целом всё достаточно бережливо с точки зрения ресурсов.

В процессе работы экран может выглядеть примерно так.

Здесь слева мы видим колонку с каталогом проекта, фалы можно открывать просто кликнув на них мышью. Чтобы начать работать с папкой, выбираете в меню «File —> OpenFolder…»

Рабочую область я разбил на две части. Это делается чрез меню следующим образом «View -> Layout -> Column2». Там же вы можете увидеть и другие режимы – например, разбить экран на верхнюю и нижнюю области, либо на 4 части. Вкладки можно перетаскивать с места на место просто зажав мышью.

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

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

Установка Менеджера Пакетов

Прежде всего, необходимо установить Менеджер Пакетов (Package Control). Сделать это можно вручную или через консоль.

1 Через консоль

Консоль открывается сочетанием клавиш «Ctrl + `» (это крайняя левая клавиша, сразу под Esc). Код, который нужно ввести, скопируйте с официального сайта. Сам код не привожу, поскольку он может отличаться от версии к версии. Копируйте актуальный. Затем нажимаете Enter и откидываетесь на спинку кресла.

2 Вручную

Для этого нужно вначале скачать файл с той же самой страницы, только с правой части. Затем в меню Sublime выбираем «Preferences -> Browse Packages». Теперь нужно перейти на одну папку выше, и открыть папку «Installed Packages». После чего перезапустить редактор.

В результате в меню «Preferences» должны появится пункты «Package Settings» «Package Control». Вот таким образом:

При запуске «Package Control» появляется вот такое окошко, в котором вы можете вводить название нужного плагина. Самые часто используемые разделы: «Install Package» — установить пакет, «Remove Package» – соответственно, удалить. Менеджер пакетов сам находит нужные плагины, распаковывает их из депозитория и запускает. Всё очень удобно.

Перечислим основные полезные пакеты.

Emmet

Без всяких кавычек – самый популярный у фронтендеров плагин. Существенно ускоряет набор кода, принцип применения простой и быстро запоминается. Примеры использования.

Формирование базовой структуры html. В новом файле с расширением html просто ставите ! и нажимаете . В результате появляется заготовка в формате html5.

Быстрый ввод блоков. Пишете div.class-name, жмёте и получаете структуру вида

Понятно, что вместо div можно вписать один из тегов html5, а вместо class-name – название вашего класса.

Ввод вложенных блоков. Пишете section.class-name>article.class-name2>p, жмёте — получаете:

Построение списков. Пишете ul>li*4>a, жмёте — получаете:

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

ColorPicker

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

DocBlockr

Плагин «знает» формат комментариев для большинства языков программирования и позволяет быстро вставлять ваши описания в код.

Color Highlighter

Полезный плагин, который сразу показывает цвет, написанный в файле css в шестнадцатеричном коде.

SublimeREPL

Устанавливается по желанию, содержит встроенные компиляторы для нескольких языков программирования, в том числе PHP и Python. После установки в меню появляется вкладка «Toolse -> SublimeREPL», нажав которую вы увидите выпадающую панель с перечнем языков. Ещё один шаг на пути к полноценной IDE. Достаточно удобно, если вы хотите сразу же проверить работу кода не выходя из редактора.

Установка SASS (SCSS) на SublimeText

Существует три способа подключить препроцессор SASS на Sublime.

Во-первых, вы можете использовать программу Koala, о которой подробно рассказано вот здесь.

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

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

1 Установка SASS на компьютер

Написан этот инструмент на языке Ruby, так что вам придётся установить компилятор языка. Пользователям Windows сделать это проще всего по следующей ссылке. Просто выбираете последнюю версию, с учётом вашей системы 32 или 64 битной и устанавливаете. Все остальные могут воспользоваться вот этим сайтом.

В процессе установки не забудьте установить флажок на пункте «Add Ruby executables to your PATH»

Затем запускаете консоль, нажав Win + R и набрав «cmd». Либо, кому больше нравится, запустив Windows PowerShell. В командной строке наберите инструкцию для Ruby: «gem install sass» (без кавычек).

Компилятор установлен глобально и теперь нужно настроить необходимые плагины для работы с ним.

2 Установка плагинов для использования SASS

Для этого потребуются следующие плагины:

SASS Build – запускает компилятор и формирует файл css. Для настройки перезагрузите Sublime, откройте меню «Tools —> Build System» и выберите пункт SASS. Построение запускается по нажатию клавиш Ctrl + B.

SublimeOnSaveBuild – устанавливаете опционально. Запускает компиляцию каждый раз при сохранении файлов проекта.

3 Встроенный компилятор SASS для Sublime

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

В качестве выхода был предложен плагин Libsass Build. Как пишут разработчики, он работает через некий интерфейс sassc для более быстрой компиляции по сравнению с официальной реализацией Ruby.

Заключение

Итак, мы установили «лучший текстовый редактор всех времён и народов» SublimeText, настроили его внешний вид, добавили необходимые для работы плагины и подготовили всё необходимое для работы с препроцессором.

Sublime Text

Sublime Text для Windows

Sublime Text (Саблайм текст) — удобный редактор кода с минималистичным дизайном, широким функционалом и поддержкой плагинов.

Интерфейс Sublime Text (версия 3.2.2)

Этот инструмент отлично подходит как профессиональным программистам и веб-разработчикам, так и новичкам. Программа разработана, в первую очередь, для работы с Python, в то же время предусмотрена поддержка и многих других языков программирования.

Скачайте бесплатно последнюю версию Sublime Text на нашем сайте по прямой ссылке. Редактор кода имеет встроенную поддержку русского языка и работает с Windows 10, 8, 7, Vista, XP. Мы описали некоторые базовые функции программы ниже, а также составили инструкцию по установке.

Возможности программы

Интерфейс

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

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

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

Вкладочный интерфейс

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

Еще одна особенность — подсветка парных скобок. Здесь нужно только установить курсор внутри сложной функции, и автоматически будут подсвечены парные скобки.

Настройки редактора

Редактирование кода

Начать работу с редактором довольно просто, здесь, в отличие от многих профессиональных, доступ ко всем опциям возможен с помощью вызова контекстного меню. Кроме того, нет необходимости изучать различные режимы, как во многих аналогах. Все сочетания клавиш легко выучить в процессе работы. Редактор можно назвать идеальным для начинающих программистов.

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

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

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

Автозавершение кода

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

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

Инструменты

• Проекты — есть возможность объединить несколько файлов в один проект и применять к ним одновременно одинаковые операции;
• Удобная навигация — в правой части окна отображается структура кода в миниатюре, где можно быстро перемещаться по документу;
• Палитра команд — этот инструмент позволит повысить продуктивность, так как самые необходимые команды можно запускать из палитры;
• Мультивыделение — функция обеспечивает возможность выделять одновременно несколько разных блоков;
• Горячие клавиши — в настройках программы можно заменить установленные по умолчанию сочетания клавиш на любые другие.

Горячие клавиши

Плагины

Благодаря поддержке плагинов можно существенно расширить функционал приложения и упростить работу с ним. Например, используя дополнительные плагины, легко создавать готовые каркасы для HTML, искать проблемы в коде, добавлять подсветку синтаксиса для других языков программирования.

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

Плюсы и минусы

Преимущества

Программа отличается от многих редакторов понятным и удобным интерфейсом, который не требует времени на изучение. К другим преимуществам следует отнести:

• Бесплатное распространение;
• Автоматический перенос слов и строк по заданной ширине;
• Возможность настраивать отступы;
• Гибкая настройка шрифтов и подсветки;
• Полностью настраиваемый интерфейс;
• Поддержка большого числа языков программирования;
• Удобство использования (для опытных пользователей).

Недостатки

Несмотря на все свои достоинства, программа не может стать заменой полноценной IDE.

• Нет встроенной консоли;
• Есть проблемы с обратной совместимостью;
• Не поддерживает русский язык.

Скачать бесплатно

Версия	Размер	Файл
3.2.2	10.4 Мб	exe

Скачайте Sublime Text бесплатно с помощью MultiSetup или по прямой ссылке.

Горячие клавиши

Клавиши	Действия
Ctrl + l	Выделить строку
Ctrl + Shift + M	Выделить текст между двумя парными скобками
Ctrl + Shift + A	Выделить текст между двумя парными тегами
Ctrl + Shift + J	Выделить текст с соответствующим отступом
Ctrl + Shift + Space	Выделить по контексту
Ctrl + Shift + Left	Выделить слово слева
Ctrl + Shift + Right	Выделить слово справа
Ctrl + A	Выделить весь текст
Ctrl + Shift + Up	Переместить выделенные строки вверх
Ctrl + Shift + Down	Переместить выделенные строки вниз
Сtrl + Shift + D	Дублировать строку
Ctrl + Shift + K	Удалить строку
Ctrl + J	Объединить выделенные строки
Alt + Q	Объединить строки в параграфе
Ctrl + Enter	Добавить пустую строку под курсором
Ctrl + Shift + Enter	Добавить пустую строку над курсором
Ctrl + /	Добавить или убрать однострочный комментарий
Ctrl + Shift + /	Добавить или убрать блочный комментарий
F9	Отсортировать строки в алфавитном порядке
Ctrl + F9	Отсортировать строки в алфавитном порядке с учетом регистра
Ctrl + K, Ctrl + L	Трансформировать выделенный текст в нижний регистр
Сtrl + K, Ctrl + U	Трансформировать выделенный текст в верхний регистр
Alt + .	Закрыть незакрытый тег
Alt + Shift + W	Обернуть тегом выделенный текст
Ctrl + C	Копировать
Ctrl + V	Вставить
Ctrl + Shift + V	Вставить с отступом
Ctrl + X	Вырезать
Ctrl + Z	Отмена последнего действия
Ctrl + Shift + Z	Повторить последнее отмененное действие

Установка на компьютер

Для установки Sublime Text вам понадобится скачать установочный файл с нашего сайта. Далее запустить его и следовать дальнейшей инструкции.

Путь установки

1. Выберите путь (каталог) установки редактора и нажмите «Next >».

Настройки установки

2. Опциональные настройки установки, выберите добавлять ли ярлык в контекстное меню Windows и на рабочий стол.

Начало установки

3. Все готово к инсталляции программы. Нажмите «Install».

Копирование файлов

4. Процесс копирования файлов программы и прочие инсталляционные действия. Просто немного подождите…

Завершение установки

5. Установка Sublime Text завершена! Нажмите «Finish».

Как пользоваться

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