Тема для sublime text 3 как в brackets
Обновлено: 07.07.2024
Разберем "Темы в Sublime Text 3", как скачивать темы для Sublime Text 3, где найти новую тему для Sublime Text 3, как устанавливать!?
О темах найти, скачать, установить в Sublime Text 3
Что такое тема в в Sublime Text 3 где находится!?
Внимание! Не путать цветовую схему и тему - это просто разные вещи!В отличии от цветовой схемы, установка темы - это, иногда. не простое дело! Почему!? Я не в теме, но могу лишь предположить, что в последних версиях Sublime Text 3, они изменили алгоритмы, поэтому, некоторые темы устанавливаются криво! - К сожалению!
Давно хотел с этим вопросом разобраться, в смысле с темами, и закрыть вопрос!
Чтобы не быть голословным! давайте установим какую-то тему - это будет реальный пример установки темы на сайт!
Где находятся "Темы Sublime Text 3"
Как найти эту папку у вас на компьютере!?
C:\Users\ ИМЯ_ПОЛЬЗОВАТЕЛЯ \AppData\Roaming\Sublime Text 3\Installed Packages ИЛИ:Открываем preference - просмотр плагинов - в новой папке нужно зайти в папку - Sublime Text 3 - далее Installed Packages и тут вы увидите, если темы установлены, то они имеют вид(например) :
Пример установки темы на Sublime Text 3
Чтобы не быть голословным - установим какую-то тему прямо сейчас на Sublime Text 3 - давно хотел поставить тему SODA!В программе Sublime Text 3 - набираем сочетание клавиш ctrl + shift + P - перед вами должно появиться новое окно, где вбиваем в строку.
Далее набираем тему, как только вы начитаете набирать, то вам сразу выскакивают названия похожие. мы хотим установить - SoDaReloaded - нажимаем enter!
Пример установки темы на Sublime Text 3
После этого. нужно немного подождать! Не хватайтесь сразу за кувалду!
Пример установки темы на Sublime Text 3
В том числе тут написано:
- Open your User Settings Preferences file:
Sublime Text -> Preferences -> Settings - User
- Add (or update) your theme entry to be:
"theme": "SoDaReloaded Dark.sublime-theme"
"theme": "SoDaReloaded Light.sublime-theme"
- Restart your editor
- Откройте файл пользовательских настроек Preferences:
Возвышенный Текст - > Настройки - > Настройки-Пользователь
- Добавить (или обновить) вашу тему записи, чтобы быть:
"тема": "Сода перезарядилась темная.sublime-тема"
"тема": "загруженный кодом свет.sublime-тема"
Обращаю ваше внимание на запятую! в конце строки. если в фигурных скобках ставите эту запись последней, то запятая не нужна, если нет, то запятая обязательна!(как в массиве php)"theme": "SoDaReloaded Dark.sublime-theme",
"theme": "SoDaReloaded Dark.sublime-theme",
Как установить темную тему в Sublime Text 3
Нашему народу – дай только скачать, и они не удосуживается узнать, что встроенные темы в Sublime Text 3 существуют! И этих тем очень много!
Где находятся цветовая схема у программы Sublime Text 3
Идем в preference - цветовая схема и здесь есть вариации выбрать тему дефолтную(по умолчанию) – либо второй вариант выбрать доступную тему для Sublime Text 3.
Здравствуйте. Этот мини гайд для тех, кто хочет настроить подсветку Brackets (скобочек), как, например, в notepad++, при этом не используя сторонних плагинов.
Приступим
Суть такова, что мы должны поменять или дополнить параметры Color Scheme(цветовой схемы), которую используем.
Итак, здесь будет 2 варианта. Первый, это новый вариант хранения цветовой схемы, а именно JSON, и второй вариант, старый, xml. Рассмотрим оба случая.
Для начала нужно скопировать архив(тот самый sublime-package), находиться он может в двух местах. Если вы хотите поменять скаченную цветовую схему, идем сюда:
C:\Users\ИМЯ_ПОЛЬЗОВАТЕЛЯ\AppData\Roaming\Sublime Text 3\Installed Packages
Тут хранятся все скаченные плагины
В том случае, если вы хотите поменять стандартную цветовую схему, идем сюда:
C:\Program Files\Sublime Text 3\Packages
Тут хранятся стандартные плагины, которые устанавливаются вместе с программой.
Стандартные цветовые схемы находятся в файле под названием Color Scheme — Default с расширением .sublime-package.
Дальше, копируем архив, и распаковываем его в папку с таким же названием. Кидаем архив по этому пути:
C:\Users\ИМЯ_ПОЛЬЗОВАТЕЛЯ\AppData\Roaming\Sublime Text 3\Packages
В этой папке можно хранить и менять ваши плагины, они будут работать, и их можно будет не архивировать обратно.
Отлично, теперь все готово к редактированию цветовой схемы.
Сама цветовая схема имеет расширение .tmTheme, это для старого формата xml, или
.sublime-color-scheme для нового формата JSON.
Выбираем ту тему, которую мы будем редактировать, и открываем её при помощи того же Sublime Text 3.
Далее открываем официальную документацию(ссылка в самом начале), и листаем в самый низ и видим:
Нам нужна вкладка Color Schemes.
Тут описаны параметры цветовых схем, которые мы можем менять.
Для старых версий .tmTheme так же есть документация, и ссылка на нее указана там же:
Отложим эту ссылку на потом.
На этой странице нам конкретно нужна вкладка Brackets:
Здесь показаны параметры цветовых схем для нового формата JSON:
Нам нужно поменять нужные нам параметры. Для этого открываем нашу цветовую схему и видим:
Нам нужен блок с названием «globals». Тут и задаются значения параметрам. Как видим, в стандартной теме Monokai уже есть нужные нам строчки
Тут нам нужно поменять «underline» на «bold» или какой вам угодно стиль(из документации), а так же поменять цвет с white3 на red или любой номер из цветовой палитры. Тут действуют константы из CSS(они кстати приведены ниже на этой странице документации). Так что вместо red, он подставит номер цветового оттенка.
Так же нам нужно добавить еще две строки с такими же значениями.
brackets_options — параметр вызывается, когда курсор находится около скобочки.
brackets_foreground — какой цвет будет у этих скобочек.
bracket_contents_options — параметр вызывается, когда курсор находится внутри скобочек.
bracket_contents_foreground — какой цвет будет у этих скобочек.
Вставляем недостающие параметры(их может и вовсе не быть) в блок, и сохраняем. Все должно заработать.
Для того, что бы поменять скобочки для старых тем, те которые в xml, нужно перейти по ссылке, которую я показывал выше, и щелкнуть на Global Settings:
Дальше пролистать немного ниже и увидеть параметры для xml формата:
Здесь оформление идет немного иначе.
Для начала откроем через Sublime Text 3 нашу цветовую схему, и увидим:
Нам нужен выделенный блок. Туда мы будем вставлять пары ключ-значение.
Как это работает:
Сначала идет ключ, к примеру тот, который нам нужен bracketsOptions, а далее идет его значение, прямо под ним bold
Выглядит это следующим образом:
Тут мы для параметра bracketsOptions задали значение bold.
Также нам нужно сделать для каждого параметра и вставить это в нужный блок(он показан на картинке выше).
После этого все должно заработать.
Также вы можете изменять множество параметров цветовых схем, они все описаны в документации.
Кодирование — один из самых универсальных навыков, которые можно приобрести. Мир переключается на всемирную паутину для связи, розничной торговли и многих других взаимодействий с большим бизнесом. Если вы начнёте программировать сейчас, это почти наверняка гарантирует вам работу в будущем, и чем раньше вы научитесь, тем больше у вас будет потенциального заработка. Первое, что вам нужно решить, это какой язык программирования вы хотите освоить. Это будет зависеть от пары факторов: что вы надеетесь сделать со своими способностями? Какие доходы вы надеетесь получить? Каковы потребности торговой площадки прямо сейчас? Ответы на эти вопросы помогут сформировать ваше решение.
После того, как вы выберете язык, вам понадобится платформа, на которой вы сможете изучать и практиковать его. Вот тут и пригодится текстовый редактор. На рынке существует множество различных типов текстовых редакторов — некоторые специализированные для определённых языков, некоторые адаптируемые ко многим языкам, а также некоторые так называемые IDE, которые функционируют не только как текстовые редакторы, но также как отладчики и компиляторы. Если вы смотрите на Sublime Text и Brackets как на возможные варианты, вы смотрите на текстовые редакторы, которые могут работать с множеством языков.
Критерии, которые следует учитывать при выборе текстового редактора, — это найти такой, какойне только быстрый и эффективный, но и соответствует вашему стилю кодирования. Вам нужно что-то, что не перегружает ваш компьютер и не перегружает память, но при этом предоставляет мощные функциональные элементы, отличные расширения и плагины, а также быстрое редактирование. Давайте посмотрим на Sublime Text и Brackets и посмотрим, соответствует ли один вашим потребностям более эффективно, чем другой.
Sublime Text
Sublime Text был основан в 2008 году Джоном Скиннером и быстро набирает популярность. Он полон функциональных элементов и функций навигации, которые позволяют быстро редактировать. В нём есть функция под названием «GoTo Anything», которая позволяет вам переходить в любое место кода за считаные секунды, независимо от того, над каким большим проектом вы работаете. Программа также предлагает автозаполнение и подсветку синтаксиса, что ускоряет процесс редактирования. Пользователи Sublime подтвердили, что это лёгкая программа, которая по-прежнему работает с впечатляюще высокой скоростью. По умолчанию Sublime Text значительно упрощён.
Как указано в Dunebook , Sublime требует, чтобы его пользователи установили диспетчер пакетов, прежде чем приступать к программированию. Однако этот подход позволяет полностью настроить текстовый редактор под свой стиль и предпочтение. Кроме того, поскольку редактор очень мощный, вы можете установить большинство пакетов без перезапуска редактора, что упрощает создание и формирование вашего опыта. Пожалуй, самая полезная функция в Sublime — это возможность многострочного редактирования. Это означает, что вы можете выделить переменную и изменить её, а Sublime разумно найдёт все другие места в коде, которые используют эту переменную, а также синхронизирует изменения.
Несмотря на свои удивительные возможности, Sublime Text не идеален. Как сказано в официальном обзоре Elegant Themes , Sublime не самый простой в освоении. Панель настроек не очень интуитивно понятна, требуя использования «истина» и «ложь» для навигации по файлам, чтобы достичь настройки, которой вы хотите управлять. Ещё одна трудность, которая может вас не затронуть вначале, но, вероятно, доставит немного хлопот позже.
Sublime Text имеет относительно небольшую команду разработчиков, что означает, что изменения и идеи приходят в программное обеспечение довольно медленно. Как вы уже догадались, это не с открытым исходным кодом. Хотя он работает на нескольких платформах (имеется в виду Linux, Windows или Max), полная лицензия стоит 80 долларов. У них действительно есть возможность загрузить Sublime Text и «оценить» программное обеспечение без временных ограничений, но единственный способ постоянно использовать программу требует лазейки.
В целом Sublime Text — это очень быстрый и эффективный текстовый редактор, который отличается согласованностью и стабильностью. Хотя для изучения может потребоваться некоторое время, Sublime Text — это универсальный и мощный текстовый редактор, который позволяет быстро редактировать большие проекты. Это довольно высокая цена для области, которая в основном является открытым исходным кодом, но она может стоить того, чтобы вы могли вырасти в неё.
Brackets
Brackets — это относительно новый продукт на рынке, разработанный в 2015 году компанией Adobe. Текстовый редактор в значительной степени ориентирован на разработку внешнего интерфейса , что имеет смысл, поскольку он был разработан компанией с использованием JavaScript. Brackets готов к работе прямо из коробки с удивительными функциями, непосредственно интегрированными в программное обеспечение, такое как Adobe Photoshop и Adobe Dreamweaver. Скобки также позволяют пользователям иметь предварительный просмотр в реальном времени с прямым подключением к вашему браузеру, что означает, что вы можете видеть изменения, которые вы вносите, в режиме реального времени. Всё это делает работу со скобками визуально ориентированной. Скобки также относительно легко справляются с большими файлами. Помимо всего этого, открытый исходный код Brackets позволяет добавлять в программу новые расширения, разработки и библиотеки. В качестве финального бонуса Brackets полностью бесплатен.
Brackets может обрабатывать несколько файлов, но это не значит, что он самый мощный на рынке. Brackets — это возможно, но не совсем соответствует скорости или мощности других текстовых редакторов, таких как Sublime Text или Atom. Поскольку он немного медленнее, Brackets может быть не лучшим вариантом для больших или более сложных проектов. Кроме того, его функции дополнительно настроены на разработку внешнего интерфейса с визуальной ориентацией, что не даёт толку тем, кто хочет работать на стороне сервера или на стороне сервера веб-разработки.
Выбор Brackets был бы разумным выбором при работе с C ++ или JavaScript, поскольку это его родные языки, и они хорошо работают с Adobe и доступными плагинами Adobe. Однако, если вы хотите больше сосредоточиться на стороне сервера, Brackets может быть не лучшим вариантом на рынке.
Sublime Text или Brackets: какой текстовый редактор лучше
Выбор между этими двумя текстовыми редакторами в основном зависит от ваших целей как программиста. Вы хотите стать фронтенд-разработчиком с чистым дизайном и простыми в использовании интерфейсами? Если это так, вы захотите использовать Brackets для потрясающей интеграции JavaScript и подключаемых модулей Adobe. Эти два преимущества вместе позволяют вам добавлять интерактивные Java-приложения в ваш код и сохранять эстетически привлекательный подход к интерфейсу ваших веб-сайтов с просмотром в реальном времени, чтобы всё, что вы делаете, было легко для глаз.
Однако если ваша цель — освоить внутреннюю часть веб-сайтов, создавая плотные, переплетающиеся сети кода, которые обладают высокой функциональностью и, возможно, даже высокой безопасностью для серверной части веб-разработки, Sublime Text подойдёт вам лучше всего. Sublime Text — это мощный инструмент, предназначенный для быстрого и эффективного редактирования больших объёмов кода. Цена довольно высока, но оно того стоит, учитывая огромную мощность, которую вы получаете с программным обеспечением.
Что бы вы ни выбрали, не забывайте получать удовольствие и получать удовольствие от процесса! Не бойтесь попробовать всего понемногу и точно определить, что именно вы хотите делать, а не только то, что, по вашему мнению, вы должны делать.
Перевод статьи Каталина Вейзила «Choosing the best code editor as a web developer in 2018».
Использование подходящего редактора кода это отличный способ обеспечить эффективный и продуктивный процесс разработки. Современные редакторы не только ускоряют работу. Они также предоставляют широкий ассортимент инструментов, которые уменьшают количество шагов, необходимых для выполнения определенных задач.
В этой статье мы рассмотрим несколько самых лучших, современных и кросс-платформенных редакторов кода, которыми вы можете начать пользоваться прямо сейчас.
1. Visual Studio Code
Visual Studio Code это бесплатный кросс-платформенный редактор кода, разработанный Microsoft. Программа имеет открытый исходный код. Исходя из опроса, проведенного Stack Overflow в 2017 году, это один из самых популярных редакторов кода, которым пользуются больше 24% разработчиков.
Он оснащен доступным набором инструментов для редактирования и отладки. Редактор легко интегрируется с другими сервисами. Его собственные свойства также легко расширить.
Новая функция Live Share предоставляет возможности для парного программирования, благодаря чему вы и ваша команда можете с легкостью работать над одной базой кода. Вам не придется для этого конфигурировать инструменты разработки или возиться с настройками окружения.
Кроме того, среди особенностей VS Code мы видим Git-интеграцию, IntelliSense (технология автодополнения), подсветку синтаксиса для самых популярных языков программирования и много других прекрасных функций.
Если вам этого недостаточно, вы можете с легкостью улучшить и кастомизировать VS Code благодаря коллекции плагинов, поставляемых Microsoft или создаваемых сообществом.
2. Sublime Text 3
Sublime Text 3 имеет бесплатную и премиум-версию. Это кросс-платформенный редактор кода. Он не только легковесный и очень шустрый в работе, но также и расширяемый.
Эту программу можно скачать совершенно бесплатно на официальном сайте и пользоваться ею сколько угодно в пробном режиме. Затем вы можете приобрести премиум-версию за $80.
По умолчанию Sublime Text 3 предоставляет базовое автодополнение, подсветку синтаксиса и функционал сворачивания (фолдинга). Но используя Package Control в Sublime Text, вы можете расширить последний и добавить больше «примочек»: инструменты отладки, новые теми, поддержку intellisense и т. п.
В последней версии Sublime (3.1) также улучшено использование памяти (в некоторых случаях до 30%), появился рендеринг текста с поддержкой лигатур, усовершенствовано взаимодействие пользователя с программой, определение синтаксиса и добавлены новые цветовые схемы.
3. Atom
Atom это еще один бесплатный, кросс-платформенный редактор с открытым исходным кодом. Он создан и выпущен GitHub.
По умолчанию Atom предоставляет подсветку синтаксиса, дополнение и сворачивание кода, а также встроенную поддержку десятков языков программирования.
Также этот редактор поддерживает GitHub. Он поставляется со встроенным менеджером пакетов, благодаря чему вы можете осуществлять поиск, а также устанавливать или создавать собственные пакеты для расширения функционала редактора.
Подобно VS Code, он также оснащен мощным инструментом для парного программирования – Teletype. Это дает возможность нескольким разработчикам присоединяться к изолированной сессии и работать совместно.
Atom можно расширить с помощью Atom-IDE – набора опциональных пакетов.
4. Vim
Хотя это очень мощный редактор, его довольно непросто изучить. Но если вам это удастся, Vim покажет чудеса производительности: для выполнения некоторых задач, обычно отнимающих время, потребуется лишь несколько нажатий клавиш.
В состоянии «прямо из коробки» Vim разве что довольно хорошо управляется с текстом. Но с помощью плагинов, скриптов и тонкой настройки для соответствия вашим вкусам, Vim становится могущественным оружием в вашем арсенале.
По сравнению с другими (графическими) редакторами, такими как Visual Studio Code, Sublime или Atom, Vim предоставляет тот же функционал (если хорошо настроен), но использует лишь часть системной памяти и загружается моментально.
5. Emacs
Emacs это еще один редактор кода на базе UNIX. Он написан на Lisp и может посоревноваться с Vim в юзабилити и расширяемости.
По умолчанию, он предоставляет режимы редактирования с распознаванием контента, включая подсветку синтаксиса для многих типов файлов, полную встроенную документацию и вводное руководство для новых пользователей.
Emacs очень настраиваемый и имеет первоклассную поддержку Lisp и других функциональных языков. Если вы знакомы с Lisp, то можете и сами написать расширение для этого редактора, поскольку он бесплатный и имеет открытый исходный код.
Вы можете настроить Emacs по своему усмотрению и внедрить функционал, выходящий за рамки редактирования кода, включая планирование проекта, использование Emacs в качестве почтового клиента, программы для чтения новостей, календаря и многое другое.
Подобно Vim, Emacs сложен в изучении: чтобы освоиться с ним и начать использовать его в полную силу, может понадобиться некоторое время.
Однако, в отличие от Vim, Emacs не предустановлен в каждом Unix, и использование памяти у него немного выше, особенно, если вы его расширите с помощью плагинов.
6. SpaceMacs
SpaceMacs это созданный и поддерживаемый сообществом редактор кода на основе Emacs. Он предоставляет подсветку синтаксиса для основных языков, а также инструменты тестирования и отладки.
Этот редактор пытается совместить сильные стороны Vim и Emacs, позволяя пользователям выбирать предпочтительный для них стиль редактирования.
SpaceMacs создан с учетом четырех основных принципов: мнемоники, понятности, последовательности и способности к конфигурации большим количеством людей.
Таким образом, используя SpaceMacs, вы можете быть уверены, что каждое сочетание клавиш организовано при помощи последовательных, мнемонических префиксов (например, «p» означает «project»). Благодаря этому использование редактора становится интуитивно понятным.
У SpaceMacs очень активное и услужливое сообщество, к которому вы можете присоединиться, чтобы получить помощь и помогать другим людям.
7. Notepad++
Notepad++ это развитый редактор кода, выпущенный в 2003 году и доступный только на платформе Windows.
Он не только прошел проверку временем, но также и стал вторым по популярности редактором кода в опросе StackOverflow за 2017 год. Им пользуются больше 34% разработчиков.
Notepad++ очень быстрый. Он поддерживает разнообразные языки программирования прямо из коробки, но широко известен как отличный редактор для HTML-кода.
Среди его особенностей можно назвать редактирование в разных вкладках, поддержку внешних плагинов, таких как макросы, умную подсветку синтаксиса, интеграцию компилятора, автодополнение и проставление отступов.
8. Brackets
Brackets это кросс-платформенный редактор с открытым исходным кодом, разработанный и выпущенный Adobe под лицензией MIT.
Он был создан с нуля специально для веб-дизайнеров и фронтенд-разработчиков, работающих преимущественно с JavaScript, HTML и CSS.
Brackets также поставляется с основными стандартными свойствами, включая автодополнение, подсветку синтаксиса для многих языков программирования, поддержку быстрого редактирования и разнообразных препроцессоров.
К его отличительным особенностям можно отнести опцию предпросмотра Live Preview. С ее помощью разработчик может открыть текущий документ в Chrome и просматривать, как этот документ отображается в браузере.
В Brackets также есть свойство «extract», позволяющее разработчикам подтягивать цвета, размеры, градиенты, шрифты и другие важные данные из PSD-файла в готовый к использованию CSS-файл.
Наконец, Brackets очень хорошо настраивается, а его основной функционал можно увеличить с помощью расширений, доступных в официальном реестре.
9. TextMate
TextMate считается «недостающим редактором» для Mac OS, сочетающим графический пользовательский интерфейс и системную структуру UNIX.
Несмотря на то, что TextMate имеет открытый исходный код, это коммерческий продукт, выпускаемый под лицензией BSD. Его цена – $60.
По умолчанию этот редактор имеет собственный мощный функционал, включая поиск и замену, выбор колонок, сворачиваемые блоки кода, дополнение кода, базовая подсветка синтаксиса для десятков языков программирования и многое другое.
TextMate также имеет преимущества в виде сильного сообщества и доступной документации. Плагины и темы есть как официальные, так и представленные пользователями.
10. Coda 2
Coda 2 это хороший редактор кода для Mac OS и iOS. Он разработан и выпущен Panic Inc — компанией, которая дала нам Transmit, Prompt и, наконец, Firewatch (игра с местом действия в пустынях Вайоминга).
Этот редактор стоит $99, но в течение 7-дневного пробного периода можно пользоваться бесплатно.
Coda это мощный редактор кода, спроектированный с мыслями о производительности и эффективности. У него современный и интуитивно понятный пользовательский интерфейс. Программа поставляется с такими функциями как дополнение кода, подсветка синтаксиса для различных языков, поддержка MySQL, локальная индексация и т. д.
Редактор имеет встроенный функционал для открытия и управления вашими локальными и удаленными файлами, а также встроенный терминал для быстрого доступа. В плане документации и поддержки Coda также не пасет задних – у редактора есть очень активное сообщество.
Если функционала, установленного по умолчанию, вам недостаточно, вы можете выбрать плагины для его расширения. Они разрабатываются как Panic Inc., так и сообществом.
Заключение
Выбор лучшего редактор кода всегда субъективен. Но я думаю, что лучше всего перепробовать их все по нескольку дней, чтобы понять, какой подходит именно вам.
Как только вы найдете подходящий для себя редактор, остановите на нем свой выбор и изучите его вдоль и поперек. Таким образом вы дадите ему шанс доказать, что это действительно лучший редактор, обеспечивающий вам самую высокую продуктивность в работе.
В следующем окне видим стандартный путь для установки программы. Нажимаем 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
Читайте также: