Sublime text 3 плагины для верстки: 15 прекрасных плагинов для Sublime Text

Содержание

Sublime Text — плагины для верстки

Пришло время прокачать ваш Sublime Text, чтобы разрабатывать проекты быстро и современно.

Находясь в Sublime Text нажмите Ctrl+Shift+P. Откроется консоль, в ней напишите install, появится строка Install Package Control. Нажмите на нее, и установится Package Control (переводится как «контроль пакетов»).

Пакеты в данном случае это плагины (дополнения), которые вы будете устанавливать, чтобы расширить возможности вашего Sublime.

Можете посмотреть короткое видео по установке Package Control:

Теперь через Package Control можно устанавливать плагины (дополнения) для Sublime Text. Вверху Sublime Text найдите кнопку Preferences, а в ней найдите Package Control. В открывшемся окне найдите Package Control: Install Package и нажмите. В открывшемся окне находится список всех плагинов для Sublime Text. Все устанавливать не нужно. В строке поиска этого окна введите Alignment, и нажмите на появившийся плагин, начнется установка. Посмотрите видео:

Таким же образом установите плагины из списка ниже. Без некоторых из этих плагинов у вас не получится полноценно изучать следующие уроки. Устанавливайте плагины, которые полностью соответствуют названию из списка ниже. Установка плагинов сейчас займет у Вас некоторое время, но в будущем может сэкономить целые дни.

Список плагинов:

Alignment (вы должны были его только что установить)
Auto Semi-Colon
AutoFileName
ApacheConf
BracketHighlighter
Color Highlighter
Console Wrap
CSS Extended Completions
DocBlockr
Inc-Dec-Value
JQuery
SASS
StyleToken
SublimeLinter
SwapStrings
JavaScript & NodeJS Snippets
Advanced New File
Git
GitGutter
SublimeCodeIntel
HTML-CSS-JS Prettify
Goto-CSS-Declaration
CSScomb
ClipBoard History
Web Inspector

livereload sublime text 3 не работает

Автор admin На чтение 5 мин.

Сегодня мы рассмотрим настройку популярного редактора кода Sublime Text 3 для веб-разработки.

Внимание! Вышла более новая версия руководства.
С новым материалом вы можете ознакомиться Здесь.

Плагины

emmet — плагин для скоростной верстки.

livereload — автообновление страницы.

Для корректной работы плагина LiveReload в Sublime Text 3 необходимо дописать в пользовательских настройках плагина следующую конструкцию (подробнее в видео):

sass — настроим корректную подсветку SASS в Sublime Text 3.

jade — HTML препроцессор.

gist — плагин для быстрого доступа к вашим сниппетам на GitHub.

brackethighlighter — подсветка скобок, тегов в Sublime Text 3.

autofilename — автокомплит для подключения внешних файлов в верстку.

colorhighlighter — подсветка цвета.

BufferScroll — сохранение позиции курсора в документе.

Goto-CSS-Declaration — плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS.

Фишки

Поменяем тему на twilight.
Научимся множественному выделению.
Назначим клавиши для события reindent (хоткей для автоматического формата документа).
Научимся управлять числовыми значениями (Инкремент и Декремент).

Ссылки

LiveReload Browser Extension: http://livereload.com/extensions/

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

Создание контентного сайта на Jekyll от А до Я

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

Я — фрилансер! — Руководство успешного фрилансера

Нужно, чтобы LiveReload отслеживал определенные типы файлов, а не все. Сейчас в настройках пользователя такой код:

3 ответа 3

Одним из решений может быть выкинуть сервер LiveReload, который поддерживает пакет для Sublime Text. Это не единственная реализация LiveReload-сервера.

Есть также guard-livereload : плагин для системы Guard для выполнения действий при изменении файлов. Он написан на Ruby и потому для работы требует установленного Ruby. Порядок установки минимально отличается от других плагинов для Guard, вроде guard-haml , об установке и запуске которого я уже писал ранее.

В Guardfile можно задать шаблоны путей, изменение файлов по которым даст сигнал клиенту LiveReload для обновления. В README есть пример:

Код выше, разумеется, на Ruby. Каждая строчка watch добавляет на отслеживание пути, подходящие под регулярное выражение, относительно корня проекта (рабочей директории, где запущен guard ). Регулярка записывается /так/ , %r , или другими способами. Само выражение можно проверить на Rubular или просто в Interactive Ruby (IRB).

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

February 12, 2013

В предыдущей статье, посвященной вопросу автообновления страниц в окне браузера, я упоминал об плагине для редактора Sublime Text 2 под названием LiveReload. Сегодня я вернусь к этому вопросу и выполню установку этого плагина. Она проста — там нет ничего сложного.

Итак, приступаем к установке и настройке LiveReload в Sublime Text 2.

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

Установка менеджера пакетов

Открываем Sublime Text и переходим в меню по пути “View — Show Console” или же нажимаем сочетание клавиш , затем копируем и вставляем нижеприведенный код в окно консоли:

Жмем Enter и затем закрываем и снова открываем Sublime Text, чтобы изменения вступили в силу. Менеджер пакетов установлен.

Установка LiveReload

Переходим к установке плагина LiveReload в Sublime Text 2. Переходим в меню по пути “Preferences — Package Control”:

В менеджере пакетов выбираем из списка пункт “Package Control: Install Package”:

Немного подождем, пока загрузится список пакетов. Затем в окне поиска введем имя пакета — “LiveReload”:

Жмем Enter kbd> — пара секунд и плагин установлен. Снова перезагружаем редактор, чтобы изменения вступили в силу:

Установка расширения LiveReload в Chrome

Плагин LiveReload работает совместно с одноименным расширением, которое устанавливается в браузер. В моем случае это будет Google Chrome. Приступаю к установке.

В настройках Chrome перехожу в раздел с расширениями и ввожу в строку поиска имя плагина — “LiveReload”:

Соглашаюсь со всем и жму кнопочку “Установить”. Перезагрузки браузера не требуется — в панели инструментов сразу появляется значок расширения в виде двух круговых стрелочек.

Установка расширения произведена.

Тестирование плагина LiveReload

Открываю в Sublime Text 2 редактируемый HTML-файл. И открываю его же в браузере Google Chrome. Нажимаю мышью на значок расширения LiveReload в панели инструментов и вижу в строке статуса следующее:

Это говорит о том, что плагин в редакторе Sublime Text 2 успешно подключился к плагину LiveReload в браузере. Можно приступать к работе. Изменяю код в файле, сохраняю изменения и вижу, как они автоматически применились в окне Chrome.

Заключение

Применение плагина LiveReload мне кажется более удобным, нежели расширения, рассмотренные в предыдущей статье. Хотя бы тем, что изменения автоматически вступают в силу, не нужно ждать даже 1 секунды. Главное, не забыть нажать сочетание клавиш Ctrl + S . Вот если бы и этого не нужно было делать, было бы совсем замечательно!.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. добавит span не в ul, а выше в дереве.

Группировка

Если мы сделаем .item1>(.item2+.item3), то увидим, что два item будут идти друг за другом.

.items1>(.item2+.item3)

Умножение и нумерация

Если мы у li сделаем класс .class добавим знак нумерации $ и умножим * на 4. ul>li.class$*4.

Будет четыре класса у каждого li.

Использование фигурных и квадратных скобок

Допустим пишем ссылка на другой сайт.

Для emmet будет выглядеть так a[href=’ya.ru’] и tab распакуется как ссылка.

Свободный текст можно записывать в фигурных скобках.

Пишем див с классом .text{текст}, распакуем.

a[href=’ya.ru’]
.text{текст}

a[href=’ya.ru’]

.text{текст}

Основные сокращения emmet в html

a
link
script:src
img
form
input
btn
sect
ol+
table+
c

link

script:src

img

form

input

btn

sect

ol+

table+

Вставляем в sublime text и напротив каждого сокращения нажимаем tab.

Основные сокращения emmet в css

Все сокращения emmet очень легко интуитивно догадаться, заучивать их не нужно.

pos
posa
t
r
b
l
z
fl
d
di
dtc
v
ow
cup
mt
mb
p
w
h
mh
f
fz
ta
tt
lh
bg
bcg
c
bd
lst
!
@f
@i
cm
trf

pos

posa

dtc

cup

bcg

lst

trf

Какие плагины нужны в Sublime Text 3 для эффективной работы? • Егор Мальцев

Уже несколько лет Sublime text 3 — это мой основной рабочий инструмент. Я пишу там текст, решаю задачи, веду ежедневный список дел, планирую проекты. Верстаю и программирую сайты я, разумеется, тоже там.

Интерфейс редактора с темой » Material Theme»

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

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

Package Control

Плагин нужен для того, чтобы скачать и установить все другие плагины. Чтобы его поставить нужно скопировать абзац кода в консоль саблайма, ничего сложного. Зато потом у вас появится удобное меню глобального поиска остальных плагинов.

sFTP

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

Emmet

Эммет для саблайма ускоряет верстку раз примерно в 20. Грубо говоря, это библиотека шоркодов набирая которые разворачиваются целые хтмл конструкции. Набираете а и нажимаете tab → появляется <a href=""></a>

Если вы научитесь им пользоваться один раз, то верстать без этого плагина будет просто невозможно.

Sidebar Enhanced

Добавляет новые пункты в контекстное меню боковой панели саблайма, такие как «новый файл», «вырезать» и пр. На самом деле ничего необычного, плагин создает меню, которое должно быть в любой программе. Странно, что его нет в саблайме по умолчанию.

Material Theme

Вначале material theme может показаться неудобным из-за непривычного отсутствия границ, но через несколько минут понимаешь, что и так знаешь где что находится. Как со слепой печатью на клавиатуре.

Делает саблайм красивым, убирает лишние границы, линии, смягчает рабочую среду и меняет цветовую гамму. Это тот случай, когда не просто меняется цветовая гамма «блокнота», а благодаря новому дизайну получается лучше фокусироваться на рабочей части редактора и лучше выполнять свои задачи.

Less

Добавляет синтаксис для лэсс файлов. Теперь less файлы стилей выглядят также, как css.

Sass

То же самое, что и прошлый плагин, но для sass.

Js Validate

Добавляет автоматическую валидацию js в саблайм.

DocBlockr

Добавляет шоркоды для создания документации в синтаксисе PhpDoc, JsDoc и других. После установки плагина пишите /**, нажимаете enter или tab и можете описывать функцию в удобном синтаксисе.

ACF Snippet

Добавляет в саблайм шоркоды для более быстрого написания acf метаполей в вордпрессе. Очень удобно для тех, кто умеет пользоваться. Я написал свою более расширенную версию плагина, для всех типов полей, напишите в комментариях, если используете acf в работе.

Live Reload

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

Для работы плагина на браузер нужно еще установить специальное расширение.

EML (E-mail)

Плагин позволяет отправлять почту прямо из саблайма. Я настраивал связку sublime + trello и sublime + wordpress, чтобы отправлять новые заметки в свою базу данных и плагин мне очень помог.

Markdown HTML Preview

Самый удобный для меня просмотрщик маркдауна. После нажатия shift + control + m документ открывается в браузере с html разметкой. Оттуда его можно копировать в любой wysiwyg редатор — в вордпресс, в эверноут, на страницу любого сайта с нормальной cms. Везде сохранится форматирование текста.

Markdown Editing

В саблайме удобно даже вести текущие задачи, если вам не нужно ничего лишнего

Самый удобный плагин для рекдактирования маркдауна в саблайме. Добавляет в редактор 3 новых вида разметки — Markdown, MultiMarkdown, Markdown GFM. Я на постоянной основе пользуюсь последней.

Плагин автоматически добавляет «-» при ведении списка, позволяет комментировать строки и снимать комментарии, подсвечивает заголовки и ссылки.

Единственный минус — при нажатии shift + tab сворачивает весь документ оставляя одни заголовки, а не регулирует отступы в строке. Впрочем, для больших маркдаун документов это может быть и плюсом.

AutoFoldCode

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

Список будет пополняться.

Дополнение по Sublime 3 · Неожиданный HTML

Горячие клавиши

Ctrl + ` — открывает консоль

Ctrl + / — выделяет блок комментариями

Ctrl + L — выделяет строку

Ctrl + D — выделяет слово

Ctrl + Space — включает автодополнение

«CMD+ALT+Left/Right Arrow» и «CTRL+Pagedown/Pageup» — переключение между вкладками

Alt + F3 — выделяет все слова, совпадающие с заданным

Запуск нескольких панелей

ALT-Shift-2 — две панели
ALT-Shift-3 — три панели и т.д.

Выравнивание

Edit -> Line -> Reindent

Alt +E+L+R

Либо можно настроить свое сочетание клавиш

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

]

Хорошие цветовые схемы

Aristocat

Solarized(Dark)

Настройка Autosave при потере фокуса

http://lucybain.com/resources/setting-up-sublime-autosave/

Установка Package Control

Заходим на https://packagecontrol.io/

Ctrl + `
И копируем «магический» код

Добавляем плагины

Color Highlighter для выделения цвета

Color Picker — Цветовое колесо. Для его вызова нажимаем Ctrl + Shift + C

SidebarEnhacements

AllAutocomplete — автодополнение кода

Emmet

Обзор плагина от Sorax
https://www.youtube.com/watch?v=mGPZ8P7xDLE

Хорошая статья по синтаксису
https://habrahabr.ru/post/175747/

Шпаргалка по Emmet
http://docs.emmet.io/cheat-sheet/

JSLint

SublimeLinter
https://habrahabr.ru/post/262137/

Color Picker
Ctrl + Shift + C

Полезные ссылки

Еще о плагинах
https://habrahabr.ru/post/235901/

О редакторе
http://habrahabr.ru/post/244681/

Создаем свою тему
http://habrahabr.ru/post/258053/

Все подряд

Для верстки
http://aalexeev239.github.io/sublime-presentation/#Cover
https://habrahabr.ru/post/154667/
https://toster.ru/q/101569

Для Full Stack Developer’a
http://www.sitepoint.com/10-essential-sublime-text-plugins-full-stack-developer/
https://habrahabr.ru/post/154667/

Несколько панелей
http://www.macdrifter.com/2012/07/sublime-text-working-with-multiple-panes.html

Добавить в контекстное меню
http://ipestov.com/12-most-helpful-shortcuts-for-sublime-text/

JS-разработка + Авдополнение + Markdown
https://habrahabr.ru/post/235901/

https://habrahabr.ru/post/244681/

http://www.unix-lab.org/posts/sublime-text/

Еще плагины
http://sitear.ru/material/17-luchshih-plaginov-dlya-sublime-text-2

Автообновление сайта при редактировании
http://stackoverflow.com/questions/12823873/does-the-sublime-text-2-editor-support-real-time-html-css-preview

Создание Build System для HTML и JavaScript

http://www.c-sharpcorner.com/UploadFile/370e35/how-to-configure-sublime-text-to-open-html-file-in-chrome-on/

Открываем

Tools -> Build System -> New Build System

Прописываем

{
    "cmd": ["C:/Program Files/Google/Chrome/Application/chrome.exe","-u", "$file"]
}

Ctrl+B — для запуска Build system

Видео:

Видео-уроки по Sublime
https://www.youtube.com/watch?v=Wa7RIw19kUM

Про плагины
https://www.youtube.com/watch?v=NrYzJz1P4fE

Установка Package Control
https://www.youtube.com/watch?v=zVLJfrIwEP8

livereload sublime text 3 не работает

На чтение 5 мин. Просмотров 122 Опубликовано 15.12.2019

Сегодня мы рассмотрим настройку популярного редактора кода Sublime Text 3 для веб-разработки.

Внимание! Вышла более новая версия руководства.
С новым материалом вы можете ознакомиться Здесь.

Плагины

emmet — плагин для скоростной верстки.

livereload — автообновление страницы.

sass — настроим корректную подсветку SASS в Sublime Text 3.

jade — HTML препроцессор.

gist — плагин для быстрого доступа к вашим сниппетам на GitHub.

brackethighlighter — подсветка скобок, тегов в Sublime Text 3.

autofilename — автокомплит для подключения внешних файлов в верстку.

colorhighlighter — подсветка цвета.

BufferScroll — сохранение позиции курсора в документе.

Goto-CSS-Declaration — плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS.

Фишки

Поменяем тему на twilight.
Научимся множественному выделению.
Назначим клавиши для события reindent (хоткей для автоматического формата документа).
Научимся управлять числовыми значениями (Инкремент и Декремент).

Ссылки

LiveReload Browser Extension: http://livereload.com/extensions/

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

Создание контентного сайта на Jekyll от А до Я

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

Я — фрилансер! — Руководство успешного фрилансера

Нужно, чтобы LiveReload отслеживал определенные типы файлов, а не все. Сейчас в настройках пользователя такой код:

3 ответа 3

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

February 12, 2013

В предыдущей статье, посвященной вопросу автообновления страниц в окне браузера, я упоминал об плагине для редактора Sublime Text 2 под названием LiveReload. Сегодня я вернусь к этому вопросу и выполню установку этого плагина. Она проста — там нет ничего сложного.

Итак, приступаем к установке и настройке LiveReload в Sublime Text 2.

Установка менеджера пакетов

Установка LiveReload

Переходим к установке плагина LiveReload в Sublime Text 2. Переходим в меню по пути “Preferences — Package Control”:

В менеджере пакетов выбираем из списка пункт “Package Control: Install Package”:

Немного подождем, пока загрузится список пакетов. Затем в окне поиска введем имя пакета — “LiveReload”:

Жмем Enter kbd> — пара секунд и плагин установлен. Снова перезагружаем редактор, чтобы изменения вступили в силу:

Установка расширения LiveReload в Chrome

В настройках Chrome перехожу в раздел с расширениями и ввожу в строку поиска имя плагина — “LiveReload”:

Установка расширения произведена.

Тестирование плагина LiveReload

Заключение

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

Livereload sublime text 3 не работает

Сегодня мы рассмотрим настройку популярного редактора кода Sublime Text 3 для веб-разработки.

Внимание! Вышла более новая версия руководства.
С новым материалом вы можете ознакомиться Здесь.

Плагины

emmet – плагин для скоростной верстки.

livereload – автообновление страницы.

sass – настроим корректную подсветку SASS в Sublime Text 3.

jade – HTML препроцессор.

gist – плагин для быстрого доступа к вашим сниппетам на GitHub.

brackethighlighter – подсветка скобок, тегов в Sublime Text 3.

autofilename – автокомплит для подключения внешних файлов в верстку.

colorhighlighter – подсветка цвета.

BufferScroll – сохранение позиции курсора в документе.

Goto-CSS-Declaration – плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS.

Фишки

Поменяем тему на twilight.
Научимся множественному выделению.
Назначим клавиши для события reindent (хоткей для автоматического формата документа).
Научимся управлять числовыми значениями (Инкремент и Декремент).

Ссылки

LiveReload Browser Extension: http://livereload.com/extensions/

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

Создание контентного сайта на Jekyll от А до Я

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

Я – фрилансер! – Руководство успешного фрилансера

Нужно, чтобы LiveReload отслеживал определенные типы файлов, а не все. Сейчас в настройках пользователя такой код:

3 ответа 3

Код выше, разумеется, на Ruby. Каждая строчка watch добавляет на отслеживание пути, подходящие под регулярное выражение, относительно корня проекта (рабочей директории, где запущен guard ). Регулярка записывается /так/ , %r <так>, или другими способами. Само выражение можно проверить на Rubular или просто в Interactive Ruby (IRB).

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

February 12, 2013

В предыдущей статье, посвященной вопросу автообновления страниц в окне браузера, я упоминал об плагине для редактора Sublime Text 2 под названием LiveReload. Сегодня я вернусь к этому вопросу и выполню установку этого плагина. Она проста – там нет ничего сложного.

Итак, приступаем к установке и настройке LiveReload в Sublime Text 2.

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

Установка менеджера пакетов

Открываем Sublime Text и переходим в меню по пути “View – Show Console” или же нажимаем сочетание клавиш , затем копируем и вставляем нижеприведенный код в окно консоли:

Установка LiveReload

Переходим к установке плагина LiveReload в Sublime Text 2. Переходим в меню по пути “Preferences – Package Control”:

В менеджере пакетов выбираем из списка пункт “Package Control: Install Package”:

Немного подождем, пока загрузится список пакетов. Затем в окне поиска введем имя пакета – “LiveReload”:

Жмем Enter kbd> – пара секунд и плагин установлен. Снова перезагружаем редактор, чтобы изменения вступили в силу:

Установка расширения LiveReload в Chrome

В настройках Chrome перехожу в раздел с расширениями и ввожу в строку поиска имя плагина – “LiveReload”:

Соглашаюсь со всем и жму кнопочку “Установить”. Перезагрузки браузера не требуется – в панели инструментов сразу появляется значок расширения в виде двух круговых стрелочек.

Установка расширения произведена.

Тестирование плагина LiveReload

Заключение

RxJs – map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто – этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

sublimetext3 — Пользовательский макет Sublime Text 3

Хотя вы можете запачкать руки созданием такого макета вручную, вероятно, самый простой способ осуществить это — использовать для этого пакет. Пакет Origami — один из примеров этого.

Используя этот пакет, вы можете выполнить следующие шаги, чтобы получить интересующий вас макет:

Выберите команду Origami: Create Pane below (или используйте стандартный пункт меню View> Layout> Rows: 2 ), чтобы создать две строки
Сфокусируйте нижнюю панель и выберите Оригами: панель создания справа

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

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

Чтобы добавить новый элемент в меню, сохраните следующий текст как Main.sublime-menu в своем пакете User (используйте Preferences> Browse Packages , если вы не знаете, где он находится):

  [
    {
        "caption": "Просмотр",
        "мнемоника": "V",
        "id": "просмотр",
        "дети":
        [
            {"caption": "-", "id": "groups"},
            {
                "caption": "Макет",
                "мнемоника": "L",
                "id": "layout",
                "дети":
                [
                    {
                        "caption": "Три панели",
                        "команда": "set_layout",
                        "аргументы":
                        {
                            "cols": [0.0, 0,5, 1,0],
                            «строки»: [0,0, 0,5, 1,0],
                            "клетки": [
                                [0, 0, 2, 1],
                                [0, 1, 1, 2],
                                [1, 1, 2, 2]
                            ]
                        }
                    }
                ]
            },
        ]
    }
]

Это добавит новый пункт меню в View> Layout под названием Three Pane , который, при выборе, установит желаемый макет.Измените значение строки caption соответствующим образом, чтобы изменить имя макета.

Кроме того, вы можете добавить следующую привязку клавиш к своим пользовательским привязкам клавиш ( Preferences> Key Bindings из меню), чтобы иметь горячую клавишу, которая делает то же самое:

  {
    "ключи": ["alt + shift + 3"],
    "команда": "set_layout",
    "аргументы":
    {
        «cols»: [0,0, 0,5, 1,0],
        «строки»: [0,0, 0,5, 1,0],
        "клетки": [
            [0, 0, 2, 1],
            [0, 1, 1, 2],
            [1, 1, 2, 2]
        ]
    }
},

Если это ваша первая настраиваемая привязка клавиш, убедитесь, что весь текст заключен в пару [ и ] , поскольку привязки клавиш представляют собой список элементов, и это представляет собой только привязку клавиш.

Это повторно использует привязку клавиш Windows / Linux по умолчанию для трех столбцов, так что вы можете изменить это при необходимости. Если вы сделаете это в сочетании с изменением меню выше, в меню автоматически отобразится привязка клавиш, которую вы используете в качестве напоминания, на случай, если вы забудете.

Для справки: команда set_layout принимает тот же аргумент layout , что и (официально недокументированный) вызов API window.set_layout () . Есть неофициальная документация по этому методу, объясняющая, как это работает, хотя здесь я обманул и использовал Оригами для создания макета.

sublimetext — переключение между макетами в Sublime Text 3

Я использую Sublime Text 3. У меня есть макет с столбцом высоты экрана слева и тремя панелями справа (см. Рисунок ниже). Эта настройка великолепна (особенно с плагином Golden Ratio), но мне все еще не хватает одной функции, которую я имел в vim. У меня была горячая клавиша, из-за которой панель, на которой был фокус, занимала все окно, например, входила в полноэкранный режим для этого одного файла. Когда закончите, вы можете снова нажать горячую клавишу, чтобы вернуться к предыдущему макету.Это как если бы исходный макет панелей был сохранен, а сфокусированная панель временно занимает все окно, и когда вы закончите редактировать файл в полноэкранном режиме, программа запоминает, как все было расположено, и возвращается к этому. Вот пример ASCII-арта:

  ДО ПОСЛЕ
---------------------------- ---------------------- ------
| | | | |
| | | | |
| | ------------- | | |
| | | | |
| | | | |
| | ------------- | | |
| | | | |
| | | | |
---------------------------- ---------------------- ------

Нажав горячую клавишу, вы переключаетесь с ДО на ПОСЛЕ ; повторный ввод той же горячей клавиши вернет вас к ПЕРЕД , с тем же макетом и одинаковыми вкладками на каждой панели.

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

Основные концепции | Документация сообщества Sublime Text

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

Общие условные обозначения

Это руководство написано с точки зрения пользователя Windows.
Большинство инструкций потребуют только тривиальных изменений
работать на других платформах.

Если не указано иное,
относительные пути (например, пакетов / пользователь )
начать с каталога данных.

Мы предполагаем привязки клавиш по умолчанию
при указании сочетаний клавиш.
Если вы используете раскладку клавиатуры, отличную от английской (США),
некоторые привязки клавиш могут не соответствовать вашему макету.
Это связано с тем, как Sublime Text
обрабатывает нажатия клавиш внутри.

Освоение возвышенного текста требует времени

Освоение возвышенного текста требует времени и практики.
К счастью, он построен вокруг
несколько концепций
которые делают для последовательного
система, как только все части соберутся вместе.

Это руководство научит вас
как использовать и настраивать Sublime Text.

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

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

The

Data Directory

Практически все файлы, интересные для пользователей
живут в каталоге данных .
Каталог данных
расположение, зависящее от платформы:

Windows : % APPDATA% \ Sublime Text 3
macOS : ~ / Библиотека / Поддержка приложений / Sublime Text 3
Linux : ~ /.config / sublime-text-3

Если вы используете портативную версию (только для Windows),
ищите Application / Data .
Здесь Приложение
относится к каталогу
к которому вы извлекли
сжатые переносимые файлы
и где находится исполняемый файл.

Обратите внимание, что каталог Data
существует только с этим именем
в портативной версии.
В полных установках,
это одно из мест
указано выше.

The

Packages Directory

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

(Подробнее о пакетах и ресурсах позже.)

Вы можете получить доступ к каталогу пакетов
из главного меню ( Настройки → Обзор пакетов … ),
с помощью вызова API ( sublime.packages_path () ),
и другими способами
это будет объяснено в следующих разделах.

В этом руководстве мы ссылаемся на папку пакетов
как Пакеты , путь пакетов , папка пакетов или каталог пакетов .

The

User Package

Packages / User — это универсальный каталог
для настраиваемых плагинов, сниппетов, макросов и т. д.
Считайте это своим личным кабинетом
в папке пакетов.
Дополнительно он будет содержать
большинство настроек вашего личного приложения или плагина.

Обновления Sublime Text никогда не будут
перезаписать содержимое пакетов / пользователя .

Sublime Text является программируемым

Эта информация полезна для программистов.Другим пользователям просто необходимо знать
этот возвышенный текст
позволяет пользователям с навыками программирования
добавлять в редактор свои функции.

Sublime Text раскрывает свои внутренние детали
через интерфейс прикладного программирования (API)
с которыми программисты могут взаимодействовать, используя
язык программирования Python (открывается в новом окне).

Консоль

Sublime Text и плагины отправляют отладочную информацию
к консоли .
Чтобы открыть консоль,
нажмите Ctrl + `
или выберите View → Show Console
из главного меню.

Вот консоль Python в Sublime Text:

Встроенный интерпретатор Python включен
в редакторе.
Встроенный интерпретатор полезен
проверить настройки редактора
и быстро протестировать вызовы API
при разработке плагинов.

Python вашей системы против Sublime Text Встроенный Python

Sublime Text поставляется со своим собственным встроенным интерпретатором Python
это отдельный от интерпретатора Python вашей системы
( при наличии ).

Встроенный интерпретатор предназначен только для
для взаимодействия с API плагина,
не для общего развития.

Пакеты, плагины, ресурсы и другие термины

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

Огромная гибкость Sublime Text — причина
почему ты будешь учиться
о таком количестве файлов конфигурации:
там просто должно быть место
чтобы указать все доступные предпочтения и настройки.

Файлы конфигурации в Sublime Text
текстовые файлы
которые соответствуют предопределенной структуре или формату :
JSON преобладает,
но вы также найдете файлы XML и YAML.
Для более продвинутых
параметры расширяемости,
Используются файлы исходного кода Python.

В данном руководстве для краткости
мы иногда называем все эти
разрозненные файлы конфигурации как ресурсы .

Sublime Text будет искать ресурсы
внутри папки пакетов.
О пакетах мы поговорим подробно позже,
но короткая версия такова,
чтобы все было в порядке,
Sublime Text имеет понятие пакета ,
то есть папка (или zip-архив)
который содержит ресурсы
которые принадлежат друг другу.(Может они помогают
составлять электронные письма быстрее,
писать HTML эффективно,
улучшить опыт программирования для C, Ruby, Go,…).

Textmate Compatibility

TextMate (открывается в новом окне) — редактор для Mac.

Поскольку Sublime Text был в значительной степени вдохновлен TextMate 1,
он поддерживает большинство расширений, представленных в пакетах TextMate,
в частности, исключая .tmCommands и .tmSnippets файлов
и любая другая конфигурация в файлах .plist .
Хотя Sublime Text распознает большинство старых форматов,
е.грамм. .tmLanguage и .tmTheme ,
добавлены новые форматы с использованием расширений .sublime- *
которые предоставляют расширенный набор старых функций
или являются просто заменой форматов TextMate.

vi / Vim Emulation

vi — древний модальный редактор
что позволяет пользователю выполнять все операции
с клавиатуры.
Vim, современная версия vi,
до сих пор широко используется.

Sublime Text обеспечивает эмуляцию vi
через пакет Vintage (открывается в новом окне).Пакет Vintage игнорируется по умолчанию
и должен быть включен пользователем.
Узнать больше о Vintage (открывается в новом окне)
в официальной документации.

Разработано несколько сторонних пакетов
реализовать дополнить или заменить
встроенная эмуляция vi.
Мы рассмотрим установку и использование сторонних пакетов позже.

emacs Emulation

emacs — еще один популярный
редактор для программистов.

Sublime Text не предлагает
любая встроенная эмуляция emacs,
но вы можете попробовать сторонние пакеты
созданные другими пользователями Sublime Text.Как и в случае со сторонними пакетами для эмуляции vi,
мы рассмотрим их установку и использование позже.

Sublime Text Editor

Я думаю, что почти у каждого программиста есть свой любимый текстовый редактор. Кому-то нравится Vim, кому-то нравится Notepad ++, а мне нравится Sublime Text. Есть множество полезных ярлыков, фрагментов и плагинов, которые позволяют мне быстро и легко работать с кодом или простым текстом.

Я могу видеть до 4 файлов одновременно
SublimeText имеет возможность просматривать более одного файла одновременно.Если вы добавите плагин Origami, у вас может быть более 4 панелей. Чтобы использовать базовые функции разделения панелей SublimeText, вы просто зайдите в меню View -> Layout , и вы можете выбрать, какой макет вам нравится. Вы также можете использовать для этого ярлык. В моем редакторе SublimeText мне нравится иметь два открытых файла. Первый — с кодом, второй — с тестами. Это очень полезно, когда я работаю в TDD. Мне не нужно переключаться между окнами.
Все настраивается
Достаточно перейти в меню Настройки -> Настройки .Есть все необходимое для настройки. Цвета, поведение, все. Я также рекомендую выполнить другие настройки в меню Preferences . Особенно Пакеты .
Добавление новых пакетов
Если хотите, вы можете расширить поведение SublimeText, установив новые пакеты. Вы можете посмотреть некоторые из моих любимых пакетов:
- Emmet — для быстрого и легкого создания HTML или CSS
- BracketHighlighter — чтобы показать вам, где вы начинаете и заканчиваете скобки, это приятно, особенно если у вас есть язык программирования, такой как JavaScript
- Git Gutter — чтобы показать, какая часть кода изменилась.Это интеграция с git. Чтобы получить более подробную информацию о git, я рекомендую вам мою серию статей о git. Начните сейчас с того, что представляет собой статья о git.
- SublimePrettyJson — средство форматирования для JSON, это очень полезно, когда у вас есть JSON в одной строке и вы хотите легко его прочитать
- Sublime RuboCop — чтобы показать передовой опыт в Ruby.
- Linters (Coffee Script, CSS, Sass, JS ) — инструменты, демонстрирующие передовой опыт на разных языках
- Красочный синтаксис — вы можете добавлять цвета для синтаксиса другого языка программирования, если у вас нет определенной раскраски, просто установите ее
Есть еще больше расширений.Единственное, что вам нужно сделать, это просто поискать их в Интернете. 😉
Ярлыки, ярлыки, ярлыки
Если честно, я люблю сочетания клавиш. Это причина, по которой я пишу эту статью. Пока я могу работать без мыши, используя только клавиатуру, я очень счастлив. Клавиатура занимает меньше времени, чем мышь. По крайней мере для меня. И SublimeText очень полезен, когда дело доходит до ярлыков. Вы можете увидеть некоторые из них ниже:
- ctrl + k + b — переключить боковую панель
- ctrl + 0 — перейти на боковую панель с папками (затем вы можете использовать стрелки для навигации между папками и файлами, введите ↩ открывает выбранный файл и перемещает фокус на этот файл)
- ctrl + 1,2,3,4 — перемещать фокус между открытыми панелями / группами (в зависимости от выбранного макета)
- ctrl + ←, → — перейти к началу / концу слова
- ctrl + shift + ←, → — выбрать предыдущее / следующее слово
- ctrl + m — перейти к закрывающей / открывающей скобке для текущего кода
- ctrl + shift + m — выбрать все содержимое текущих скобок (фигурные скобки, квадратные скобки, круглые скобки)
- ctrl + PgUp, PgDn — перейти к предыдущей / следующей открытой вкладке (файлу)
- ctrl + tab — открыть следующую используемую вкладку / файл одна панель
- ctrl + shift + tab — предыдущее использованное t ab / файл открыт в одной панели
- ctrl + ↑, ↓ — перемещать файл вверх / вниз на одну строку (как прокрутка)
- ctrl + shift + ↑, ↓ — переключать соседние строки, первая строка идет вверх , вторая идет вниз
- crtl + / — строка комментария / отказа от комментария (зависит от выбранного языка программирования)
- ctrl + delete — удалить все следующие слова (без добавления в буфер обмена)
- ctrl + backspace — удалить все слова перед (без добавления в буфер обмена)
- ctrl + k + k — удалить все следующие слова (без добавления в буфер обмена)
- ctrl + shift + k — удалить строку (без добавления в буфер обмена)
- ctrl + ↩ — вставить строку после
- ctrl + shift + ↩ — вставить строку перед
- ctrl + j — присоединить строку ниже к концу текущей строки
- ctrl + alt + j — красивая мощность JSON от SublimePrettyJson 90 012
- ctrl +] — отступ текущей строки (ей)
- ctrl + [ — убрать отступ текущей строки (строк)
- ctrl + a — выбрать весь файл
- ctrl + l — выделить всю строку
- ctrl + d — выбрать слово (повторить выбор других вхождений в контексте для многократного редактирования)
- ctrl + shift + d — повторяющаяся строка (строки)
- ctrl + k + u — верхний регистр
- ctrl + k + l — нижний регистр
- ctrl + c — копировать выделенный текст в буфер обмена или когда у вас есть курсор в строке без выделенного текста, копировать всю строку в буфер обмена
- ctrl + v — вставить выделенный текст или всю строку из буфера обмена
- ctrl + x — вырезать выделенный текст или всю строку (если текст не выделен) в буфер обмена
- ctrl + g — перейти к строке в текущем файле
- ctrl + ; — перейти к слову в текущем файле
- ctrl + r — искать символ (функции, имя метода, классы) в файле
- ctrl + shift + r — искать символ (функции, имя метода, классы ) во всех проектах
- ctrl + t — заменить букву в окрестности
- ctrl + shift + t — открыть последнюю закрытую вкладку (как в браузере)
- ctrl + h — заменить одну фразу на другую в текущем файле
- ctrl + f — поиск в файле
- ctrl + shift + f — поиск по всему проекту (каталогу), вы также можете заменить фразу в этом проекте
- ctrl + q — закрыть Sublime полностью
- ctrl + w — закрыть текущий файл / вкладку
- ctrl + shift + w — закрыть все окна
- ctrl + n — открыть новую вкладку
- ctrl + shift + n — открыть новую окно
- ctr l + s — сохранить файл
- ctrl + shift + s — сохранить как (вы можете выбрать новое имя для файла)
- ctrl + o — открыть файл
- ctrl + shift + o — открыть новый каталог
- ctrl + p — быстро открываемые файлы по имени в вашем проекте (вы даже можете искать по первым буквам каждой части имени файла, пример: поиск по mnf , а SublimeText найдет my_new_file.txt )
- ctrl + shift + p — командная строка и установщик пакетов
- ctrl + z — отменить последнее изменение
- ctrl + shift + z — повторить последнее изменение
- ctrl + y — выполнить еще раз последнее действие
- ctrl + shift + l — добавить курсор в конец каждой выделенной строки кода / текста
- shift + alt + ↑, ↓ — каждый раз после нажатия ↑ или ↓ добавить курсор к строке выше или ниже текущей строки
- f6 — проверить орфографию на выбранном языке (может потребоваться установка языкового пакета)
- f9 — выполнить алфавитный порядок выбранных строк
- f3 — следующая искомая фраза
- f3 + shift — предыдущая искомая фраза

Надеюсь, вы найдете это полезным.Увидимся в следующий раз!

Graphvizer - предварительный просмотр Graphviz в реальном времени с помощью Sublime Text 3

Graphvizer - это плагин Graphviz для Sublime Text 3. Он может автоматически отображать изображение в реальном времени, пока вы редактируете языковой файл точек . Все, что вам нужно сделать, это отредактировать файл со скоростью мысли, а этот плагин сделает все остальное за вас. Если в вашем точечном файле есть синтаксические ошибки, плагин отобразит соответствующие сообщения.

Рендеринг в реальном времени
Проверка синтаксиса в реальном времени
Запрос сообщения об ошибке
Поддержка определения компоновки движка
Поддержка указания формата вывода

Примечание. Убедитесь, что для синтаксиса файла установлено значение Graphviz (DOT) .Вы можете сделать это с помощью меню View -> Syntax или щелкнув нижний правый угол окна Sublime Text.

Открыть окно изображения

Ctrl + Shift + G или Инструменты -> Графвайзер -> Открыть визуализированное изображение

Открыть

Панель Graphvizer

Ctrl + Shift + X или Инструменты -> Graphvizer -> Показать панель Graphvizer

Определение компоновки двигателя

Механизм компоновки по умолчанию - точек , который можно изменить в настройках.Вы также можете изменить его для конкретного файла с помощью Tools -> Graphvizer -> Layout Engine.

Указание формата вывода

Формат вывода по умолчанию - png , который можно изменить в настройках. Вы также можете изменить его для конкретного файла, выбрав Инструменты -> Graphvizer -> Формат вывода.

Мощная программа просмотра изображений

Если вы считаете, что просмотр изображений в Sublime Text очень неудобен, потому что он не поддерживает масштабирование или панорамирование, вы можете попробовать Graphvizer Viewer, который создан как дополнение к Graphvizer.

Graphviz - отличный инструмент для визуализации, но рендерить изображения вручную очень неудобно. Мне приходится запускать dot file.dot -Tpng -o file.png снова и снова. Кроме того, я сразу не знаю, верен ли синтаксис или нет. В редакторе Atom есть отличный плагин под названием «GraphViz preview +», но я не могу найти подобных плагинов в packagecontrol.io . Наконец, я создал Graphvizer.

1. Предпосылки

Я не могу реализовать алгоритм визуализации Graphviz с нуля, поэтому этому плагину требуется команда dot для рендеринга изображения.Другими словами, вам необходимо установить официальный Graphviz в вашей системе.

для Linux / Mac

Используйте диспетчер пакетов вашей операционной системы (например, dnf , apt-get или brew ), чтобы установить Graphviz .

На моем Fedora 27 X86_64 команда:

  sudo dnf установить graphviz

Используйте dot -V , чтобы убедиться, что вы все настроили правильно и вы должны увидеть информацию о версии Graphviz.

для Windows

Загрузите отсюда: https://graphviz.gitlab.io/download/. Установка очень проста, но вам потребуется дополнительная настройка, чтобы указать плагину, где найти команду dot .

Метод 1: Добавьте путь к dot.exe (например, D: \ Graphviz \ bin ) в переменную среды PATH вашей системы. Затем команда dot может быть доступна из командной строки (также известна как cmd ), и этот плагин также может ее вызывать.Если вы не знаете, как это сделать, эта статья может вам помочь.

Введите dot -V в окне Windows cmd и нажмите Enter. Если все в порядке, вы увидите информацию о версии Graphviz.

Метод 2: Укажите путь точки явно в настройках плагина. См. Полную информацию в разделе "Конфигурации".

2. Установка Graphvizer

Использование управления пакетами

(рекомендуется)

Самый простой способ установить Graphvizer - через Package Control.

Откройте палитру команд ( Ctrl + Shift + P в Linux / Windows, Cmd + Shift + P на Mac). Выберите Package Control: Install Package , а затем найдите Graphvizer , чтобы установить его.

Вручную

git clone этот проект в свою систему или просто загрузите zip-файл с GitHub и распакуйте его. Теперь у вас есть каталог Graphvizer .

Использование меню Sublime Text 3 Настройки -> Обзор пакетов... , чтобы узнать путь к каталогу вашего пакета. На моем Windows 7 путь - D: \ Sublime Text 3 \ Data \ Packages . Переместите или создайте символьную ссылку для всего каталога Graphvizer в каталог пакета. Нажмите Ctrl + Shift + P в Sublime и запустите Satisfy Dependencies. Перезапустите Sublime. Выполнено!

3. Обновить

Я выпущу новую версию, если кто-нибудь сообщит об ошибке или у меня возникнет новая идея. Вы можете использовать Package Control для обновления этого пакета.

Конфигурации по умолчанию следующие. Если вы хотите изменить некоторую конфигурацию, откройте «Настройки » -> «Настройки пакета» -> «Graphvizer» -> «Настройки» и добавьте конфигурацию в правую часть содержимого в соответствии с вашими потребностями. Значение каждой конфигурации объясняется ниже.

  {
    // «dot_cmd_path» - это путь к команде с точкой. Вот несколько примеров.
    // Для Windows: "D: \\ Graphviz \\ bin \\ dot.exe"
    // Для Linux: "/ usr / bin / dot"
    // Для OSX: "/ usr / bin / dot"
    // Если вы добавили этот путь в переменную окружения PATH, вы можете
    // используйте точку вместо полного абсолютного пути."dot_cmd_path": "точка",
    // Если команда точки занимает больше, чем `dot_timeout` секунд, она будет
    // завершено. Значение по умолчанию - 3 секунды.
    "dot_timeout": 3,
    // "show_image_with" контролирует, как показывать изображение.
    // Значение по умолчанию - "layout", поэтому изображение будет отображаться в виде разделенных
    // макет по умолчанию. Если вы хотите вместо этого показать его в новом окне,
    // изменяем следующее значение на "окно". Если вы просто хотите показать изображение
    // в новой вкладке измените значение на «tab»."show_image_with": "layout",
    // "image_dir" управляет местом сохранения изображения.
    // Значение по умолчанию - «то же самое», что означает, что изображение будет сохранено в том же
    // каталог как точечный файл.
    // Если значение равно "tmp", используется временный системный каталог.
    // Вы также можете установить его в произвольный каталог в соответствии с вашими потребностями.
    // Пример для Windows: "E: \\ homework \\ image \\"
    // Пример для Linux / OSX: "/ home / haolee / image /"
    "image_dir": "такой же",
    // Поведение по умолчанию - рендеринг изображения в реальном времени.// Если установлено значение false, изображение будет отображаться только при сохранении файла.
    "render_in_realtime": правда,
    // Механизм компоновки по умолчанию. Допустимые значения, включая точку, neato, fdp, sfdp, twopi и circo.
    "default_layout_engine": "точка",
    // Формат вывода по умолчанию. Допустимые значения, включая png, jpg, svg, pdf, gif, bmp, ps, ps2 и psd.
    // ПРИМЕЧАНИЕ: команда dot также поддерживает многие другие форматы, как подробно описано в приведенной ниже ссылке.
    // https://graphviz.gitlab.io/_pages/doc/info/output.html
    // Вы можете использовать любой из них в качестве значения default_output_format, но эти форматы
    // не будет отображаться в меню Инструменты-> Graphvizer-> Формат вывода."default_output_format": "png"
}

Установить

точек путь

Если вы хотите указать путь к вашей команде dot , установите "dot_cmd_path" в соответствии с вашей системой. Эта конфигурация полезна в Windows.

Установить тайм-аут для команды

точек

Если вы редактируете очень большой график, для выполнения команды dot может потребоваться много времени, и ваш ЦП может быть исчерпан. По этой причине я установил тайм-аут для команды dot , и она будет прервана, если выполнение займет слишком много времени.Вы можете изменить время ожидания, установив «dot_timeout» по мере необходимости. Как правило, вам не нужно изменять эту конфигурацию.

Показать изображение в новом окне

По умолчанию плагин показывает изображение в отдельном макете.

Вы также можете использовать новое окно для отображения изображения. Просто измените значение «show_image_with» с «layout» на «window» и сохраните его. В некоторых случаях это гибко, особенно если у вас два монитора.

Если ваш монитор маленький, вы можете отобразить изображение на новой вкладке для экономии места. Для этого измените значение на «вкладку» .

(Вам может потребоваться перезапустить Sublime Text 3, чтобы вступить в силу.)

Установите каталог изображений

По умолчанию значение «image_dir» равно «same» , что означает, что сгенерированное изображение будет сохранено в том же каталоге, что и точечный файл. Если значение «tmp» , изображение будет сохранено во временном каталоге системы.Если вы хотите изменить местоположение на другой каталог, вы можете установить "image_dir" на любой путь в соответствии с вашими потребностями.

Пример для Windows: "E: \\ homework \\ image \\"
Пример для Linux / OSX: "/ home / haolee / image /"

Визуализировать изображение при сохранении файла

По умолчанию изображение отображается в реальном времени. Если вы хотите, чтобы изображение отображалось только при сохранении файла, вы можете установить "render_in_realtime" на false .

Установить механизм компоновки по умолчанию

По умолчанию этот плагин использует движок dot для рендеринга изображений точно так же, как вы передаете аргумент -Kdot команде dot . Если вы хотите использовать другие движки, включая neato , fdp , sfdp , twopi и circo , установите "default_layout_engine" в качестве имени двигателя.

Установить выходной формат по умолчанию

По умолчанию формат вывода - png , точно так же, как вы передаете аргумент -Tpng команде dot .Если вы хотите использовать другие форматы, включая png , jpg , svg , pdf , gif , bmp , ps , ps2 и psd , установите "выход по умолчанию" к названию формата.

Вы можете изменить привязки клавиш по умолчанию через Настройки -> Настройки пакета -> Graphvizer -> Привязки клавиш . В правом столбце открывшегося окна установите «ключей» на другие ярлыки в соответствии с вашими потребностями.Приведенный ниже пример предназначен для Windows.

  [
    {
        "ключи": ["ctrl + shift + g"],
        "команда": "open_image",
        «контекст»:
        [
            {"ключ": "селектор", "оператор": "равно", "операнд": "source.dot"}
        ]
    },
    {
        "ключи": ["ctrl + shift + x"],
        "команда": "показать_панель",
        "args": {"панель": "output.graphvizer_panel"},
        «контекст»:
        [
            {"ключ": "селектор", "оператор": "равно", "операнд": "source.dot"}
        ]
    }
]

ОБЩАЯ ОБЩЕСТВЕННАЯ ЛИЦЕНЗИЯ GNU, версия 2 (GPLv2)

`My Sublime Text Setup для PHP`

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

`Предпочтения`

Sublime Text имеет область настроек, где вы можете настроить макет редактора с помощью JSON. Вот мои любимые настройки:

  {
    "font_face": "Fira Code Retina",
    "font_size": 14,
    "line_padding_bottom": 2,
    "line_padding_top": 2,
    «highlight_line»: 14
    "bold_folder_labels": правда,
    «правители»: [80, 120],
    "tab_size": 4,
    "translate_tabs_to_spaces": правда,
    "trim_trailing_white_space": правда,
    "sure_newline_at_eof_on_save": true
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Я следую руководству по стилю PSR-2, предоставленному PHP-FIG, поэтому некоторые из этих настроек очень помогли в поддержании этого стиля.Линейки Параметр показывает вертикальную линию в вашем редакторе в качестве ориентира для длины строки. PSR-2 устанавливает предпочтительный предел на 80 символов и мягкий предел на 120, поэтому я показываю вертикальную линию на обеих длинах, чтобы знать, когда я перейду лимит. Вкладка Настройки гарантируют, что я всегда использую вкладку с четырьмя пробелами для отступа (да, я предпочитаю пробелы табуляции). Часто я забываю добавить пустую строку в конец файла, поэтому параметр sure_newline_at_eof_on_save сделает это за вас автоматически.Если вам интересно, пустая последняя строка предназначена для того, чтобы git diff не отображался для добавления символа возврата в строку выше, когда вы начинаете добавлять дополнительный код в файл.

Одна из моих любимых удобных настроек - предпочтение highlight_line . Это приведет к тому, что Sublime выделит строку, на которой находится курсор, что упростит поиск места, где вы печатаете. Наконец, я использую Fira Code в качестве шрифта. Это действительно хороший шрифт с лигатурами. Sublime Text теперь поддерживает лигатуры шрифтов, что делает ваш код действительно чистым.

`Плагины`

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

Sublime PHP Companion добавляет несколько полезных команд для разработки PHP. В частности, мне очень нравится команда Find Use , которая автоматически добавит оператор use вверху вашего файла для имени класса под курсором. DocBlockr автоматически сгенерирует блоки документации для ваших PHP-методов, что значительно упростит документирование. Vintageous добавляет привязки клавиш vim (один из моих любимых плагинов). GitGutter покажет вам добавленные и измененные строки на боковой панели, что упростит поиск нового написанного вами кода. Плагин Babel добавляет подсветку синтаксиса ES6 и JSX. All Autocomplete добавит записи автозаполнения для всех файлов, которые вы открываете, что упрощает ссылки на методы для классов, которые вы открыли.

`Тема`

В общем выпуске Sublime Text 3 команда добавила новую тему под названием Adaptive , которая автоматически настраивает внешний вид боковой панели и панели вкладок в соответствии с выбранной цветовой схемой. Две мои любимые цветовые схемы - Dracula и Solarized Dark (по умолчанию). Раньше я использовал тему Boxy, но с тех пор она устарела в пользу новой темы.

Вот как выглядит моя установка с использованием темы Дракулы.

Если у вас есть любимые плагины или настройки Sublime Text, дайте мне знать в комментариях. Я всегда ищу новые возможности, которые можно опробовать.

Вот список нескольких сообщений в блоге, которые помогли мне создать эту установку:

Удачного кодирования!

.

Category Верстк