SublimeText 3 – продвинутый мультиплатформенный редактор кода. Он настраивается немного сложнее, чем Notepad++, но и имеет намного больше плагинов, соответственно функционал редактора можно значительно расширить.
Редактор Sublime Text 3 – распространяется по коммерческой лицензии без особых ограничений. Версия без лицензии будет лишь иногда ненавязчиво напоминать о том, что лицензия должна быть приобретена для дальнейшего использования.
Для начала нам нужен установленный PHP в системе и прописанный в Path, для Windows я использую OSPanel .
Прокачка займет немало времени, зато сэкономит в процессе работы еще больше. Тут, как говорится : лучше день потерять, зато потом за пять минут долететь. Я специально проставил ссылки на все плагины Sublime Text 3, чтобы лучше понять, как они работают, не поленитесь пройти по ним и прочесть оригинальные инструкции.
Качаем версию Sublime Text 3 для нашей ОС, устанавливаем, запускаем.
Идем в пользовательские настройки кнопок: Preferences – Key Binding, идем во вкладку User (вторая вкладка), тыкаем в нее курсор, вставляем туда:
Sublime Text3-первое знакомство!КАК ВЫВЕСТИ ДАННЫЕ? КАК ЗАПУСТИТЬ ПРОЕКТ
Эта запись добавляет горячие клавиши alt+shift+f для команды reindent – форматирования выделенного кода (выравнивания отступов).
Далее создадим файл пользовательских настроек: Preferences – Setting – User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences.sublime-settings, если нет, создаем его.
Давайте установим руссификатор
(Размер: 21 Кб)
Распаковываем скачанный архив и копируем все файлы с расширением .sublime-menu (кроме папки «backup») в одну из следующих папок (в зависимости от вашей операционной системы):
| Операционная система | Путь |
| Windows XP | c:Documents and SettingsИмя_пользователяApplication DataSublime Text 3PackagesDefault |
| Windows 7/8 | c:UsersИмя_пользователяAppDataRoamingSublime Text 3PackagesDefault |
| Windows (Portable версия) | папка_с_программой_Sublime_TextDataPackagesDefault |
| OS X | ~/Library/Application Support/Sublime Text 3/Packages/Default/ |
| Linux | ~/.config/sublime-text-3/Packages/Default/ |
Если папки «Default» по указанному пути нет, то необходимо создайть ее.
Как установить плагин Emmet в Sublime Text
Плагин Emmet позволяет писать код быстрее, благодаря сочетанием клавиш. Например базовую HTML5-разметку вы можете создать сочетанием клавиш ! + tab. Удобно правда?
Как использовать Sublime Text для Python
Для установки Emmet перейдите в Preferences — Package Control и в открывшемся окне напечатайте install package, затем введите слово emmet и выберите его для запуска процесса установки. Иногда требуется перезагрузка Sublime Text 3 после установки новых дополнений.
Важно: плагин Emmet в Sublime Text 3 не будет генерировать код, если вы ранее не сохранили файл, например, как index.html
Более подробную работу с Emmet и горячие клавиши мы рассматриваем в курсе HTML/CSS и других курсах Профессия веб-программист. Пройдя данные курсы, вы получите знания основ программирования и создадите на практике свой первый профессиональный сайт о кино.
Начать обучение на курсе Профессия веб-программист вы можете прямо сейчас, без ожидания пока наберется группа, и данный курс рассчитан на самостоятельное обучение, что позволит вам обучаться по собственному расписанию когда вам будет удобно, а если у вас появятся вопросы в процессе обучения, вы сможете их задать в наше сообщество FRUCTCODE, где другие студенты обязательно вам помогут решить задачу.
Устанавливаем Package Control
Package Control необходим для того чтобы расширять функциональность редактора Sublime Text 3 различными плагинами.
Идем на сайт,смотрим инструкцию по установке. Или заходим в редактор, нажимаем клавиши: Ctrl + ~ , в появившейся коммандной строке вводим следующую комманду на установку:
import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘https://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)
Далее нажимаем Ctrl+Shift+P и набираем Package Control — Install Package .
Обзор Sublime Text 3, основные плагины.
Некоторое время назад в качестве альтернативы знаменитому Notepad++, был установлен редактор Sublime Text 3. После работы на нем в течении некоторого времени стало понятно, что он останется основным редактором, Notepad++ отошел на второй план в качестве запасного варианта.
Sublime Text 3 — при первом запуске осталось сразу положительное впечатление, оформление и стили шрифтов.
В редакторе возможно открытие нескольких окон одновременно и разделение экрана как по горизонтали так и по вертикали. Экран делится не только пополам, но и на четыре колонки например, в каждой колонке возможно открыть отдельный файл.
Справа у каждого окна имеется полоса прокрутки в виде карты кода, ее можно убрать в настройках если нет в ней необходимости. Так же можно вывести или убрать панель проектов или открытых файлов — она располагается слева.
К примеру в ней можно создать новый файл. переименовать существующий или удалить его, открытый проект вы видите в виде дерева папок и файлов как в файловом менеджере.
Самое интересное.
В Sublime Text вы можете просматривать файл изображения, это удобно и ускоряет поиск нужного, при верстке например.
Единственное не хватало функционала, но оказалось, что его функционал огромен, к этому текстовому редактору существует множество плагинов которые безгранично расширяют его функционал.
Опишем некоторые плагины, основные.
На официальном сайте и в сообществах этого редактора вы сможете найти плагины которые расширят функционал этого редактора в той сфере в какой нужно вам.
Самый главный плагин — Package control этот плагин устанавливается в первую очередь, в дальнейшем с помощью него вы сможете устанавливать или удалять все последующие плагины.
Скачивать их не надо, просто набираем название нужного в поиске через Package control. В строке поиска пишем нужный, затем выбираем необходимый. Выбранный плагин автоматически скачивается и установится.
(нажимаем Ctrl+Shift+P, пишем list, жмём enter или выбираем пункт «Package Control: List Packages»)
Второй по популярности плагин Emmet. Этот плагин сильно ускоряет написание кода, для верстальщика это просто чудо. К примеру набрав всего один символ ! и после этого нажав TAB мы получаем такой код:
Плагин Alignment — выравнивает код. Очень удобно когда вы открываете чужой файл и пытаетесь в нем разобраться, выделяем код и жмем ctrl+Alt+A и код стало приятно читать.
Чтоб понять все прелести и удобство данного редактора необходимо его попробовать. Поработать на нем и настроив его под свои нужды вы сразу поймете как он ускоряет работу и удобен.
Так же имеется множество плагинов которые не только расширяют функционал но и меняют внешний вид. Вы сможете придать внешний вид в стиле который вам нравится
Sublime Text 3 — программа условно бесплатная и во время работы иногда выскакивает окно с предложением его купить, но при нажатии ESC окно пропадает и ни как не ограничивает функционал программы.
Разработаны версии как для Windows так и для MacOS и Linux.
Официальный сайт программы www.sublimetext.com
Сайт с русской документацией www.sublimetext.ru
Установка цветовых схем
Снова нажимаем Ctrl+Shift+P и набираем daylerees — themes .
Быстрое выделение текста
Множество вариантов выделить определённый фрагмент текста, например то, что заключено внутри скобок – Ctrl+Shift+M. Пригодится в программировании, например. Ставим курсор в любое место внутри скобок и нажимаем заветное сочетание клавиш! Редактор выделит текст по обе стороны от курсора до ближайшей пары скобок.
Если же речь идёт о HTML/XML коде, то выделит содержимое какого-либо тега можно нажатием клавиш Ctrl+Shift+A – выделится только текст внутри конкретного тега. Это очень удобно, если имеется большая вложенность, а инденты (отступы) расставлены не очень красиво.
Кстати, об отступах. Мало того, что они здесь гибко настраиваются, так ещё и есть возможность выделить весь текст на определённом уровне отступов. Для этого нужно запомнить сочетание клавиш Ctrl+Shift+J. Запомнить такое количество клавиш сразу тяжело, но стоит попрактиковать это пару часов в работе и всё!
Кстати, можно выделив какой-то фрагмент текста быстро выделить и другие вхождения этого же фрагмента в тексте нажав Ctrl+D, причём тут мы сталкиваемся с таким понятием, как множественное выделение и редактирование. Теперь в тексте у нас несколько курсоров! Можно вводить и удалять текст одновременно в несколько мест! Этот способ хорош для переименования класса или переменной или перепечатки какого-либо участка текста, если использование поиска и замены нежелательно!
Плагины
Плагинов великое множество! А так как редактор, насколько я знаю, написан на Python, то и писать какие-то свои дополнения под силу каждому, кто знаком с языком.
Установка плагинов достаточно проста – в уже упомянутой мной панели быстрого доступа к настройкам вводим Install Packages и попадаем в панель дополнений, где так же действует поиск. Выбрав нужное дополнение жмём Enter и оно устанавливается! Нет ничего проще!
Плагинов великое множество! Есть и для встраивания терминала прямо в окно редактора, для работы с git, подсветки синтаксиса и ещё много чего ещё!
Сниппеты
Вот эта тема мне очень понравилась! Есть определённые заранее заготовленные “кирпичики”, которыми можно пользоваться для ускорения ввода текста. Кроме того, можно задавать собственные! Сейчас покажу.
Плагины
Ставим плагин Emmet, он помогает расширить количество сокращений удобных для вёрстки кода (вот список), переходим в редактор и напишем конструкцию вида:
То есть класс, в который вложен ul, в который вложены li в количестве пяти штук, имеющие класс MenuItem с содержимым тега “Пункт ” и порядковый номер элемента.
Нажимаем Tab и конструкция развернётся в
По ссылке есть и правила, по которым преобразуются сниппеты. Там ОЧЕНЬ много материала, стоит брать на вооружение.
Собственные сниппеты
Установка и настройка Sublime Text 3
Идем на официальный сайт Sublime Text в раздел Download, и скачиваем последнюю версию программы, для своей операционной системы я скачал программу разрядностью 64 бит. Запускаем, проверяем, что все работает. Кстати, программа не является бесплатной и если не приобретать ключ, то никаких ограничений нет кроме надписи «unregistered» в заголовке и не назойливого всплывающего окна с предупреждением через какой-то промежуток времени (1 раз в пол часа — час).
Давайте установим руссификатор
Скачать руссификатор для Sublime Text 3 (Размер: 21 Кб)
Распаковываем скачанный архив и копируем все файлы с расширением .sublime-menu (кроме папки «backup») в одну из следующих папок (в зависимости от вашей операционной системы):
| Операционная система | Путь |
| Windows XP | c:Documents and SettingsИмя_пользователяApplication DataSublime Text 3PackagesDefault |
| Windows 7/8 | c:UsersИмя_пользователяAppDataRoamingSublime Text 3PackagesDefault |
| Windows (Portable версия) | папка_с_программой_Sublime_TextDataPackagesDefault |
| OS X | ~/Library/Application Support/Sublime Text 3/Packages/Default/ |
| Linux | ~/.config/sublime-text-3/Packages/Default/ |
Если папки «Default» по указанному пути нет, то необходимо создайть ее.
Настроим автоперенос строки
Открываем Preferences → Настройки — Пользовательские
Дописываем следующую строчку:
«word_wrap»: true
Борьба с кодировкой в файлах
Повторим Preferences → Настройки — Пользовательские. Необходимо заменить
«fallback_encoding»: «Western (Windows 1251)»,
«fallback_encoding»: «Cyrillic (Windows 1251)»,
Устанавливаем Package Control
Package Control необходим для того чтобы расширять функциональность редактора Sublime Text 3 различными плагинами.
Идем на сайт,смотрим инструкцию по установке. Или заходим в редактор, нажимаем клавиши: Ctrl + ~ , в появившейся коммандной строке вводим следующую комманду на установку:
import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)
Далее нажимаем Ctrl+Shift+P и набираем Package Control — Install Package .
Установка цветовых схем
Снова нажимаем Ctrl+Shift+P и набираем daylerees — themes .
Дополнительно
Для доступа к FTP необходимо установить «SFTP»
Еще одна интересная фича «Goto-CSS-Declaration». При клике на класс, показывает этот класс в файле стилей.
Источник: amur.pro
Первоначальная настройка Sublime Text
Нажимаем клавиатурное сочетание Ctrl+Shift+P (также можно выбрать пункт меню Tools -> Command Palette), чтобы отобразился список команд.
Набираем команду Install Package
Набираем название пакета Emmet
Дожидаемся успешной установки
3. Несколько полезных пакетов Sublime Text 3
- AutoFileName — автокомплит для названий файлов внутри проекта.
- AdvancedNewFile — создание нового файла через Ctrl+Alt+N
- BracketHighlighter — подсветка парного тега в HTML
- Color Highlighter — превью цвета в файлах, например видеть #bce8f1.
- Material Theme — красивая тема в стиле материального дизайна. Активируется командой «Material Theme: Activate Theme»
- SideBarEnhancements — дополнительные команды контекстного меню для проводника
Установка всех пакетов аналогична установки пакета Emmet.
Файл настроек Sublime Text
Все индивидуальные настройки доступны в пункте меню Preferences -> Settings.
Источник: tyapk.ru