Sublime text 3 как открыть боковую панель

Обновлено: 07.07.2024

При использовании Sublime Text 2 мы обычно открываем боковую панель для навигации по файлам / папкам в наших проектах. Для этого мы можем использовать горячую клавишу ctrl + k ctrl + b (в Windows).

Однако, оказавшись на боковой панели , мы не можем использовать ее с клавиатурой (например, стрелки). Мы должны использовать его с нашей собственной мышью .

Примечание : я установил плагин SideBarEnhancements, но не нашел ничего, что могло бы решить мою проблему.

Любое решение, которое вы можете знать?

Вы можете ввести Ctrl + 0 ( Ctrl + Zero ), чтобы сосредоточиться на боковой панели.

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

Введите этот шорткод в Preference-> Key Binding

Теперь сохраните это нажмите "ctrl+\\" для переключения боковой панели

Ctrl + 0 сосредоточится на боковой панели.
Ctrl + 1 будет фокусироваться на редакторе в 1-м окне.
Ctrl + 2 будет фокусироваться на редакторе во 2-м окне и т. Д.
Sandeep сделал отличный пост об улучшении включения и выключения боковой панели с помощью сочетания клавиш.
Перейдите в Preference-> Key Binding и введите:

Сохраните его, а затем нажмите "ctrl+\" , чтобы переключить боковую панель.

В Linux новые сочетания клавиш сохраняются в

/ .config / sublime-text-3 / Packages / User / 'Default (Linux) .sublime-keymap'.

Вы должны добавить папку в окно Sublime Text, чтобы перемещаться по боковой панели. Перейдите в Файл -> Открыть папку . и выберите самый верхний каталог, по которому вы хотите перемещаться.

Другой вариант - использовать пакет FileBrowser, который дает вам гораздо больше действий и может быть изменен в соответствии с вашими потребностями.

На самом деле у меня была такая же проблема: мне пришлось вызвать reveal in side bar , а затем переместить фокус на боковую панель, наряду с тем фактом, что если папка с файлом уже была развернута, фокус переместился бы в верхнюю часть боковой панели, все это заставило меня написать новый плагин, чтобы открыть файл на боковой панели, а затем переместить фокус туда, что значительно упростило навигацию по боковой панели с помощью стрелок клавиатуры, попробуйте =)

В Sublime Text2 нажмите клавиши в следующем формате «Ctrl + k + b», и он будет работать в ubuntu.

Он работал на моей машине (v14.04 LTS)

Для возвышенного текста 3 используйте Ctrl + K + B

Нажмите и удерживайте Ctrl , затем нажмите и удерживайте K , а затем нажмите B

Ctrl + p также действительно полезен для открытия файлов без использования мыши.

Если вы откроете папку в Sublime, все файлы в этой папке (и файлы в содержащихся папках) будут отображаться в поиске, который вы получаете с помощью Ctrl + p.

Просто нажмите Ctrl + p и начните вводить части имени файла, и вы получите список совпадений.

Резюме

Ctrl + 0 перейдет на вашу боковую панель. По умолчанию вы можете перемещаться по папкам с помощью клавиш со стрелками. Если вы предпочитаете настройки типа «Vim», вы можете избежать использования клавиш со стрелками, переназначив свои клавиши на типичные настройки Vim (hjkl).

h сворачивает / открывает папку
j будет перемещаться вниз (т. е. стрелка вниз)
k будет перемещаться вверх (т. е. стрелка вверх)
l откроет папку
Enter откроет файл.

Сопоставления клавиш

Чтобы настроить это, откройте Preferences > Key Bindings - User и добавьте следующее:

Ctrl + K , Ctrl + B : переключить боковую панель
Ctrl + K + B : сокращенная форма вышеуказанного (убедитесь, что вы нажали K и B в правильном порядке)
Ctrl + 0 : переключить фокус на боковую панель (если открыта)
Вверх / Вниз : перемещаться по списку файлов
Вправо : развернуть каталог
Влево : свернуть каталог / перейти в родительский каталог
Enter : открыть файл

@Santiago Agüero Часть, которую вам не хватало, заключалась в том, что боковой панели необходимо сфокусировать, прежде чем клавиши со стрелками будут работать ( Ctrl + 0 ).

Насколько мне известно, все эти ярлыки работают в Sublime 3, а также в Sublime 2.

Одно предостережение: они предполагают, что вы используете сочетания клавиш по умолчанию. Но вы можете легко настроить сочетания клавиш, открыв Preferences > Key Bindings - User и скопировав строки из Preferences > Key Bindings - Default , при необходимости изменив значение keys . Например.,

Еще один полезный ярлык: ctrl + k Вместе с ctrl + b покажет / скроет боковую панель. Убедитесь, что вы нажали K и B в правильном порядке.

Sublime text 3 добавляет функцию управления файлами и открытия браузера в левой колонке

Sublime text 3 добавляет функцию управления файлами и открытия браузера в левой колонке, в основном управление файлами очень удобно
Функция левого столбца - это в основном плагин SideBarEnhancements.
SideBarEnhancements - это набор инструментов, который может настраивать сочетания клавиш для методов открытия. Он может определять разные сочетания клавиш для открытия разных браузеров. Далее мы сначала устанавливаем его.

Далее вы можете увидеть следующий экран в левой колонке:

Если он не появляется, нажмите здесь:

Конец установки

Шрифт только что установленной боковой панели будет относительно небольшим, вам нужно установить шрифт и расстояние между экранами, здесь сложнее

Сначала вам нужно установить плагин PackageResourceViewer

Открыть командную палитру (сочетание клавиш Ctrl + Shift + P)

Войдите в Управление пакетами: установите и нажмите Enter, чтобы найти и установить пакет PackageResourceViewer

После завершения установки используйте PackageResourceViewer, чтобы открыть файл темы для редактирования.
Открыть палитру команд
Enter PackageResourceViewer: открыть ресурсный ввод

Введите так в списке пакетов и выберите первый

PS: Внутри вы обнаружите, что есть несколько файлов цветовой темы [Soda имеет несколько файлов конфигурации textmate, и есть только одна тема, откройте файл конфигурации цвета, который вы называете] - Откройте «Настройки» -> «Настройки», чтобы увидеть название используемого вами цветового профиля; см. Рисунок

Затем введите Soda Dark.sublime-theme и нажмите Enter

Найдите "class": "sidebar_label" в открытом файле
Добавьте следующий код после «class»: «sidebar_label»: «font.size»: 18, // Установите размер шрифта на.

Сохранить, изменение завершено

3 Изменить межстрочный интервал
Найдено "class": "sidebar_tree"

Настройте значение «row_padding»: [8, 8], если необходимо.
// Описание параметра: первый параметр - это расстояние между текстом и левой границей, а второй параметр - межстрочный интервал.

Кроме того, добавьте следующий пункт.
4. Измените размер шрифта заголовка документа
PS: это размер шрифта имени документа, отображаемого вверху
найдено "tab_label"
Настройте "font.size": 15

В некоторых видео-уроках Sublime SideBarEnhancements можно использовать сразу после установки.После щелчка правой кнопкой мыши на боковой панели становится много вариантов щелчка правой кнопкой мыши, например, вы можете открыть их в браузере. Как насчет изменения, правая кнопка на боковой панели все еще имеет только опцию «закрыть»?

Решения

Это должен быть открытый пакет, то есть файл в открытой папке. Невозможно открыть файл в одиночку.

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

Шаг 1: Установите этот плагин, найдите соответствующие учебники, в этом блоге есть инструкции

Шаг 2: После установки нажмите «Настройки»> «Настройка пакета»> «Боковая панель»> «Пользователь ключа» на панели инструментов, введите следующий код

Здесь, нажмите Ctrl + Shift + C, чтобы скопировать путь к файлу, нажмите F1

F3, чтобы просмотреть эффект в Chrome, Firefox, IE браузере, конечно, вы также можете определить свои собственные сочетания клавиш и, наконец, обратить внимание на путь браузера в коде. Путь к файлу на компьютере имеет преимущественную силу.

В следующем окне видим стандартный путь для установки программы. Нажимаем Next.

