webdonsk.ruКак сделать красивым sublime text
Добавил пользователь Владимир З. Обновлено: 10.09.2024
SublimeText 3 – продвинутый мультиплатформенный редактор кода. Он настраивается немного сложнее, чем Notepad++, но и имеет намного больше плагинов, соответственно функционал редактора можно значительно расширить.
Редактор Sublime Text 3 – распространяется по коммерческой лицензии без особых ограничений. Версия без лицензии будет лишь иногда ненавязчиво напоминать о том, что лицензия должна быть приобретена для дальнейшего использования.
Для начала нам нужен установленный PHP в системе и прописанный в Path, для Windows я использую OSPanel .
Прокачка займет немало времени, зато сэкономит в процессе работы еще больше. Тут, как говорится : лучше день потерять, зато потом за пять минут долететь. Я специально проставил ссылки на все плагины Sublime Text 3, чтобы лучше понять, как они работают, не поленитесь пройти по ним и прочесть оригинальные инструкции.
Качаем версию Sublime Text 3 для нашей ОС, устанавливаем, запускаем.
Идем в пользовательские настройки кнопок: Preferences – Key Binding, идем во вкладку User (вторая вкладка), тыкаем в нее курсор, вставляем туда:
Эта запись добавляет горячие клавиши alt+shift+f для команды reindent – форматирования выделенного кода (выравнивания отступов).
Далее создадим файл пользовательских настроек: Preferences – Setting – User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences.sublime-settings, если нет, создаем его.
Давайте установим руссификатор
| Операционная система | Путь |
| 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/ |
Как установить плагин 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, где другие студенты обязательно вам помогут решить задачу.
Устанавливаем Package Control
Package Control необходим для того чтобы расширять функциональность редактора Sublime Text 3 различными плагинами.
Идем на сайт,смотрим инструкцию по установке. Или заходим в редактор, нажимаем клавиши: Ctrl + ~ , в появившейся коммандной строке вводим следующую комманду на установку:
Далее нажимаем Ctrl+Shift+P и набираем Package Control — Install Package .
Обзор Sublime Text 3, основные плагины.
Некоторое время назад в качестве альтернативы знаменитому Notepad++, был установлен редактор Sublime Text 3. После работы на нем в течении некоторого времени стало понятно, что он останется основным редактором, Notepad++ отошел на второй план в качестве запасного варианта.
Sublime Text 3 — при первом запуске осталось сразу положительное впечатление, оформление и стили шрифтов.
В редакторе возможно открытие нескольких окон одновременно и разделение экрана как по горизонтали так и по вертикали. Экран делится не только пополам, но и на четыре колонки например, в каждой колонке возможно открыть отдельный файл.
Справа у каждого окна имеется полоса прокрутки в виде карты кода, ее можно убрать в настройках если нет в ней необходимости. Так же можно вывести или убрать панель проектов или открытых файлов — она располагается слева.
К примеру в ней можно создать новый файл. переименовать существующий или удалить его, открытый проект вы видите в виде дерева папок и файлов как в файловом менеджере.
Самое интересное.
В Sublime Text вы можете просматривать файл изображения, это удобно и ускоряет поиск нужного, при верстке например.
Единственное не хватало функционала, но оказалось, что его функционал огромен, к этому текстовому редактору существует множество плагинов которые безгранично расширяют его функционал.
Опишем некоторые плагины, основные.
На официальном сайте и в сообществах этого редактора вы сможете найти плагины которые расширят функционал этого редактора в той сфере в какой нужно вам.
Самый главный плагин — Package control этот плагин устанавливается в первую очередь, в дальнейшем с помощью него вы сможете устанавливать или удалять все последующие плагины.
Скачивать их не надо, просто набираем название нужного в поиске через Package control. В строке поиска пишем нужный, затем выбираем необходимый. Выбранный плагин автоматически скачивается и установится.
Второй по популярности плагин Emmet. Этот плагин сильно ускоряет написание кода, для верстальщика это просто чудо. К примеру набрав всего один символ ! и после этого нажав TAB мы получаем такой код:
Плагин Alignment — выравнивает код. Очень удобно когда вы открываете чужой файл и пытаетесь в нем разобраться, выделяем код и жмем ctrl+Alt+A и код стало приятно читать.
Чтоб понять все прелести и удобство данного редактора необходимо его попробовать. Поработать на нем и настроив его под свои нужды вы сразу поймете как он ускоряет работу и удобен.
Так же имеется множество плагинов которые не только расширяют функционал но и меняют внешний вид. Вы сможете придать внешний вид в стиле который вам нравится
Sublime Text 3 — программа условно бесплатная и во время работы иногда выскакивает окно с предложением его купить, но при нажатии ESC окно пропадает и ни как не ограничивает функционал программы.
Разработаны версии как для Windows так и для MacOS и Linux.
Установка цветовых схем
Снова нажимаем 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 и конструкция развернётся в
По ссылке есть и правила, по которым преобразуются сниппеты. Там ОЧЕНЬ много материала, стоит брать на вооружение.
Собственные сниппеты
Мы также можем делать собственные сниппеты. Весьма несложно. Делается следующим образом:
Думаю понятно, что есть что. content – то, что будет вписано. tabTrigger – по какому сочетанию клавиш это вызывать. scope – область видимости, с какими типами файлов работать. Всё есть в документации. Я же сделал цикл for и описал там некоторую текстовую константу с тремя маркерами ввода, причём в пермое задано значение по умолчанию “0”. Символы $ тут являются служебными, и те, что относятся к тексту, приходится экранировать слешем.
Сначала курсор у нас стоит в позиции с выделенным текстом 0 (это значение по умолчанию $), при нажатии следующего Tab, он перейдёт в позицию $, затем $. Таким образом мы можем расставить якоря, куда прыгать курсору для ввода текста! Также есть много служебных ключевых слов и методик, позволяющих модифицировать тело сниппета на лету. Ну я так не углубляюсь, просто пишу часто употребляемые конструкции.
Настройка Sublime Text 3
По умолчанию все настройки уже заданы и записаны в файл Preferences Settings — Default
. Если нам необходимо внести изменения, то мы лезем на сайт, ищем нужные настройки, открываем
Preferences User — Default
и вписываем свои значения.
Ниже выкладываю свой файл с настройками, на заполнение которого ушел не один месяц, в котором представлены основные настройки. Остальное уже самостоятельно, через мануал.
Особое внимание нужно обратить на то, что при смене настроек через меню, в файле настроек исчезают все комментарии к переменным. По крайне мере у меня и я неоднократно злился, пытался понять почему т.к. люблю, когда все подписано и красиво упаковано.
Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода 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 будет установлен, о чем вы получите соответствующее уведомление.
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.
- W3CValidators - мощный набор валидаторов для 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\\AppData\Roaming\Sublime Text 3"
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.
Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.
Обзор SublimeText
Программа выполнена с суровым интерфейсом без кнопок и декоративных элементов, что позволяет на 100% использовать экранное пространство для дела. Экран можно разбить на несколько рабочих областей. Например, слева открывать файл html, а справа css и параллельно с ними работать. Отдельный плюс – можно открывать не отдельные файлы, а целые каталоги и работать в них. Далее мы подробно рассмотрим, что к чему, на примере нашего проекта.
Особая гордость разработчиков – интеллектуальный поиск (Incremental Find), который будет находить не только точное вхождение, но и близкие по написанию значения. Понятно, можно использовать обычный поиск, в том числе и с регулярными выражениями.
И, пожалуй, самая большая вишенка на торте – возможность мультиколонного выделения.
Недостатки – это, как обычно, обычно оборотные стороны достоинств. Профессионалы скажут, что Sublime не дотягивает до полноценной IDE и будут правы. Новичкам покажется жутковатым способ настройки через JSON. Любителям офисных программ будет скучновато без красивых кнопок в интерфейсе. Кого-то будут раздражать периодические призывы купить программу, а кому-то не понравится необходимость работы со сторонними плагинами. Тем не менее, как показывает опыт, для разработки сайтов средней и малой сложности SublimeText вполне годится.
Установка и настройка
С установкой никаких проблем нет, достаточно скачать дистрибутив с официального сайта. Представлены версии для Linux, MacOS 32-и 64-разрядной Windows, в том числе portable версии. Файл загрузки невелик, около 8Мб, в дальнейшем, после установки плагинов, программа разрастается до 20-30 Мб. Память потребляет тоже очень скромно, то есть, в целом всё достаточно бережливо с точки зрения ресурсов.
В процессе работы экран может выглядеть примерно так.
Установка плагинов
Существуют сотни плагинов, призванных облегчить жизнь разработчику и придать редактору новые возможности. Как показывает практика, лучше этим не увлекаться. Плагины пишут разные авторские коллективы, пакеты могут конфликтовать друг с другом, быть чувствительны к номеру версии и больше мешать, чем помогать. Поэтому я перечислю то, что использую в работе сам и укажу несколько интересных надстроек на ваше усмотрение.
Установка Менеджера Пакетов
Прежде всего, необходимо установить Менеджер Пакетов (Package Control). Сделать это можно вручную или через консоль.
1 Через консоль
2 Вручную
Перечислим основные полезные пакеты.
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
Установка SASS (SCSS) на SublimeText
Существует три способа подключить препроцессор SASS на Sublime.
Во-первых, вы можете использовать программу Koala, о которой подробно рассказано вот здесь.
Во-вторых, можно установить препроцессор глобально, а затем подключить нужные плагины в редакторе.
В третьих, существуют плагины, которые формируют код, используя собственные библиотеки, без внешнего компилятора.
1 Установка SASS на компьютер
Написан этот инструмент на языке Ruby, так что вам придётся установить компилятор языка. Пользователям Windows сделать это проще всего по следующей ссылке. Просто выбираете последнюю версию, с учётом вашей системы 32 или 64 битной и устанавливаете. Все остальные могут воспользоваться вот этим сайтом.
Компилятор установлен глобально и теперь нужно настроить необходимые плагины для работы с ним.
2 Установка плагинов для использования SASS
Для этого потребуются следующие плагины:
SublimeOnSaveBuild – устанавливаете опционально. Запускает компиляцию каждый раз при сохранении файлов проекта.
3 Встроенный компилятор SASS для Sublime
Также разработчики периодически пытаются придумать способы как использовать препроцессоры, не захламляя компьютер лишними файлами. Согласитесь, довольно странно тащить к себе целый компилятор одного из самых хитроумных языков высокого уровня только для того, чтобы работать с SCSS.
В качестве выхода был предложен плагин Libsass Build. Как пишут разработчики, он работает через некий интерфейс sassc для более быстрой компиляции по сравнению с официальной реализацией Ruby.
Заключение
Если вас смущают ярко-розовые HTML-тэги в цветовой схеме Монокаи, то, как сказал FODD, идите в Preferences -> Color Scheme, там по умолчанию будет выпадать список из пяти предустановленных цветовых схем. Их и выбираете.
А в %Program_ files%\Sublime Text 3\Packages\Color Scheme - Default.sublime-package лучше не лезть.
preferences -> themes -> *выбираете тему*
для цветовой схемы - вместо themes - color scheme .
советую solarized
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html sublime-text или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.21.41235
Читайте также: