Как в sublime text

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

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

Лайфхаки

Автоматическое выравнивание html кода SublimeText 3. Можно ли настроить SublimeText 3 таким образом, чтобы он автоматически выравнивал/структурировал html код, когдя я его вставляю/пишу?

Можете делать ctrl + a, потом Edit → Line → Reindent.
Используйте хоткеи на Reindent. Открываете User Hotkeys и пишите

[ { "keys": ["ctrl+shift+r"], "command": "reindent", "args": { "single_line": false } } ]

Есть встроенные средства Ctrl+Shift+P → Indentation: Reindent Lines
Внизу справа где «Tab size: N» жмем и выбираем: «Convert Indentation to Tabs»

SublimeText 3 это редактор, а не IDE (например Netbeans), поэтому в нем нельзя форматировать код учитывая вставки html в PHP коде.

Хоткейс

Ctrl+Shift+K — удалить строку, в которой курсор
Ctrl+Shift+D — дублировать строку на которой стоит курсор, новая строка вставляется ниже
Ctrl+D — комментировать выделенный текст или строку в которой находится курсор

Package Control менеджер плагинов

Package Control — это менеджер плагинов для Sublime Text 3.

Перейдите на сайт Package Control https://packagecontrol.io/installation

Скопируйте код для вашей версии Sublime Text 3:

Запускаем Sublime Text, переходим в меню «View→Show Console»
В строке консоли вставляем код и жмем клавишу Enter
Должно появиться в меню Preferences→Package Control

Для инсталляции новых пакетов плагинов, например Emmet, в запущенном Package Control выберите «Install package». Откроется окно с базой пакетов, в строке этого окна наберите имя нужного вам пакета, например Emmet и нажмите на нем.

Проверяем работу Emmet: создайте пустой файл с расширением html, нажмите Shift+!, а потом клавишу Тab и появится код заготовки страницы html.

Web Frontend | Урок 2. Создаем файлы в Sublime Text 3.

Как стать программистом? Python, Java, FrontEnd или .NET – что выбрать?

Обзор Front-end фреймворков и их актуальность в 2023 году

FrontEnd для новичков. Создаём лендинг с нуля

Какая разница между Frontend и Backend разработкой?

Как стать Frontend-разработчиком в 2023 году

Как составить резюме, чтобы вас пригласили на собеседование

Как правильно составить резюме для поиска работы в международной IT-компании

Тренды FrontEnd разработки 2023. Какие знания и навыки нужны джуниору по сравнению с 2022

Практика создания файла для сайта Sublime Text 3. Как задать файлу тип сразу HTML и CSS. Данный урок будет интересен начинающим разработчика и тем кто впервые работает с редактором Sublime Text 3. Смотрите новые видео на видеоканале ITVDN и получайте еще больше знаний и навыков.

Покупай подписку с доступом ко всем курсам и сервисам

Библиотека современных IT знаний в удобном формате

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

• Все видеокурсы на 3 месяца
• Тестирование по 10 курсам
• Проверка 5 домашних заданий
• Консультация с тренером 30 мин

Быстрая настройка 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 вручную, скачайте его и распакуйте в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

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

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

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

Keymap (Windows Users): [ < "keys": ["alt+shift+f"], "command": "reindent" >, ] Settings: < "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", >

Код пресета для пользовательских настроек (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. Показать меню можно нажатием клавишы Alt на клавиатуре.

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

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

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

Я — фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

• Настройка VS Code для верстки
• Simple Starter — простой стартер для верстки | Материалы урока
• Делаем вкладки в проводнике Windows. Настройка QTTabBar от А до Я
• Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
• Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
• Актуальный способ установки и настройки окружения Windows WSL для веб-разработки

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

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

Обычный поиск

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

Наряду с обычным поиском, существует еще дополнительный Find Incremental Find , который вызывается сочетанием клавиш ctrl i . Его единственное отличие состоит в том, что после нажатия на Enter , поиск остановится на первом найденном совпадении. Какой из вариантов использовать, дело исключительно личных предпочтений.

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

alt r	Поиск с использованием регулярных выражений.
alt c	Чувствительность к регистру.
alt w	Поиск запроса целиком.
Поиск в обратном направлении.
Бесконечный поиск.
Поиск внутри выделенного фрагмента.
Подсвечивать совпадения.
Замена с сохранением регистра символов.
Выводить результат поиска вместе с контекстом.
Использовать буфер.
alt enter	Найти все.
ctrl alt enter	Заменить все.

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

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

Поиск с заменой мало чем отличается от обычного поиска, кроме самого процесса замены. На чем стоило бы остановится, так это использование регулярных выражений. Если вы используете сложные выражения и вам необходимо подставить результат поиска в замену, то следует использовать следующие сочетания символов \1 , \2 , \3 и так далее в зависимости от подстановки необходимого подвыражения.

Например: выражение

(.+?)

со строкой замены \1 удалит все теги

и оставит текст внтури них нетронутым.

Поиск по файлам

Поиск по всем файлам, которые добавлены в проект. Вызывается нехитрым хоткеем ctrl shift f или из меню Find Find in Files. . К сожалению, отображения процесса поиска, то есть переход от результата к результату, происходит только внутри открытого файла. Для того, чтобы увидеть результат полностью, нужно нажать кнопку Find справа от строки запроса или Enter . Откроется отдельная вкладка с результатами поиска, со строками, в которых найдены совпадения с вашим запросом.

Режим имеет неплохой фильтр. Это поле «Where». Здесь вы можете указать, где именно вы хотите призвести поиск. Например, зпрос *.* будет искать везде, а *.*,-*.txt везде, кроме файлов с расширением txt. Также необязательно искать только внутри файлов проекта. Вы можете добавить полный путь к папке, в которой желаете произвести поиск и указать маски для типов файлов. Правда, в этом случае, поиск внутри проекта происходить не будет.

Быстрый поиск

Не всегда нужно вызывать панель поиска и вручную набирать то, что мы хотим найти. Если вам нужно найти что-то, что уже есть в тексте, например, переменную, то установите на нее курсор и нажмите ctrl e . Эта переменная, будет скопирована в буфер поиска и для того, чтобы найти ее следующее вхождение, достаточно просто продолжить, нажав f3 . Если вы хотите найти и выделить сразу все упоминания переменной, нажмите alt f3 .

Отдельно стоит сказать о последовательном поиске и выделении. Если установить курсор на переменную или выделить часть текста и затем нажать ctrl d , то автоматически произойдет несколько действий: копирование строки в буфер поиска, поиск и выделение найденного текста. При повтором нажатии ctrl d будет найдено и выделено следующее вхождение искомого текста, при этом, предыдущее выделение не пропадет. Таким образом, можно параллельно редактировать текст в нескольких местах.