Далее инсталлятор предлагает включить запуск программы в контекстное меню, т.е. при нажатии на файл правой кнопкой мыши в контекстном меню мы будем видеть SublimeText для открытия файла. Это очень удобно. Поэтому устанавливаем флажок Add to explorer context menu и нажимаем кнопку Next.

В следующем окне нажимаем Install.

По окончании установки нажимаем Finish.

После этого запускаем программу, щелкнув по ярлыку на рабочем столе.

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

Отличие бесплатной версии от платной в том, что в шапке программы присутствует надпись UNREGISTERED

И иногда появляется окно, предлагающее зарегистрировать и оплатить программу. Можно нажать Отмена и работать дальше.

Настройка внешнего вида программы Sublime Text. Настройка цветовых схем

Сначала отобразим боковую панель. Для этого надо выполнить команду Yiew – Side Bar – Show Side Bar

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

Можно перетащить папку с файлами на левую панель.

Настроим цветовую схему программы и кода. Для этого откроем файл с кодом html и перейдем по команде Preference – Color Scheme…

Открывается окно с предустановленными цветовыми схемами

При выборе любой из схем, изменяется цветовое оформление окна программы Sublime Text.

Для того, чтобы подгружать в программу дополнительные цветовые схемы, необходимо сначала установить установщик.

Для этого переходим в меню Tools – Command Palette…

Появится окно с полем поиска.

В поле поиска вводим install, пока не появится Install Package Control и нажимаем на него.

Через некоторое время появится окно об успешной установке Package Control.

Снова вызываем команду меню Tools – Command Palette…, в поле вводим install, пока не появится Package Control: Install Package и нажимаем на него.

Через некоторое время появится окно со списком доступных дополнений.

В поле поиска вводим название темы Base 16 Color Scheme.

Нажимаем на этот пункт и ждем установки.

После установки переходим к смене схем. Выполняем команду Preferences – Color Scheme.

И видим, что в списке появилось гораздо больше цветовых схем.

Наберем в строке поиска Ocean и выбираем эту тему.

Видим, что цветовое оформление изменилось.

Методом перебора Вы можете подобрать для себя другую понравившуюся цветовую схему.

После этого выберем команду Preference – Theme…

И в появившемся окне щелкнем по Adaptive.sublime-theme.

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

Сделаем еще дополнительные настройки. Выполним команду Prefernce - Settings

Откроется новое окно, разделенное на две части. В левой части прописаны настройки по умолчанию. Их изменить нельзя, их можно только переопределить в правой части. Каждая следующая настройка должна отделяться запятой.

В правом окне уже прописаны некоторые настройки цветовой схемы.

Внесите запись "margin": 0, //Убираем отступ

И сохраните файл командой File – Save. Весь код немного подвинулся влево.

Чтобы увеличить или уменьшить размер шрифта в окне программы, достаточно зажать клавишу Ctrl и крутить колесико. Чтобы вернуться к настройкам по умолчанию, надо выполнить команду Preference – Font – Reset

Пропишем еще несколько настроек:

“tab_size”: 3, //Размер табуляции – т.е. насколько сместится курсор влево при нажатии клавиши Tab

"word_wrap": "true", //Перенос строк всегда

Закройте это окно.

Продолжим настраивать окно программы. Часто в ходе верстки необходимо отображать два файла: html и css. Для этого необходимо разделить окно программы на две части. Сделать это можно командой Yiew – Layout – Columns: 2

Теперь мы можем расположить два файла с кодом рядом.

Синтаксис имеет определенную подсветку для каждого языка. Чтобы увидеть весь список языков и синтаксисов, надо нажать в правом нижнем углу программы на пиктограмму языка. Например, для файла html в правом нижнем углу будет запись HTML, для файла css соответственно запись CSS. Надо щелкнуть по этой записи и появится весь доступный список.

Но, чтобы синтаксис подсвечивался должны быть установлены соответствующие схемы.

Установим дополнительные схемы подсветки синтаксиса.

Например, для файлов SCSS в программе нет предустановленной подсветки синтаксиса. Если мы откроем файл SCSS, то увидим только белый цвет.

Выбираем команду меню Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package.

