sublime text 3 как сделать подсветку кода

Sublime Text 3 — пользовательская подсветка синтаксиса

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

Итак, задача: имея какие-нибудь абстрактные логи доступа в wonder-net:

выделить:
Дату-время — фиолетовым курсивом;
Номер карты — желтым курсивом, если не в черном списке или красным, если иначе;
ip-адрес — темно-зеленым, если не в черном списке или красным, если иначе;
scod=хх — темно-зеленым если 00 или красным, если иначе.

В нашу цветовую схему нужно добавить стили, которыми мы собираемся подсвечивать текст. Насколько я понял, все цветовые схемы аккуратно собраны в файле c:\Program Files\Sublime Text 3\Packages\Color Scheme — Default.sublime-package.

Файл представляет собой zip архив без сжатия. Распаковываем, выбираем любимую схему (по умолчанию Monokai.tmTheme) и копируем ее в…(запускаем Sublime Text: меню Preferences — Browse Packages) папку User.

Открываем свежескопированный Monokai.tmTheme для редактирования. В самом низу перед закрывающимся добавляем блоки стилей. Стиль может содержать три параметра: background, foreground и fontStyle. fontStyle в свою очередь bold, italic и underline.

фиолетовый курсив будет выглядеть так:

2. В той же папке User создаем файл синтаксиса: wonderLog.tmLanguage с содержимым:

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

Выбираем пользовательскую цветовую схему: Preferences — Color Scheme — User — Monokai.

Открываем наш чудо-лог (если расширение файла не совпадает с шаблонным, делаем View — Syntax — wonderLog) и наслаждаемся результатом:

Источник

Как сделать подсветку LESS в Sublime Text 3

Привет, друзья! Проходила курсы по основам Nodejs, Gulp и сейчас LESS, в которых было много примеров с less кодом. Этот код отображался белым цветом, потому что Sublime Text не понимал, что это за код.

И почему бы сразу не поставить LESS, ведь сделать это очень просто:

1. Проверим, установлен LESS или нет, для чего в командной строке напишем C:>lessc

1.1. Если вы увидели вот такое сообщение lessc: no input files значит LESS установлен и переходим к п. 2;

1.2. Если не увидели сообщение, тогда нужно установить LESS, о чем появится у меня статья.

2. Идем в Sublime Text 3, нажимаем сочетание клавиш Ctrl + Shifh + P

2.1. Появится окно, в строке поиска начинайте набирать package, увидите список, из которого выбирайте Package Control: Install Package

3. Теперь в новом окне начинаем набирать less, где нам нужен LESS. В описании на английском так и сказано: LESS syntax highlighting for Sublime Text — Подсветка синтаксиса для Sublime Text:

3.1. После успешной установки пакета LESS, вы увидите сообщение Package Control Message, значит всё ок:

В том списке доступны и другие пакеты для инсталляции, в частности:

LESS-Build — компиляция CSS в LESS при вызове Tools > Build или сочетании клавиш Ctrl+B;
less2css — автокомпиляция LESS в CSS при сохранении.

Меня интересовала только подсветка LESS кода, а компиляцию делает gulp; в разделе Gulp есть несколько уроков по знакомству с ним. В последнем уроке в самом конце можно скачать готовый рабочий пакет gulp.

На этом всё! Для меня вопрос был очень актуальным с подсветкой синтаксиса, а решение настолько простое, что всегда задаешь себе вопрос: «Ну почему я не сделала это раньше?! Это же так просто!»

Не откладывайте свои дела, приступайте к работе! Успехов! 🙂

Источник

Sublime Text для фронтэнд-разработчика

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

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

Скоро наступает 2015 год, и за последние несколько лет в вебе изменилось очень многое — в CSS появились новые возможности, в JavaScript представили новую функциональность и синтаксис; также появилось множество языков, компилируемых в HTML, CSS и JS.

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

JavaScript Next — плагин, подсвечивающий синтаксис лучше, чем стандартный JavaScript-хайлайтер. К тому же этот плагин поддерживает фичи EcmaScript 6, такие как модули, классы, генераторы и многое другое.

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

Разработчики, использующие Sass, должны установить плагины SCSS или Sass (в зависимости от используемого синтаксиса). Обратите внимание на то, какой именно плагин вы установили. Распространённая ошибка — установить плагин Sass, но при этом использовать синтаксис SCSS, и наоборот.

Разумеется, также существуют плагины для подсветки синтаксиса Stylus и Less.

Пишете на CoffeeScript? Убедитесь, что у вас установлен плагин Better CoffeeScript. Важно использовать именно его, так как официальный плагин CoffeeScript больше не поддерживается его разработчиками. Также доступен плагин для подсветки синтаксиса TypeScript.

Плагин Haml расширяет стандартные возможности для работы с Haml и подсвечивает также код на других языках, записанный в haml-файле: JS, CSS, Sass и так далее. Плагины Slim и Jade добавляют возможность подсветки синтаксиса этих языков.

Плагины

Sublime во многом обязан своей популярностью сообществу, которое создало такое большое количество полезных плагинов. Если вы — новичок, то знайте, что управление плагинами производится через Package Control.
Можно весь день обсуждать лучшие плагины для Sublime Text (я надеюсь, что именно этим вы и займётесь в комментариях), однако в этой статье мы рассмотрим must-have плагины для фронтэндера.

Color Highlighter

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

Недавно в Color Highlighter была добавлена поддержка Sass, Less и Stylus переменных, благодаря чему этот плагин становится пригодным практически для любого рабочего окружения.

Emmet

Практически все знают об Emmet, и многие его используют ещё с тех пор, когда он назывался «Zen Coding». Однако, я часто вижу, что разработчики упускают из вида довольно полезные возможности этого плагина.

Emmet великолепен для быстрого написания разметки. Просто напечатайте css-селекторы для нужной вам разметки, и нажмите tab. Используете Jade, Slim или Haml? Emmet работает с ними так же хорошо, как и с HTML.

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

Квадратные скобки используются для указания атрибутов элемента, фигурные — для указания контента.

Изучение возможностей Emmet в CSS — это одна из лучших инвестиций для фронтэндера. Это не только повысит скорость разработки, но и поможет предотвратить часто совершаемые ошибки.

В CSS emmet работает при помощи сокращений, напоминающих пары свойство/значение. Нет чётко определённых сокращений, emmet работает на основе так называемого fuzzy matching — он делает выбор, какое свойство использовать, на основе того, что вы ввели.

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

Sublime Linter

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

С помощью Sublime Linter вы можете легко проверить практически любой код. Как фронтэндеры, мы должны проверять наш JavaScript и, по возможности, CSS. Если вы совершите ошибку в коде, Sublime Linter подсветит её небольшим красным кружком.

Темы и цветовые схемы

Всё ещё используете стандартную тему и цветовую схему? Наверное, стоит ознакомиться с другими темами и цветовыми схемами. Есть два пути поменять внешний облик саблайма. Цветовая схема меняет цвета подсветки синтаксиса, в то время как тема меняет цвет элементов интерфейса, таких как вкладки, сайдбар и тому подобное.

В последней сборке Sublime Text 3 появилась возможность разместить в сайдбаре разные иконки для файлов.

Посмотрите несколько популярных тем для Sublime Text:

Solarized Dark

Solarized — это фантастическая тема, которая доступна во многих текстовых редакторах. Она стала любимой стандартной темой многих разработчиков.

Cobalt2

Cobalt2 это моя собственная тема, которая отлаживалась и совершенствовалась на протяжении пяти последних лет. Она основана на оригинальной теме Cobalt и имеет множество улучшений. Акцент в этой теме сделан на чистоте и ярком контрасте.

Seti UI

Весьма молодая тема, имеющая тёмный дизайн с акцентом на синий цвет.

GoTo anything

Если вы переходите на саблайм с другого текстового редактора, то вы наверняка привыкли к сайдбару и навигации по файлам из вашего старого редактора. Sublime представляет концепт GoTo anything. В простейшем случае вы можете использовать его, чтобы открыть любой файл из папки вашего проекта. Просто нажмите ctrl+p, и откроется поле ввода со списком файлов. Введите навзание нужного файла и нажмите enter. Это поле поиска поддерживает fuzzy matching, так что вам не придётся беспокоиться о правильности набранного названия или о правильном пути к файлу.

Кроме того, GoTo anything поддерживает указание номера строки в файле (jquery.js:205), номера символа (jquery.js:205:15), и целого слова (jquery.js@ajax), что позволяет быстро переходить к нужным функциям, методам или селекторам.

Ваше мнение

Sublime Text полон полезных функций и плагинов. Их столько, что хватит на книгу!

Поделитесь в комментариях своими любимыми плагинами и приёмами.

Источник