Содержание:

Что нужно для HTML и CSS в Sublime Text 3

Для комфортной работы с HTML и CSS в Sublime Text важны три вещи:
- подсветка синтаксиса (чтобы редактор понимал, что это HTML/CSS)
- автодополнение и быстрые вставки (чтобы писать разметку и стили быстрее)
- удобные “мелочи” (пути к файлам, выравнивание, цвет в коде, подсветка ошибок)

Ниже - рабочий порядок настройки с нуля.

Установка базового менеджера пакетов: Package Control

Без него плагины ставятся заметно неудобнее.

  1. Откройте Command Palette: Ctrl + Shift + P
  2. на macOS: Cmd + Shift + P
  3. Введите: Install Package Control
  4. Выберите пункт, дождитесь установки

Проверка: в Command Palette должны появляться команды вида Package Control: ....

Поставьте главные плагины для HTML и CSS

Откройте Command Palette (Ctrl + Shift + P) и ставьте пакеты через Package Control: Install Package.

Набор “must have” для верстки:

Плагин Зачем для HTML/CSS Что получите на практике
Emmet Быстрое написание HTML/CSS по сокращениям div>.card>ul>li*3 - превращается в разметку за секунды
AutoFileName Автокомплит путей к файлам src="images/..." и url(...) - подсказки
Gist Удобные сниппеты из GitHub Gist вставки готовых кусочков кода
Color Highlighter/ColorPicker/ColorHelper Подсказки по цветам в CSS проще понимать, что за цвет и как он выглядит
BracketHighlighter (или аналог) Подсветка парных скобок/тегов меньше “потерял где закрывается”
W3CValidators Валидация HTML (пригодится для проверки) подсказки по ошибкам разметки

Примечание: названия пакетов в Package Control могут отличаться (например, у Color-плагинов разные варианты). Если пакет не находится - поставьте ближайший по описанию.

Включите корректную подсветку языков

Обычно это работает “из коробки”, но лучше закрепить.

  1. Откройте index.html - снизу в правом углу должен быть выбран язык (HTML).
  2. Откройте style.css - снизу должен быть CSS.
  3. Если редактор ошибается:
  4. нажмите на текущий язык снизу
  5. выберите нужный (HTML / CSS)

Настройка “визуального комфорта”: тема, шрифт, пробелы

Поставьте тему (по желанию, но это реально влияет)

Если хотите быстро и по-человечески, ставьте One Dark Material Theme (или похожую).

  1. Через Package Control поставьте:
  2. цветовую схему One Dark Color Scheme (Color Scheme)
  3. тему One Dark Material (Theme)
  4. Затем выберите их в настройках:
  5. Preferences -> Color Scheme
  6. Preferences -> Theme

Если при копировании чужих настроек тема не применится - обычно помогает выбрать тему вручную через меню (редактор упрямый, но это лечится).

Включите отображение непечатаемых символов

Откройте настройки пользователя:
- Preferences -> Settings - User

Добавьте строку (вставляйте с запятой там, где у вас заканчиваются предыдущие поля):

"draw_white_space": "all"

Когда непечатаемое видно, проще не накосячить с отступами и переносами.

Шрифты и размер

В Preferences -> Settings - User укажите, например:

"font_face": "Courier New",
"font_size": 13

Быстро менять размер можно колесом мыши + Ctrl (или на macOS - сочетания могут отличаться, но обычно это работает).

Мини-настройки, которые реально облегчают работу

В Preferences -> Settings - User можно держать компактный набор (как отправная точка):

{
  "draw_white_space": "all",
  "tab_size": 3,
  "font_size": 13,
  "margin": 0
}
  • tab_size - чтобы табуляции визуально совпадали с тем, как вы пишете.
  • margin - убрать лишние поля, чтобы код был плотнее.
  • draw_white_space - видеть пробелы/табуляции.

Настройте сниппеты и быстрые клавиши (минимум, но по делу)

Быстрое выравнивание (удобно при правках)

В Preferences -> Key Bindings добавьте:

[
  { "keys": ["alt+shift+f"], "command": "reindent" }
]

Работает как “привести отступы в порядок” после вставок и форматирования.

Для удобной верстки разнесите файлы по окну

В Sublime удобно держать рядом:
- index.html
- style.css
- (иногда) app.js

Сделайте разделение:
- View -> Layout -> Columns/Rows/Grid (названия могут чуть отличаться)
- по смыслу:
- Columns: режет вертикально (две колонки)
- Rows: режет горизонтально (несколько строк)
- Grid: сетка

Главное - чтобы HTML и CSS были на виду одновременно.

Подключение “запуска кода” (проверка в браузере)

Самый практичный путь для верстки:
- использовать LiveReload или другой авто-обновлятор
- либо собирать через “Build system”, но для чистых HTML/CSS обычно это лишнее

Если нужно просто посмотреть правки в браузере - LiveReload обычно быстрее и проще.

Типичные проблемы и как их исправить

Проблема Как выглядит Решение
Emmet не работает в HTML/CSS сокращения не разворачиваются проверьте, что файл действительно HTML/CSS и пакет установлен через Package Control
Тема не применилась цвета как “не те” или тема не подхватилась выбирайте тему/Color Scheme вручную в Preferences (а не копируйте настройки вслепую)
Съехали отступы после вставки код “кривит” выделите и нажмите Alt + Shift + F (reindent)
Цвета в CSS не подсвечиваются в палитре нет подсказок установите Color Highlighter/ColorPicker/ColorHelper и проверьте, что он включился
Автокомплит путей не появляется не предлагает images/... установите AutoFileName и проверьте, что правите именно строки с путями

Рекомендуемый стартовый набор под HTML и CSS

Чтобы не думать, что ставить дальше, держите такой минимум:

Категория Что поставить/настроить
Менеджер Package Control
Для скорости верстки Emmet
Пути к файлам AutoFileName
Удобство чтения тема (One Dark/любая подходящая), отображение draw_white_space
Порядок в коде hotkey на reindent (alt+shift+f)
Комфорт по CSS подсветка цветов (ColorHighlighter/аналог)

Чек-лист: “HTML/CSS готов в Sublime”

  1. Установлен Package Control
  2. Поставлен Emmet
  3. Поставлен AutoFileName
  4. Включены корректные языки для файлов (HTML для .html, CSS для .css)
  5. Выбрана тема/Color Scheme
  6. Включено отображение непечатаемых символов (опционально, но полезно)
  7. Настроена быстрая команда reindent
  8. Установлен плагин для цветов (если работаете с CSS активно)

После этого sublime превращается из “просто редактора” в нормальный инструмент для ежедневной верстки.