Color picker sublime text 3 как вызвать

Обновлено: 06.07.2024

Я прочитал этот ответ - Sublime 2 - изменяет цвет фона в зависимости от типа файла? - для Sublime 2, но я использую Sublime 3 (в настоящее время в бета-версии), а цветовая схема отсутствует - По умолчанию "в папке пакета.

Для Как изменить общие цвета (фон и шрифт)?

для MAC: перейти к возвышенному тексту -> настройки -> цветовая схема

Шаги, которые я выполнил:

Я была такая же проблема. Sublime3 больше не показывает все установленные пакеты, когда вы выбираете "Показать пакеты" в меню настроек.

Чтобы настроить цветовую схему, выполните следующие действия (UNIX):

Найдите каталог пакетов SublimeText в каталоге, в котором установлен SublimeText (в моей настройке это был/opt/sublime/Packages)
Откройте "Цветовая схема - Default.sublime-package"
Выберите цветовую схему, которая наиболее соответствует вашим требованиям, и скопируйте ее
Из Sublime Text выберите Предпочтения - Обзор пакетов - Пользователь
Вставьте сюда ранее скопированную цветовую схему и переименуйте ее. Теперь он должен отображаться в меню "Настройки - Цветовая схема" в разделе "Пользователь".
Следуйте инструкциям по ссылке, которую вы упомянули ранее, чтобы внести необходимые изменения ( Sublime 2 - изменение цвета фона в зависимости от типа файла? )

--- РЕДАКТИРОВАТЬ ---

В Mac OS X темы хранятся в заархивированных файлах, поэтому, несмотря на то, что файл настроек показывает их как находящиеся в папке "Пакеты/Цветовая схема - по умолчанию", они не отображаются в этом каталоге, пока вы не извлечете их.

Их можно извлечь с помощью средства просмотра ресурсов пакета (см. Этот ответ , чтобы узнать, как установить и использовать средство просмотра ресурсов пакета).
Поиск цветовой схемы в экстракторе пакетов (должны быть указаны параметры "Цветовая схема по умолчанию" и "Цветовая схема")
Извлеките тот, который вы хотите. Теперь он будет доступен пользователям/UserName/Библиотека/Поддержка приложений/Sublime Text 3/Пакеты/Цветовая схема - по умолчанию (или Legacy)
Сделайте копию схемы, которую вы хотите изменить, отредактируйте по мере необходимости и сохраните ее
Добавьте или измените строку в пользовательских настройках, которая указывает на цветовую схему

Перейти к настройкам
Нажмите на цветовую схему
Выберите вашу цветовую схему
Я выбрал plastic для моего случая.

Шаги, которые я выполнил для общей темной темы, включая файловый браузер:

Перейти Preferences -> Theme.
Выберите Adaptive.sublime-theme

Чтобы просмотреть файлы тем для ST3, установите PackageResourceViewer через PackageControl .

Затем вы можете использовать Ctrl + Shift + P >> PackageResourceViewer: Open Resource для просмотра файлов темы.

Чтобы отредактировать определенный цвет фона, вам нужно создать новый файл в папке пользовательских пакетов Packages/User/SublimeLinter с тем же именем, что и тема, применяемая в настоящее время к вашему возвышенному текстовому файлу.

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

В противном случае, если вы пытаетесь изменить собственную возвышенную тему, добавьте следующее в новый создаваемый вами файл (названный так же, как и собственная тема, например Monokai.sublime-color-scheme ) с вашим выбором цвета

Затем вы можете открыть файл, к которому вы хотите применить синтаксис/цвет, а затем перейти к настройкам, относящимся к синтаксису (в разделе "Предпочтения"), и добавить путь к файлу в файле настроек, относящихся к синтаксису, например:

Обратите внимание, что если вы установили тему с помощью пакета управления, она, вероятно, имеет .tmTheme расширение файла.

Если вы хотите отредактировать цвет фона боковой панели, чтобы он был темнее, перейдите к Preferences > Theme > Adaptive.sublime-theme

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

При верстке HTML-шаблонов часто ловил себя на мысли, что редактору Sublime Text не хватает одной удобной вещи - инструмента для выбора цвета в процессе кодинга.

Допустим, есть блок div и мне необходимо сделать для него произвольную фоновую заливку через CSS-свойство background-color . Откуда мне взять значение нужного цвета в HEX-формате (про RGBA уже молчу)? Если скажете, что держать в голове значения этих цветов, то насмешите (можно помнить 5-10 значений, не больше). Хранить в виде таблицы цвета и их значения в HEX\RGBA? Этот список вечно куда-то девается и в нужный момент его постоянно нет под рукой.

В ходе своей деятельности я постоянно пробую новые HTML-редакторы, платные и бесплатные. Платные редакторы, конечно, более “отшлифованные” и удобные в работе. Так вот, в таких редакторах, как JetBrains WebStorm, Adobe Dreamweaver, EmEditor есть функция автоматического перехвата события, когда в процессе кодинга я пытаюсь добавить цвет для элемента:

Чтобы вызвать его для выбора цвета, нужно нажать сочетание клавиш:

для Windows: Ctrl+Shift+C
для OS X: Cmd+Shift+C
для Linux: Ctrl+Shift+C

Появится стандартное окно выбора цвета под операционную систему Windows (на Mac OS X я еще не заработал):

Все прекрасно. Только один момент - вызывать этот плагин придется все же “вручную”, через сочетание клавиш.

Наверное, как-то и можно “повесить” плагин “ColorPicker” на определенное событие в редакторе Sublime Text, как это сделано в том же JetBrains WebStorm. Но как это сделать - я пока не знаю. Наверное, наподобие создания сниппетов в Sublime Text?

TypeScript - размеченные объединения

> Пользовательское объединение типов - что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):

By default, the hex color code is inserted using uppercase letters. To use lowercase letters instead, copy the contents of ** Preferences -> Package Settings -> ColorPicker -> Settings-Default ** to the empty file created by selecting ** Preferences -> Package Settings -> ColorPicker -> Settings-User **, then change "color_upper_case" to false .

Calling from Other Plugins

To commands are provided to assist in calling a color picker from other plugins. Info is shared between the plugins via a settings file. It does not have to exist on disk; it can exist only in memory for the sole purpose of sharing the return. It is advised to use a unique name for the settings file. The data is returned in the settings key color_pick_return . It is advised to set color_pick_return to None in your settings file before calling any of the commands. So you can tell if it set teh variable or not.

ColorPickApiIsAvailableCommand

This command is used to test if ColorPicker is installed.

ColorPickApiGetColorCommand

This command is used to call a color picker and get the selected value. It takes a setings file and an optional default_color .

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

Настраиваем программу

Sublime Text 3 — один из самых распространенных текстовых редакторов для веб-разработчиков.

Здесь можно настроить все — от внешнего вида до компонентов программы (плагинов). Для настройки собственных сочетаний горячих клавиш переходим в «Preferences» -> «Key Bindings».

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

Установка Package Control

Редактор имеет возможность добавления плагинов.

Удобнее всего это делать через панель Package Control, которая предназначена для более быстрой и удобной установки плагинов.

Для начала установим Package Control:

Переходим на официальный сайт, копируем текст установки в зависимости от версии Sublime Text.
С помощью сочетания клавиш «Ctrl +

» вызываем встроенную в редактор консоль, вставляем в нее скопированный текст и нажимаем Enter. Кстати, знак тильда «

» находится на клавише с буквой «Ё».

Package Control установлен. И теперь переходим к самому главному.

Работа с плагинами в Package Control

Чтобы запустить Package Control, необходимо набрать сочетание клавиш «Ctrl + Shift + P» и из списка выбрать элемент Package Control: Install Package.

Теперь у нас есть возможность быстрого поиска плагинов и их установки. Для тренировки давайте установим Material Theme, и выполним ее настройки. Кстати, я не просто так выбрала эту тему — на наших вебинарах у Юрия часто спрашивают название темы в его саблайме.

Запускаем установщик плагинов.

Набираем в поле поиска Material Theme.
Нажимаем и ждем, внизу должна появиться надпись «Installing package Material Theme». В процессе установки будет запрошено добавление еще одного плагина, разрешаем.

Чтобы применить тему, необходимо перейти в меню «Preferences» -> «Color Scheme» -> «Material Theme» -> «schemes», а далее — тема, которая вам больше всего понравится.

А сейчас пора установить что-нибудь более существенное. Давайте ознакомимся с самыми популярными плагинами для Sublime Text:

1. Emmet

Emmet — плагин, позволяющий сделать отображение кода более удобным. Здесь используются сочетания клавиш. К примеру, «! + tab» на странице index.html создает каркас документа, а «div.container + tab» превратится в полноценный код:

2. Advanced New File

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

3. Color Picker

Очень полезный плагин, который добавляет возможность выбирать и подбирать цвет из палитры в hex-формате.

4. Color Highlighter

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

И бонус – темы

Красивая новая тема всегда делает написание кода более приятным.

В следующей статье мы рассмотрим другие плагины для Sublime Text.

P.S. Если у вас в арсенале имеются крутые плагины, делитесь ими в комментариях к посту.

Хочешь научиться верстать сайты?
Начни с бесплатного мини-курса от WebCademy (верстка одностраничного сайта с нуля):

Продолжи полноценным курсом Профессия HTML верстальщик:

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

Color Highlighter

Это плагин подсветки цвета. Скриншот работы плагина находится выше. Работает нормально, т.е. подсвечивает код цвета реальным цветом постоянно, а не только при клике только в CSS.

Есть несколько стилей подсветки, которые меняются в пользовательском файле настроек в данной переменной

фон — идет по умолчанию, кавычки можно оставить пустыми;
не подсвечивать — none;
рамка — outlined;
underlined (solid, strippled, squiggly) — пример: underlined_ххх — подчеркивание тремя стилями;

Собственно и все. Данный плагин не конфликтует с RGB программой, которую можно вызвать в любой момент по Ctrl+Shift+C, но о ней ниже.

Color Picker

Полезная программа, которая вызывается по Ctrl+Shift+C. Представляет из себя RGB палитру, где можно подобрать цвет. Вставляется в файл в виде HEX кода.

Дополнительно интегрируется в контекстное меню двумя пунктами: Choose Color — выбрать цвет и Convert Color — изменить цвет.

Установка обоих плагинов проходит без проблем через репозиториум. Дополнительные ссылки на GitHub и Wbond представлены ниже:

Менеджер пакетов для Sublime. Без него установка и удаление пакетов – сущий ад, поэтому поставить Package Control нужно прежде всего.

Эммет стоял бы номером один, если бы у Саблайма был нормальный менеджер пакетов из коробки. Благодаря ему работа с разметкой становится в разы удобней и быстрее. Например, html + tab создаст готовый каркас для html-документа, а div.wrapper + tab превратится в <div ></div>

Коллекция сокращений сниппетов для JavaScript, которая поможет работать значительно быстрее. Зачем писать document.querySelector('selector’); , когда можно просто написать qs , нажать таб - и дело с концом!

С этим пакетом не придется лазить по деревьям каталогов и пользоваться выпадающими менюшками. Через cmd+alt+n (ctrl+alt+n) вызовется строка для ввода – вводим путь, имя файла, клацаем Enter. Готово!

Этот плагин добавляет возможность пользоваться всеми необходимыми для разработки функциями Git: add, commit, доступ к логам – и все это не покидая Sublime!

Добавляет возможность просматривать статус файла и отслеживать изменения прямо в редакторе. Можно сравнивать версии файлов из любых веток.

Как и следует из названия, этот пакет добавит некоторые улучшения в левый сайдбар. Например, появятся пункт «Открыть в браузере», возможность сделать дубликат и еще около 20 полезных функций.

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

В Sublime Text 3 появилась возможность генерировать и вставлять lorem ipsum, а Placeholder немного расширяет эту возможность. С ним можно вставлять макетные изображения, формы, списки и таблицы.

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

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

Минифицирует и создает в каталоге текущего файла его минифицированную версию. Работает с CSS, HTML, JavaScript, JSON и SVG. Для работы требует внешние node.js библиотеки, так что их придется установить отдельно:

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

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

В Саблайме есть подсветка синтаксиса для примерно 50 языков, однако некоторые популярные, но нишевые решения в нем отсутсвуют. Вот несколько полезных ссылок, которые могут кому-то пригодиться:

Sublime Text — один из лучших текстовых редакторов в мире. Количество встроенных функций и расширений, которые доступны благодаря плагинам восхищает даже самого искушенного пользователя. Git, Vim, Python, Shell Script, регулярные выражения — все лучшие изобретения человечества собраны в этой маленькой программе. Приложение невероятно красиво и удобно в использовании. Один раз открыв Sublime вы не закроете его никогда.

Установка

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

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

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

Основы использования

При запуске программы открывается безымянный текстовый файл.

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

Если подвести указатель мыши к верхней стороне экрана, то отобразится меню. В разделе File можно сохранить текущий документ или открыть новый для редактирования.

Файл можно сохранить под любым расширением.

И в большинстве популярных кодировок:

Верно и обратное. В Sublime можно открыть файл с любым расширением и кодировкой.

К слову, в Sublime вся введенная информация сохраняется автоматически. Текстовый редактор крайне редко принудительно завершает работу (у меня это было один-единственный раз, когда я пыталась сделать 20 тысяч замен символов в тексте одной командной), но даже в таком случае ни один напечатанный символ не пропадет.

Перемещение по документу

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

Переставить курсор на определенную строку или символ можно с помощью меню Goto.

Но самая мощь Sublime ощущается при использовании закладок. Добавить закладку в текст можно с помощью пункта меню Goto -> Bookmarks -> Toogle Bookmark. Перемещаться между закладками можно с помощью команд Next Bookmark и Previous Bookmark.

Поиск и замена

Если выбрать пункт меню Find ->Find, то внизу экрана появится панель поиска.

C окошком для ввода искомых символов и кнопками в правой части экрана все понятно. Разберемся для чего нужны иконки в левом нижнем углу экрана.

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

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

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

Рядом с белым окном находится кнопка, которая подсвечивает все найденные в тексте совпадения. А кнопка слева от нее ограничивает область поиска выделенным фрагментом.

Аналогичная панель появляется при вызове пункта меню Find -> Replace.

Палитра команд

Для повышения продуктивности многие команды можно запускать из палитры команд, которая открывается из пункта меню Tools -> Command Palette.

Настройки

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

Подсветка синтаксиса

Подсветка синтаксиса в этом текстовом редакторе выглядит просто волшебно. Вот, к примеру, немного PHP и SQL:А вот HTML + JavaScript:

Sublime Text умеет эффектно подсвечивать код, написанный на трех десятках языков программирования.

Чтобы включить соответствующие оформление надо просто сохранить файл под правильным расширением.

Если вам нужно подсвечивать Brain Fuck, Fortran или еще какую-нибудь экзотику, то можно написать для этой цели собственный плагин или установить уже готовый.

Автодополнение кода

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

Стоит ввести в Sublime один символ, как он тут же предложит варианты завершения строки:

Сворачивание кода

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

Сниппеты

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

Проекты

Еще одна замечательная функция Sublime, которая пригодится не только программистам — возможность объединить несколько файлов в один проект, что позволяет открывать и закрывать эти файлы одним движением руки, а также применять к ним групповые операции.

Чтобы отобразить в Sublime боковую панель с обозревателем файлов необходимо перетащить нужную папку на поле для набора текста.

Теперь можно сохранить выбранные файлы в виде проекта с помощью пункта меню Project -> Save Project As. После этого файлами можно манипулировать как отдельным проектом.

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

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

Макросы

Для запуска записанного макроса используется команда Playback Macro. Записанный макрос можно сохранить под расширением sublime-macro и делиться им с другими пользователями.

Гарантированный способ повысить скорость набора кода — научиться работать в текстовом редакторе vim, который существует уже почти четверть века. Он позволяет работать с текстом не притрагиваясь к мыши или трекболу. Это повышает производительность труда как минимум на треть. Задача освоения vim не самая простая, но она стоит того, чтобы за нее взяться.

Для работы в режиме Vim, в стандартной комплектации Sublime есть плагин Vintage Mode. По умолчанию он находится в неактивном состоянии. Включить его можно прописав в конфигурационном файле значение true для параметра vintage_start_in_command_mode.

И указать каким образом будет производиться вход и выход из vim режима:

Если вы пока еще не работали с vim, то велика доля вероятности что вам стоит научиться это делать. Вот эту картинку можно поставить на рабочий стол и в минуты размышлений созерцать ее и запоминать комбинации клавиш для vim/Vintage Mode для Sublime:

Плагины

. Это дополнение позволяет управлять всеми плагинами для Sublime; . Плагин для работы с популярной системой контроля версий; . Использование командной строки в разы ускоряет работу с файлами проекта; . Выравнивает отступы в HTML, CSS, JavaScript и PHP; . Убирает лишние пробелы; . Мгновенно подбираем цвет и вставляем в текст его шестнадцатеричный код; . Удобная подсветка синтаксиса Markdown.

Написать свой плагин для Sublime может любой разработчик, владеющий языком Python. Подробнее о Sublime API и написании плагинов можно прочитать в статье How to create a Sublime Text 2 Plugin.

Где искать дополнительную информацию

На русском языке

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

На английском языке

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

У пользователей Sublime Text есть форум, на котором за все время создано около 15 тысяч тем и каждый человек может задать свой вопрос.

О Sublime Text издана отдельная книга, которая содержит самое полное руководство по использованию текстового редактора. Стоит она 40 долларов, но ее авторы гарантируют, что это скромная инвестиция окупится мгновенно.

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