Как в 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.

11 Самых Популярных Статей

1. ulimit (limits.conf) управление ограничениями ресурсов ОС Linux
2. 7 способов сравнения файлов по содержимому в Windows или Linux
3. Что такое страны tier 1,2,3 и как правильно выбрать ГЕО для рекламной кампании
4. Настройка, использование GitLab CI/CD
5. Что означает «> /dev/null 2>&1» или перенаправление STDIN, STDOUT и STDERR?
6. Настройка и использование сервера OpenVPN в Linux
7. PostgreSQL: создать БД, пользователя, таблицу, установить права
8. Виды кодировок символов
9. Использование rsync в примерах
10. my.cnf примеры конфигурации MySQL, MariaDB
11. dig проверка DNS сервера

11 Самых Популярных Обзоров

1. ТОП 4 лучших антидетект браузеров в 2023 (Бесплатные & Платные)
2. Обзор и отзывы о Namecheap в 2023 году
3. Хостинг Zomro (Зомро)
4. Обзор браузера Dolphin
5. ТОП 3 Проверенных VPN, Прокси, Хостинг VPS Турция в 2023
6. Что такое абузоустойчивый хостинг (bulletproof)?
7. Обзор и отзывы о 4VPS (FourServer) в 2023 году
8. Обзор и отзывы AstroProxy в 2023 году
9. Обзор и отзывы о PQ Hosting в 2023 году
10. Обзор и отзывы о Hostinger в 2023 году: преимущества и недостатки
11. Проверенные VPS / VDS хостинг провайдеры

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

Как в любом текстовом редакторе, в 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 будет найдено и выделено следующее вхождение искомого текста, при этом, предыдущее выделение не пропадет. Таким образом, можно параллельно редактировать текст в нескольких местах.

Быстрая настройка 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 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)