Вводим SCSS.

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

Установка необходимых плагинов

Auto File Name – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.

Выполняем знакомую нам команду Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package и затем AutoFileName.

После установки этого плагина в коде можно видеть содержимое папки, например, img и выбрать соответствующий файл.

Bracket Highlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.

Дополнительные настройки плагина можно сделать, выполнив команду Tools – Color Highlighter

Emmet – позволяет с помощью сокращений писать команды кода.

Например, чтобы написать такой код <div необходимо в редакторе набрать только имя класса и нажать клавишу Tab. Т.е. надо записать .main и нажать Tab

После установки необходимо перезапустить программу.

Goto Css Declaration – навигация в коде. Например, чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.

Чтобы создать горячую клавишу, необходимо после установки плагина выполнить команду Preferences – Key Bindings.

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

Например, сделаем следующую запись

Тогда переход из html файла на нужный класс в таблице стилей css будет по нажатию клавиш ctrl+q. Не забываем, что в html-файле курсор должен стоять на имени класса, который ищем в таблице стилей.

eCSStractor – плагин позволяет извлекать селекторы sass из html-кода.

Выберите в меню программы Preferences – Package Settings – eCSStractor – Key Bindings – User. Наберите следующий код.

Выберите в меню программы Preferences – Package Settings – eCSStractor – Settings – User. Наберите следующий код.

Теперь можно извлекать селекторы, соответствующие методолигии БЭМ, прямо из HTML кода сочетанием клавиш Ctrl+`(ё).

Tag – позволяет извлекать css селекторы из выделенного фрагмента html-кода.

Устанавливает плагин вручную. Сначала скачайте сам плагин здесь. Затем распакуйте в папку по следующему адресу

C;\Users\Твое имя пользователя\AppData\Rroaming\Sublime Text 3\ Packages

После этого надо перезапустить Sublime Text.

Теперь надо добавить горячую клавишу. Заходим Preferences – Key Bindings. Если была предыдущая запись, новую пишем через запятую. Введите следующий код.

Весь наш файл с учетом предыдущих установок и настроек выглядит следующим образом. У Вас он может выглядеть по-другому. Главное обратите внимание на то, что записи разделяются запятыми (строки 5 и 9).

Ссылки для редактора Sublime Text:

Необходимые плагины:

AutoFileName – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.

BracketHighlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.

Goto-CSS-Declaration – навигация в коде. Чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.

Tag – позволяет извлекать селекторы css из выделенного фрагмента html-кода.Tag.zip Путь для распаковки плагина - C:\Users\ Твое имя пользователя \AppData\Roaming\Sublime Text 3\Packages

а также цветовую схему Base16 Color Scheme и подсветку синтаксиса SASS.

Просмотреть все установленные плагины в Sublime Text можно командой Preferences – Package Settings

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

Многие не используют эту замечательную функцию Sublime Text (далее ST). Каков твой обычный алгоритм подготовки к работе? Скорее всего, он выглядит примерно так:

Открыть ST
Открыть Finder (или Проводник в Windows)
Находим папку с проектом
Перетаскиваем папку в окно редактора
Ищем нужные файлы в сайдбаре ST и открываем их на редактирование
Начинаем работу

Не слишком быстро. Разве не удобнее продолжить с того места, где ты остановился в прошлый раз? Разумеется удобнее. Вышеприведенный алгоритм критически неэффективен, так что предлагаю обратить внимание на пункт Project в главном меню ST:

Создаем первый проект

Каждый сохраненный проект представляет собой конфигурационный файл, который нужно где-то разместить. В нем сохраняется вся информация о проекте. Начни с создания папки для хранения данных файлов. Назови её например sublime-projects.

Затем начни новый проект, создав файл или папку через главное меню. Теперь выбери пункт Project > Save Project As. Находи нашу папку с именем sublime-projects, выбирай имя проекта и сохраняй.

Вывод списка сохраненных проектов

Для быстрого доступа к списку всех имеющихся проектов, можно использовать комбинацию клавиш CMD-CTRL-P. В открывшемся поле начни вводить нужное имя и фильтр позволит тебе увидеть искомый проект. После нажатия клавиши Enter, все папки и файлы проекта будут немедленно открыты в таком виде, как ты их сохранил, а все файлы проекта будут отображены на сайдбаре слева.

Таким способом, можно очень просто переключаться между разными проектами.

Поиск файлов внутри проекта

Это одна из самых эффективных по части экономии твоего времени функций. Ввод первых символов работает быстрее, чем визуальный поиск с помощью курсора. Так что как только твой проект открыт, нажми CMD-P и начинай ввод!

2. Управление вкладками

Вкладки позволяют быстро сориентироваться в файлах текущего проекта. Но помимо вкладок есть еще и возможность показать несколько областей просмотра. Обычно, в стандартном веб-проекте открыты: один HTML-файл, один CSS, и еще, скажем, JavaScript-файл. Тремя данными шорткатами можно быстро переключаться в режим 2-х, 3-х или 4-х областей просмотра:

CMD-OPTION-1 – две области просмотра
CMD-OPTION-2 – три области просмотра
CMD-OPTION-3 – четыре области просмотра

А теперь, чтобы перемещаться между ними последовательно, используй сочетания:

CMD-ALT-LEFT ARROW – перейти к предыдущей вкладке
CMD-ALT-RIGHT ARROW – перейти к следующей вкладке

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

4. Поиск совпадений с выделенным набором символов

Одно за другим:
Выдели нужные символы и при помощи комбинации CMD-D последовательно добавляй каждое следующее вхождение к выделению.

Все сразу:
Вновь выдели строку, но теперь, чтобы выделить все вхождения разом, нажми комбинацию CMD-CTRL-G.

Выделение строки за строкой:

С помощью комбинации CMD-L можно выделить строку, а с каждым следующим нажатием к выделению будет добавляться нижележащая строка.

Выделить все дочерние элементы:

Поставь курсор на элемент, входящий внутрь какого-либо родительского элемента (это может быть например HTML-тег <body> внутри тега <html> или CSS-свойство внутри селектора – неважно, главное что есть определенный уровень вложенности). После этого нажми CMD-SHIFT-J и все дочерние и вложенные в них элементы будут выделены.

5. Прочие возможности, сохраняющее твое время

Переход к функции

Чтобы найти какую-либо функцию (например, JavaScript), нажми CMD-R и начни вводить её имя в открывшемся поле.

Копирование текущей строки

Кликни на строке, которую хочешь скопировать и нажми CMD-SHIFT-D. Прямо под скопированной строкой будет вставлен её дубликат, а курсор будет на него перемещен.

Если ты написал открывающий тег, скажем, <span> и не хочешь закрывать его вручную, то просто нажми CMD-ALT-. и ST сделает это за тебя. Другой метод подразумевает написание тега без кавычек span с последующим нажатием клавиши TAB.

ST имеет шорткат, позволяющий скрывать/показывать боковую панель. Нажми CMD+K, затем отпусти K и нажми B чтобы это сделать.

Создание «множественных курсоров»
Что если ты захотел поставить курсор одновременно в нескольких местах? Тогда зажми CMD и кликни в нужном месте. Этот процесс можно повторять сколько угодно раз, создавая неограниченное количество таких курсоров.

Вертикальные «множественные курсоры»
В предыдущем случае, нужно было кликать в тех местах, где ты хотел поставить курсоры. Но зачастую бывает несколько строк, в каждой из которых нужно поставить курсор в одной и той же позиции, то есть вертикально. Нет необходимости делать отдельные клики, вместо этого зажми ALT и проведи вертикальную линию.

6. Полезные плагины для авторов статей: предпросмотр Markdown-документа

7. Must-Have плагин: Hayaku

Этот плагин поможет тебе писать CSS-код в разы быстрее и намного удобнее. Hayaku сравним со знаменитым Emmet, но имеет множество дополнительных фишек.

«Умные» сокращения CSS-свойств

Вот несколько примеров сокращений пар «свойство/значение», которые распознает Hayaku(пары раскрываются в нормальные свойства со значениями после нажатия TAB):

Увеличение/уменьшение значение с клавиатуры

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

Читайте также: