Как в sublime text 3 сделать два окна
Обновлено: 27.04.2024
Sublime Text это не IDE, но тем не менее, он позволяет управлять группой файлов, объединенных в один проект, и сохранять параметры рабочего пространства.
Создание проекта
Все очень просто. Запустите программу и перетащите в нее одну или несколько папок с файлами вашего проекта. Дерево каталогов тут же отобразиться на боковой панели. Теперь вы можете выбрать любой из файлов и начать с ним работать.
Для того, чтобы добавить новый файл, выберите в боковой панели каталог, в котором хотите его создать и нажмите File New file .
Отображение файлов
В папках с проектом не всегда лежат только текстовые файлы. Например, изображения, архивы и другие бинарые файлы отображать в текстовом редакторе бессмысленно. Чтобы они не мешали, их можно скрыть. Для этого их необходимо добавить в исключения.
Например, если вы не хотите, чтобы в боковой панели были видны изображения в формате PNG, откройте настройки Preferences Settings - User и для атрибута file_exclude_patterns добавьте параметр "*.jpg" . Настройки применяются сразу же после сохранения. Если вы все сделали без ошибок, то из боковой панели исчезнут все файлы с расширением png.
Сохранение проекта
Чтобы сохранить текущее состояние проекта, выберите пункт меню Project Save Project As. . После сохранения вы увидите два файла:
- sublime-project – хранит список каталогов и настройки проекта;
- sublime-workspace – хранит состояние проекта.
Настройки проекта
Проекты можно настраивать по своему усмотрению переопределяя пользовательские настройки.
Если вы уже сохранили проект нажмите Project Edit Project . Откроется файл со списком добавленных вами каталогов.
{
"folders" :
[
{
"path" : "src" ,
"folder_exclude_patterns" : [ "backup" ]
} ,
{
"path" : "docs" ,
"file_exclude_patterns" : [ "*.css" ]
}
] ,
"settings" :
{
"tab_size" : 8
} ,
"build_systems" :
[
{
"name" : "PHP" ,
"cmd" : [ "php" , "$file" ]
}
]
}
Как видно из выше приведенного примера, файл проекта разбит на несколько разделов.
folders
Этот раздел содержит все каталоги, подключенные к проекту, а также параметры для исключения из отображения нежелательных данных. Например, папки backup и файлов с расширением css.
settings
Позволяет настроить редактор индивидуально для каждого проекта. Здесь применимы любые параметры из File Settings.
build_systems
Переход по фрагментам
Win/Linux: CTRL+R
Mac: CMD+R
Вероятно, самое полезное сочетание клавиш для экономии вашего времени. Содержимое документа разбивается на определенные фрагменты (функции, HTML теги или CSS стили). Переход происходит при выборе соответствующего фрагмента во всплывающем окне.
Переход по файлам
Win/Linux: CTRL+P
Mac: CMD+P
Большинству разработчиков приходится помногу раз переключаться между различными файлами. HTML и CSS или PHP и JavaScript… Данные шорткаты упрощает эти действия. Также переключаться по вкладкам можно с помощью " CMD+ALT+Left/Right Arrow " и " CTRL+Pagedown/Pageup " для OSX и Windows соответственно.
Выделение текущего слова
Win/Linux: CTRL+D
Mac: CMD+D
Очень удобно выделять слова с помощью двойного нажатия левой кнопки мыши. Но еще удобнее и быстрее это делать на клавиатуре, без помощи тачпада или мыши. А при сочетании " CMD+L " или " CTRL+L " выделяется текущая строка.
Разделение экрана
Горизонтально
Win/Linux: ALT+Shift+2/3/4/5
Mac: CMD+ALT+2/3/4/5
Вертикально
Win/Linux: ALT+Shift+5/8/9
Mac: CMD+ALT+Shift+1/2/3
Вместо того чтобы постоянно переключаться между файлами, Sublime дает возможноcть разделять рабочую область вертикально или горизонтально на несколько частей. Очень юзабельно. А используя Num1 в приведенных выше сочетаниях, возвращаем единый экран.
Закладки
Win/Linux: CTRL+F2
Mac: CMD+F2
В процессе написания кода приходится «экспериментировать», изменять некоторые данные и целые строки для получения нужного результата. Запоминать номера строк, где произошли изменения достаточно трудно. Но в саблайме есть закладки, которые добавляются данными шорткатами. А переключаемся между ними c помощью " F2 " или " Shift+F2 ".
Слияние и перестановка строк
Win/Linux: CTRL+Shift+Up/Down
Mac: CMD+CTRL+Up/Down
Перестанавливать строки местами требуются редко, но этот способ очень удобен. А шорткаты " CMD+J " или " CTRL+J " объединяют строки.
Объединенный курсор
Win/Linux: CTRL+ALT+Up/Down
Mac: СTRL+Shift+Up/Down
Честно говоря, я мне не доводилось пользоваться данной функцией, но я уверен, что в «объединенном курсоре» большой потенциал и многие найдут применение для этой фичи. Курсор распределяется на множество строк и появляется возможность их одновременного редактирования.
Мгновенный поиск и замена
Win/Linux: ALT+F3
Mac: CMD+CTRL+G
Благодаря этому лайфхаку забываем про поиск и замену (find what, raplace with, replace next/all). Выбрав определенный текст и нажав на необходимые клавиши, Sublime находит все совпадения и создает «объединенный курсор» на все строки, где есть совпадения.
Сегодня расскажу о редакторе кода, которым пользуюсь для верстки сайтов уже много лет. Быстрый, удобный и полностью настраиваемый Sublime Text 3.
Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!
Внешний вид программы
Первым делом, после установки Sublime Text 3, я настраиваю внешний вид программы.
Боковая панель
Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.
Цветовая схема
Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.
Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.
Для того что устанавливать новые цветовые схемы, плагины и прочие дополнения, мне нужно сперва установить установщик этих дополнений. Звучит сложно, но на деле все гораздо проще.
Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.
Моя любимая цветовая схема установлена, ты конечно же можешь выбрать себе любую другую.
Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme
Сочетание цветов очень важно для работы с кодом, так как это влияет не только на восприятие, но и на усталость и здоровье твоих глаз. Так что подбери себе цветовую схему так, чтобы тебя ничего в ней не напрягало. И помни про перерывы в работе!
Дополнительные настройки
Дополнительно повысить восприятие кода и комфорт при работе с ним мне помогут следующие дополнительные настройки. Переходим Preferences – Settings. Открывается такое окно разделенное на две части. В левой части настройки по умолчанию, их изменить нельзя, а вот в правой части ты можешь эти настройки переназначить, каждая следующая должна идти через запятую. Вот какие настройки использую я:
Поясню каждую настройку.
Убирает странные отступы в программе между кодом и боковой панелью, что делает общую картину более компактной.
Выставляет размер шрифта по умолчанию.Также быстро изменить размер шрифта, работая с кодом, можно зажав контрол и покрутив колесо мыши.
Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset
Эти линии очень полезны для новичка, потому что визуально соединяют открывающий и закрывающий элемент, что существенно помогает в ориентации в коде.
Лично я отключаю их (false) по двум причинам. Первая — я уже не новичок и без них неплохо справляюсь, вторая причина — это следующая настройка.
Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.
Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер :)
Например мы работали работали, а потом неожиданно закрыли программу :) Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.
Разделение рабочего окна
Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.
Поскольку практически всегда приходится работать с несколькими разными файлами, например index.html style.css и какой-то js файл, то дополнительным удобством будет разделение окна с кодом на секторы. Варинтов несколько. Переходим в View – Layout и смотрим что тут у нас есть.
Соответственно Single – это вид без разделений как сейчас, Columns: 2, 3, 4 это разбивка по вертикали. Например нажав на Columns: 2 наш экран с кодом разделится пополам, и мы можем часть файлов переместить в пустую колонку, например CSS слева HTML и JS справа, что делает работу более наглядной и быстрой.
Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.
Так что у тебя есть широкий выбор по вкусу. Я чаще всего использую одно разделение по вертикали.
Подсветки синтаксиса
Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.
Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.
Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.
Например, в дальнейшем я планирую работать с файлами SCSS, открыв его я увижу сплошную простыню из набора белых символов. Не очень удобно, правда?
Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.
Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?
Настройка внешнего вида редактора важна, так как мы довольно длительное время проводим за написанием кода. Это влияет на нашу усталость, продуктивность, здоровье да и просто на настроение.
Следующее, что мы сделаем это установим ряд плагинов и дополнений. Их существует огромное количество, а я расскажу про основные, которые активно использую сам и которые в разы ускорят весь процесс верстки. Приступим!
Плагины
AutoFileName
Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.
BracketHighliter
ColorHighliter
Обрати внимание на этот код — это код цвета, но какого именно непонятно.
Великий и могучий Emmet
Итак, что же умеет Emmet?
Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать "block" и нажать клавишу Tab. Мы получим:
Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:
Жмем клавишу Tab и получаем:
Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следующее:
Теперь для того чтобы вызвать запись:
нам достаточно написать bl и нажать клавишу Tab
GotoCSSDeclaration
Плагин поможет нам с навигацией в коде. Устанавливаем ровно так же как и предыдущие плагины. Далее назначим горячие клавиши для работы с плагином для этого переходим Preferences – Key Bindings, и пишем следующий код
Где ["ctrl+1"] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.
Ну и для тех, кто дочитал до этого момента покажу еще один плагин, который установить не так просто, но он точно того стоит.
Зовут его Tag и установить нам придется его вручную. По этой ссылке можно скачать архив с плагином. Далее распаковываем в особую папку программы. Для Windows 10 это C:\Users\[Подставь свое имя пользователя]\AppData\Roaming\Sublime Text 3\Packages. Далее закрываем Sublime и открываем снова и добавляем горячие клавиши открыв Preferences – Key Bindings и дописав следующее:
Где ctrl+` это и есть наше сочетание клавиш.
Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`
Как разделить экран и закрыть разделенный экран в Sublime Text 3
Интеллектуальная рекомендация
Android Gausso нечеткий реализация
1, используйте скольжение Применимый сценарий: динамическая конфигурация фона изображения 2, на картину Гаусс, вам нужно передавать картинки на битовые объекты Не рекомендую: Используйте растровое изо.
Установите Spark 2.2.1 под облачным сервером Alibaba centos7.2
Выбор версии при установке Spark связан с версией hadoop. Нажмите, чтобы открыть ссылкуПосле ввода выберите подходящее изображение. При нормальных обстоятельствах можно использовать оба .
Заставьте FireFox fieldset имитировать IE в закругленных углах
Метка набора полей написана в Firefox, углы не закруглены, как в IE, что влияет на внешний вид. Мы можем установить стиль в fieldset: .
Установка MongoDB и базовый синтаксис
Метод вызова Notepad ++ и GVIM в Vivado
Метод вызова Notepad ++ и GVIM в Vivado Позвоните Notepad ++ Позвоните в метод GVIM, это не на этом, потому что в середине программных файлов есть пространство Правильный способ установки его на диск .
Вам также может понравиться
Mangacies-Chesboard танцы (мышление)
Не бойся! Не бойся! Не бойся! 90% мира очень просто. Этот вопрос на самом деле тщательно думает о том, чтобы принимать бумагу и покраску. Он чувствует себя больше в тестовом переводе. .
HDU4506 S Xiaoming Series Story-Brother Help
Ссылка на вопрос:HDU4506 S Xiaoming Series Story-Brother Help。 описание проблемы：Смотрите ссылки, описанные выше. Анализ проблем:(немного). Описание программы: Функция PowerMod () - функция быстрой мо.
Без названия
ООП рассматривает структуру программы со статической точки зрения. ООП абстрагирует сущности, атрибуты и поведение бизнес-процесса, чтобы получить более четкое и эффективное логическое разделен.
Как аудио конвертер перехватывает часть аудио
Когда я слышал несколько хороших песен, я всегда хотел взять музыкальные фрагменты и сделать из них рингтоны для мобильных телефонов. Хотя это и немного клише, но и человеческое. В эту эпоху безмолвия.
горячая клавиша
Cmd + shift + d :: Скопируйте и вставьте текущий выбранный контент, если он не выбран, скопируйте и вставьте строку, где находится курсор.
установка
- Официальный сайт скачать .dmg файл;
- включать .dmg файл;
- Перетащите Sublime Text 3 в папку «Приложения».
Если вы хотите запустить Sublime Text из командной строки, вам необходимо выполнить следующую команду в терминале:
После выполнения этой настройки в терминале subl Вы можете открыть Sublime Text и выполнить subl Вы можете открыть соответствующий файл.
Базовые концепты
Знакомство с концепциями, представленными в этом разделе, поможет вам лучше понять это руководство.
The Data Directory
Практически все необходимые файлы будут сохранены в каталоге данных, а путь к ним отличается для разных операционных систем:
- Windows: %APPDATA%\Sublime Text 3
- OS X: ~/Library/Application Support/Sublime Text 3
- Linux: ~/.config/sublime-text-3
Вы можете открыть подкаталоги этого каталога в findle через меню: (Sublime Text -> Preferences -> Browse Packages . ).
The Packages Directory
Это важный каталог в каталоге данных. Здесь сохранена вся поддержка языков программирования и разметки. Вы можете использовать меню:(Sublime Text -> Preferences -> Browse Packages…)Откройте каталог в findle.
В этой статье к нему относятся пакеты, путь к пакетам, папка пакетов или каталог пакетов.
The User Package
Packages/User Используется для сохранения настраиваемых плагинов (плагинов), сниппетов, макросов (макросов). Думайте об этом как о частной области в папке пакетов. Здесь хранятся персональные программы и настройки плагинов.
Sublime Text не будет изменять содержимое при обновлении.
Sublime Text программируется
Вы можете использовать Python для разработки плагинов через API. горячая клавишаCtrl + `Откройте консоль, здесь вы можете выполнять скрипты Python и здесь можно установить некоторые плагины.
Packages, Plugins, Resources and Other Terms
Почти все функции Sublime Text можно расширять и настраивать.Вы можете изменять поведение редактора, добавлять макросы и фрагменты, расширять меню и т. Д. Вы также можете использовать API редактора для создания сложных плагинов.
Гибкость Sublime Text заставляет вас изучить множество файлов конфигурации. Эти файлы конфигурации находятся в формате JSON или XML.
Иногда в этой статье эти файлы конфигурации называются ресурсами.
Sublime Text будет искать ресурсы в папке пакетов.
Пакет относится к каталогу, содержащему связанные ресурсы.
vi/vim Emlation
можно использоватьVintageousПусть Sublime Text поддерживает vi / vim.
редактировать
Модификация множественного выбора поля
Sublime Text поддерживает одновременную модификацию нескольких текстов:
- Выберите текст, который необходимо изменить, и редактор автоматически предложит тот же текст в документе.
- Нажмите Cmd + d Добавьте следующий текстовый сегмент в список меток, если вам нужно пропустить текущий текстовый сегмент, нажмите Cmd + k тогда Cmd + d
- горячая клавиша Cmd + u Вы можете удалить текущий текстовый сегмент из списка редактирования
- ESC Клавиша выхода из состояния редактирования
Выбор всей строки
Cmd + l Вы можете выбрать строку, в которой находится курсор, и активировать все строки, где текущий выбор
Cmd + Shift + l Вы можете разделить выделение на несколько выделений и редактировать одновременно
Выделение текста
- Alt + Shift + Добавьте следующий токен в область выбора
- Ctrl + Shift + m Выделите все содержимое скобки, в которой установлен курсор.
- Cmd + Shift + j Выберите тот же отступ, что и строка, на которой установлен курсор.
Смена персонажа
Искать и заменить
Sublime Text поддерживает поиск регулярных выражений движка Perl Compatible Regular Expressions (PCRE). Поиск по умолчанию - это обычный поиск. Вам нужно нажать соответствующую кнопку в левой части поля поиска, чтобы переключиться на поиск по регулярному выражению, или вы можете использовать сочетания клавиш для переключения.
- Option + Cmd + r Поиск по регулярному выражению и обычное переключение текста
Поиск и замена в одном файле
- Cmd ＋ f Открыть окно поиска
- ESC Закрыть окно поиска
- Option + Cmd + c Переключить чувствительность к регистру
- Option + Cmd + w Переключитесь на полное совпадение: время соответствует timeOut или только время
- Option + Enter Выделите все совпадающие результаты и отредактируйте их одновременно
- Cmd + g или же Enter Найти следующий
- Cmd + Shift + g Найдите предыдущий
- Cmd + e После выделения текста нажмите эту комбинацию клавиш для прямого поиска
заменять
- Option + Cmd + f Откройте сменную панель
- Cmd + g или же Enter Найти следующий
- Option + Cmd + e Заменить и найти следующий
- Option + Enter Когда фокус находится на панели замены, все соответствующие элементы будут выбраны и доступны для редактирования.
Поиск нескольких файлов
Cmd + Shift + f Откройте панель поиска по нескольким файлам
Установить несколько областей поиска файлов
Укажите диапазон поиска в столбце Где на панели многофайлового поиска и поддержите указание диапазона поиска следующими способами:
- путь в формате unix
- Используйте подстановочные знаки, чтобы исключить определенные файлы
введите символическое местоположение: , Ждать
Вы также можете использовать запятую для объединения диапазонов трех вышеуказанных форматов.
Навигация по файлам и управление файлами
перейти к чему угодно, навигация по файлам
Поиск и навигация по любому файлу проекта. Вы можете фильтровать в строке поиска и предварительно просматривать выбранный файл.
- Cmd + p Откройте файловую панель
- Enter Открыть текущий элемент и закрыть панель навигации
- -> Открыть текущий элемент, не закрывая панель навигации
- ESC Закройте панель навигации
- Cmd + r Искать в текущем файлеsymbol, Например, название функции, класса или уценки;
- Ctrl + g Перейти на указанную строку;
Левая боковая панель навигации
- Cmd + k тогда Cmd + b Переключаемое состояние закрытой навигации
проект
Sublime Text рассматривает текущий открытый файл и папку как проект. Перетащите папку на боковую панель, чтобы добавить ее в текущий проект. Выберите из меню(Project -> Save Project As…)Вы можете сохранить связанную информацию о соответствующей папке с файлами, в следующий раз через меню(Project -> open project)Все связанные файлы можно открыть быстро.
использоватьsnippetДобавить часто используемые шаблоны
Сохраняйте часто используемые сегменты кода и используйте вкладки для раскрытия заданного текста, что может повысить эффективность. Методы настройки:
- Меню: Инструменты -> Новый фрагмент… Открыть шаблон автоматически
- После редактирования сохраните его в Packages/User Просто перейдите в каталог, суффикс файла .sublime-snippet
- Пакет CDATA под содержимым является окончательным развернутым текстом;
- tabTrigger - это логотип сниппета. При нажатии tab после логотипа логотип заменяется содержимым;
- Область действия, которая вызывает замену.
Нажатие клавиши табуляции после того, как автор расширится до @author: [email protected]
Базовое использование Sublime Text3 и введение общих плагинов
Список ярлыков
- Ctrl + g Перейти к соответствующей строке
- Ctrl + m Переключение между начальным и конечным положениями кронштейна
- Ctrl + Shift + m Выделите содержимое в скобках
- Ctrl + Shift + k Удалите строку, где находится курсор
- Ctrl + x Вырезайте выбранный интервал, когда курсор выбирает интервал, в противном случае вырежьте строку, где находится курсор.
- Ctrl + Shift + up Выбирайте строки вверх и поддерживайте одновременное редактирование нескольких строк
- Ctrl + Shift + down Выбирайте строки вниз и поддерживайте одновременное редактирование нескольких строк
- Ctrl + l Выберите строку, в которой находится курсор
FAQs
1. Не поддерживает кодировку gbk.
Установить плагинConvertToUTF8, Возможно, вам потребуется установить дополнительные плагины в соответствии с подсказками.
2. Как автоматически заполнять фигурные скобки в середине тегов HTML.
Меню -> настройки -> Привязки клавиш - Пользователь Добавьте следующую конфигурацию в файл конфигурации json.
3. Китайский метод ввода не соответствует позиции ввода.
Ответ: Используйте до официального исправления: плагин IMESupport.
4. Как сделать подсветку синтаксиса для определенного типа файла, например .handlebar Настройки файла html выделить
Ответ: Выберите в меню: View > Syntax > Open all current extension as. > html Таким образом, вы можете использовать необходимую подсветку синтаксиса для пользовательских файлов суффиксов.
Управление плагином управления пакетами
Package ControlЭто менеджер пакетов Sublime Text, который можно установить через него.2000+ пакетов. Установленный пакет будет обновлен автоматически. В принципе, большинство инструментов можно установить автоматически и вручную.
Установить Package Control через консоль
1. Нажмите сочетание клавиш Ctrl + `, чтобы вызвать консоль;
2. Запустите следующий код в консоли;
3. Приведенный выше код создаст каталог установки пакета. И скачатьPackage Control.sublime-packageФайл в каталог;
4. Перезапустите Sublime Text, чтобы завершить установку.
Установить управление пакетами вручную
Принцип автоматической установки состоит в том, чтобы создать папки и файлы конфигурации для управления пакетами в определенном каталоге и вручную создать требуемые каталоги.Файлы также могут выполнять цель установки:
- Выберите из меню: Preferences > Browse Packages. ；
- Перейдите в каталог в открытом проводнике и введите Installed Packages/ содержание;
- скачатьPackage Control.sublime-packageИ скопировал в Installed Packages/ Под содержанием;
- Перезапустите Sublime Text, чтобы завершить установку.
Удалите установленный плагин
Если установлено через управление пакетами, сочетание клавиш Cmd + Shift + p Открыть панель поиска Package Control: Remove Package Затем выберите плагин, который необходимо удалить.
SidebarEnhancements
Добавить функцию на левую боковую панель.
Emmet
EmmetОпишите HTML-контент с помощью краткого синтаксиса, чтобы повысить эффективность работы.
Установите Emmet с управлением пакетами
- горячая клавиша Ctrl + Shift + p Затем войдите в окно управления Package Control: Install Package ；
- Выбрать Emmet Установите, перезапустите Sublime Text, чтобы завершить установку.
горячая клавиша
Tab
После написания операторов в HTML, XML, HAML, CSS, SASS / SCSS, LESS и строк на языках программирования (например, JavaScript, Python, Ruby и т. Д.) В соответствии с синтаксисом Emmet Tab Ключ для генерации необходимого кода.
Поскольку поведение Sublime Text по умолчанию на некоторых языках более ожидаемо автором, вы можете Emmet.sublime-setting Настройки в файле disable_tab_abbreviations_for_scopes Чтобы отменить запуск Tab в этих типах файлов. См. Официальный сайт для конкретных методовtab-key-handler
Ctrl + e
По умолчанию использование Tab в большинстве файлов с настраиваемыми суффиксами не может вызвать Emmet, но использование Ctrl + e Он может вступить в силу в любом документе, что очень полезно при написании шаблонов html.
Базовая грамматика Эммета
emmet-zen-coding-tutorialЭто очень хороший учебник. Вот несколько простых правил грамматики.
элемент
Создавайте HTML-теги по именам элементов, например div generate , когда вам нужно сгенерировать собственные теги, используйте Ctrl + e То есть, если foo генерирует .
Вложенность дочерних элементов>
CSS-подобный дочерний селектор div>ul>li генерировать.
Brother Elements +
Подобно селектору брата CSS, + Элементы, которые порождают родственные отношения div+p+div генерировать.
Оператор вверх ^
Роль оператора Эммета зависит от текущего контекста, > Операторы переключат контекст на более глубокие элементы, ^ Операторы могут перемещаться по контексту, например div+div>p>span+em генерировать.
к ^ Операторы изменяют элементы управления контекстом div+div>p>span+em^bq генерировать
Оператор с несколькими элементами*
Используйте, за которым следует число, чтобы сгенерировать элементы для количества ul>li*5 генерировать.
Оператор группировки ()
Используйте круглые скобки для группировки, чтобы завершить сложную логику div>(div>ul>li*2>a)*2+footer>p генерировать
генерация идентификатора и класса
Настраиваемые атрибуты
Используйте аналогичный CSS [attr] Синтаксис для добавления настраиваемых атрибутов td[title="Hello" colspan=3] генерировать.
Номер элемента $
использовать * При создании нескольких элементов вы можете использовать $ Нумерация ul>li.item$*5 генерировать.
<>Добавить текст
Sublime Text Markdown Preview
sublimetext-markdown-previewЭто плагин предварительного просмотра Markdown для Sublime Text. С его помощью вы можете легко использовать Sublime Text для редактирования документов Markdown.
Установить с помощью управления пакетами
- Если Package Control не был установлен, сначала установите его;
- Нажмите ярлык Ctrl + Shift + p Откройте командное окно;
- Выполнить в командном окне Package Control: Install Package ；
- Выбрать Markdown Preview И установите его.
Ручная установка
- Выбрать в меню Preferences > Browse Packages. ；
- Откройте каталог во всплывающем проводнике и введите Installed Packages/ содержание;
- скачатьсжатый пакет sublimetext-markdown-previewК Installed Packages/ Каталог и переименован в Markdown Preview.sublime-package ；
- Перезапустите Sublime Text.
Предварительный просмотр файла Markdown
- Откройте файл Markdown;
- горячая клавиша Ctrl + Shift + p , Войдите в окно управления Markdown Preview ；
- В настоящее время доступно несколько вариантов, общий выбор Markdown Preview: Preview in Browser ；
- В это время требуется выбрать парсер, вы можете выбрать один;
- Sublime Text открывает html-файл, проанализированный Markdown, в браузере по умолчанию. Иногда он просто открывает html-файл в новой вкладке. Вы можете щелкнуть правой кнопкой мыши: copy file path , А затем зайдите в браузер.
sublime-autoprefixer
sublime-autoprefixerв соответствии сCan I UseИнформация о базе данных добавляет соответствующие префиксы поставщиков к стилям CSS, и вы также можете настроить версию браузера, для которой требуется префикс.
Sublime-autoprefixer работает только с CSS и не обрабатывает форматы предварительной обработки, такие как Sass или LESS.
Установите sublime-autoprefixer с помощью управления пакетами
- горячая клавиша Ctrl + Shift + p Затем войдите в консоль Package Control: Install Package
- Введите во всплывающем окне Autoprefixer , Установить, перезапустить Sublime Text
Использовать автопрефиксатор
- Поддерживает добавление префиксов ко всему файлу css и, при необходимости, добавление префиксов к некоторым кодам cas
- горячая клавиша Ctrl + Shift + p ,войти Autoprefix CSS Войти.
использоватьBracketHighlighterВыделите пару скобок
Сочетание скобок выделения очень удобно для поиска.
Установите BracketHighlighter с помощью Package Control
- Если нет Package Control, сначала установите его;
- горячая клавиша Ctrl + Shift + p , Войдите в окно управления Package Control: Install Package ；
- Войдите в окно управления BracketHighlighter И выберите установку;
- Установка завершена.
auto-saveАвтоматически сохранять изменения
Этот плагин будет автоматически сохранен, если в течение 1 секунды не будет ключа. Лично вы чувствуете себя слишком часто, вы можете выбрать в соответствии с вашими потребностями или можете запустить функцию автоматического сохранения возвышенного текста:
Меню: Sublime Text -> Настройки -> Пользовательские настройки
Добавьте: «save_on_focus_lost»: true в файл конфигурации, чтобы текущий документ автоматически сохранялся, когда он теряет фокус.
Читайте также: