Автосохранение в Sublime Text и 4 новых классных фичи
Приведу пять классных советов, которые постоянно использую в работе с редактором Sublime Text.
1. Автоматическое сохранение документа при потере фокуса
При переключении на браузер судорожно жмете Ctrl+S ? Постоянно забываете сохранить документ при переключении между редактором и браузером? Забудьте эти хлопоты. Сохранять должен редактор. Давайте посмотрим, как заставить сохранять документы в Sublime Text при потере фокуса (например, при переключении на браузер).
Для автоматического сохранения документа при потере фокуса в Sublime зайдите в файл конфигурации preferences → Settings – User и допишите строку
Перезагрузите редактор и наслаждайтесь. Кстати, для brackets есть классный плагин, который тоже позволяет сохранять документ при потере фокуса — autosave files on windows blur
2. Вставка и отступ
Одно из мегаудобных свойств в Sublime Text является возможность вставлять текст, и автоматически выравнивать его по существующему. Да, да, вы не ослышались. Редактор может выровнять вставленный кусок кода по существующему шаблону. Для обычной вставки используется сочетание клавиш Ctrl+V , а для вставки и выравнивания Ctrl + Shift + V . Кстати эти команды можно найти в меню Edit .
Если вы много работаете с кодом, то нажимать Ctrl + Shift + V приходится значительно чаще чем Ctrl + V . Так может стоит переназначить их функционал? Давайте! Зайдите в preferences → Key Bindings – User . Вставьте код:
3. Клавиши для создания отступа
Как вставить и отформатировать текст мы уже посмотрели. А если код существует, и мы хотим в Sublime Text автоматически выровнять его? Все просто: Edit → Line → Reindent и у вас появится отступ. Однако сочетания клавиш для данной функции нет. Создаем. Откройте preferences → Key Bindings — User . Здесь добавьте:
4. Подсветка измененной вкладки
Когда мы делаем сохранения в коде, то Sublime помечает измененную вкладку серым треугольником, который не очень заметен. Давайте сделаем его ярким. Заходим в preferences → Settings – User и добавляем строку:
Теперь модифицированный таб выделен желтым кругом (напомним, что цвет круга зависит от выбранной темы).
5. Одновременное редактирование нескольких слов
Поставьте курсор в том месте, где необходимо написать тег. Затем, нажмите Ctrl и кликните там, где тег будет закрываться. Теперь начинайте писать. Sublime позволяет писать одновременно в нескольких местах документа!
WEB-Верстка
Быстрая настройка Sublime Text 3 для вёрстки сайтов
Скачать дистрибутив Sublime Text 3: https://www.sublimetext.com/
По умолчанию Sublime Text — выглядит печально ��
Поэтому установим все необходимые плагины.
Настроим Package Control
Нажимаем: Ctrl + Shift + P
На MAC другое сочетание клавиш, возможно Cmd + Shift + P
Жмем Enter и устанавливаем Package Control
Package Control необходим для того, что бы можно было устанавливать необходимые пакеты и плагины для Sublime Text
После установки Package Control — установим все необходимые плагины.
Emmit — нужен для того, что бы максимально быстро писать html и css код ;
Нажимаем: Ctrl + Shift + P
Имеем список доступных пакетов (серый список)
И судя по сообщению — установка Emmet завершена!
Следующий плагин который установим: AutoFileName
— Он нужен, что бы максимально быстро прописывать пути до файлов.
Для установки нажимаем: Нажимаем: Ctrl + Shift + P
И в появившемся списке пакетов — набираем в строке: AutoFileName
Следующий плагин который установим: Gist
Гисты — это кусочки кода, которые хранятся на gist.github.com.
Причем эти кусочки кода можно прямо из Sublimetex — извлечь с gist.github.com.
Для установки нажимаем: Нажимаем: Ctrl + Shift + P
Установили Gist!
Рекомендуется посмотреть видео по настройке Gist
СЛЕДУЮЩИЙ ПЛАГИН: SASS
НЕ ЗАБЫВАЕМ УСТАНОВИТЬ Gulp sass в Terminal
Командой: npm i gulp-sass —save-dev
Да ХРЕН ТАМ! — НЕ БУДЕТ РАБОТАТЬ!
Еще необходимо доставить еще пакет:
Скрина нет) Так как уже поставил — а 2 раза установщик не показывает.
Теперь установим Внешнее оформление Sublime Text
и 2 варианта цветовых оформления на выбор:
Далее переходим собственно к настройке Sublime Text 3
Отrроется файл настроек Sublime Text3
Правим настройки прям в этом же файле и нажимаем Ctrl + S
Однако, при простом копировании настроек из статьи по ссылке — может возникать ошибка — МОл, не может найти тему One Dark!
Проблема решилась — выбором нашей темы «One Dark..»
напрямую через меню Sublime Text3:
Порядок! Продолжаем настройку :
Включить отображение непечатных символов:
нужно добавить строку в пользовательский файл настроек Sublime Text → Preferences → Settings — User.
Допишем код ЧЕРЕЗ ЗАПЯТУЮ в наш файл настроек:
«draw_white_space»: «all» //Показать все символы
Меню выключили — но можно его оперативно включать.
| Установка темы One Dark на MAC |
Выполняем стандартную установку в Sublime Text 3 через комбинацию клавиш Cmd + Shift + P
1) Ставим: Theme — One Dark
2) Ставим: One Dark — Color Scheme
Но потом, скорее всего произойдет сбой ТЕМЫ!
Что бы это исправить — идем как на картинке:
SumbLime Text -> Preferences -> Color Scheme.
И вуаля! Тема One Dark у нас встала!
| Установка темы на MAC — Завершена! |
Далее — откроем настройки клавиатуры:
Preferences → Key Bindings (Сочетания клавиш)
Далее переходим к Гисту:
и вставляем ее сюда — в правую вкладку:
Далее — откроем настройки клавиатуры Sublime Text3 на MAC:
Preferences → Key Bindings (Сочетания клавиш)
В открывшееся правое окно (документ) — вставляем строчку (см. инструкцию Windows):
И вуаля — все работает!
А точнее — выполняется Выравнивание строк кода!
Важно, обязательно оставить квадратные скобки — иначе ошибка будет и не будет работать.
Выравнивание на MAC — РАБОТАЕТ!
и откроется папка Packages
Эта папка нужна для быстрого переноса настроек — на другое рабочее место.
Alignment Package
report this ad
We are going to see how to use the Alignment package into the Sublime Text 3.
Table of Content
# Introduction Introduction
While development it is nice to see the code with well-aligned or with good indentation.
Most of the users may use the PHPStrom, VSCode, or something else. They have some extensions which do the same thing.
But, I’m a fan of Sublime Text Editor. So, I’m sharing here how to use the Alignment Package of Sublime Text Editor.
So, Lets check out the below an example of aligning and misaligned code.
Advertisement
# Example of Misaligned Code Example of Misaligned Code
# Example of Well Aligned Code Example of Well Aligned Code
I’m using the Sublime Text 3 (Unregistered). IMO it is best for the development. It has a lot of awesome features.
In this article, I’m explaining the Alignment package (It is in TOP 25 today).
Advertisement
# How to Install Alignment Package? How to Install Alignment Package?
- Press Command+Shift+P to open Command Palette.
- Type Install Package until you see Package Control: Install Package .
- When the list of packages appears, type Alignment until you find it.
- Press Enter to install Sublime Alignment.
Check out below GIF for reference to know How to Install the alignment package.
Now, Open the preferences file for Sublime Alignment:
Windows: Preferences > Package Settings > Alignment > Settings-User
Linux: Preferences > Package Settings > Alignment > Settings-User
Mac OS X: Sublime Text 2 > Preferences > Package Settings > Alignment > Settings-User
Here, We have added the = and : So, When you select the code which include the = or : then it aligns with these characters.
Advertisement
# Using Alignment Package Using Alignment Package
Select the lines you wish to align. Press Ctrl+Alt+A (Windows & Linux) or Command+Ctrl+A (Mac OS X)
Check out below example to align the code.
BEFORE
AFTER
Check out the below GIF example for reference.
The sublime text provides a lot of useful keyboard shortcuts. Check out the complete list of Sublime Text 3 Keyboard Shortcuts Cheat Sheet.
Like this:
report this ad 