О редакторе

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

Интерфейс

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

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

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

Полноэкранный режим

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

Миникарта

Этого не встречал еще ни где. В узкой колонке миникарты умещается примерно 5-6 экранов, что позволяет быстро перемещаться по коду. Это не замена и не аналог закладок, а просто еще один удобный способ навигации.

Мультипанели

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

Подсветка парных скобок

Поставьте курсор внутри какой-либо сложной функции и ST подсветит ближайшие парные скобки.

Автосохранение

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

Редактор

И все-таки, самое главное в редакторе, это его возможности работы с текстом. И у Sublime Text с этим все в порядке. Смотрите сами.

Снипеты

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

Кодкомплит

Автозавершения чего угодно. Если напечатать часть имени известной функции, ST дополнит её. Если подходящих совпадений не найдется, строка будет дополнена первым подходящим значением.

Макросы

Макросы позволяют записать и воспроизвести простейшие действия: набор текст, копирование, вставка и так далее.

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

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

Проверка орфографии

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

Мультивыделение

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

Закладки

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

Настройка

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

Хоткеи

Файлы настроек позволяют изменить любое сочетание клавиш на удобное для вас.

Плагины

Функционал Sublime Text может быть легко расширен плагинами, написанными на Python. Для их создания разработан довольно обширный API.

Обзор программы Sublime Text: интерфейс и основные возможности

Такая многофункциональная программа, как Sublime Text, подойдет для работы как профессиональным программистам, так и начинающим пользователям. Эффективный текстовый редактор включает в себя разные функции.

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

Обзор утилиты

Текстовый редактор Sublime Text был разработан в 2007 году Джоном Скиннером. Полноценно первая версия редактора начала функционировать в 2008 году. Утилита была разработана и предназначена для работы на разных платформах (Windows, Linux, MacOS).

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

Что умеет программа

Утилита Sublime Text имеет множество функций и опций. К основным возможностям текстового редактора можно отнести следующие:

1. выделение, с помощью которого можно выделять сразу несколько текстовых блоков, копировать их и даже редактировать;
2. макросы позволяют воспроизвести или записать такие действия, как копирование, набор текста и прочее;
3. если в тексте были допущены орфографические ошибки, программа автоматически выявит слова с ошибками и подсветит их, чтобы пользователь смог исправить ошибки;
4. можно настроить поиск и замену слов и выражений по всему файлу;
5. есть такая полезная вещь, как закладки, которая значительно упрощает навигацию, особенно, если дело касается объемных текстов и документов.

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

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

Интерфейс

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

Интерфейс программы имеет свои возможности:

1. подсветка синтаксиса (программа поддерживает около двадцати цветовых схем и большое количество языков);
2. полноэкранный режим позволяет настроить интерфейс таким образом, чтобы программа занимала весь экран (такое преимущество дает возможность не отвлекаться на другие программы);
3. доступна подсветка парных скобок;
4. автосохранение (благодаря этой функции можно не нажимать постоянно кнопку «сохранить»);
5. мультипанель позволяет работать сразу с несколькими файлами одновременно.

Установка

Установить программу можно на любую операционную систему будь то Windows или MacOS. Приложение не занимает много места и весит чуть более семи мегабайт. Скачать текстовый редактор можно на официальном сайте.

Инструкция по установке:

1. Для установки нужно скачать программу на компьютер или ноутбук. После скачивания нужно зайти в папку «загрузки» и найти необходимый файл. После чего нужно запустить установочный файл.
2. Затем нужно выбрать место для установки и кликнуть кнопку «next».
3. После чего нужно проверить папку назначения и нажать на кнопку установки «install».
4. Далее начнется установка приложения. Необходимо дождаться завершения установки, которая не займет много времени.
5. После завершения процесса надлежит кликнуть на кнопку «finish».

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

Установка на Linux и OSX мало чем отличается от установки на платформу Windows. Для операционной системы OSX нужно скачать файл «dmg Sublime Text Editor». Затем файл перенести в папку «приложения». Затем нужно установить файл и можно запускать приложение.

Правила пользования

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

Так, в разделе «файл» можно сохранить текущий текст в любом формате. Можно открыть новый документ для редактирования. Кстати, в программе существуют разные типы редактирования кода и сочетания клавиш. Есть три типа: разбиение выделения на строки, нахождение всех вхождений, завершение полного абзаца в HTML-файл.

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

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

Плюсы и минусы софта

Как и любая программа, Sublime Text имеет свои преимущества и недостатки. Нужно отметить, что с каждой версией, программа все более совершенствуется и улучшается.

Плюсы:

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

Возможные минусы:

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

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

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

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». Однако, я часто вижу, что разработчики упускают из вида довольно полезные возможности этого плагина.

HTML

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

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

• element + tab создаёт элемент и позиционирует курсор внутри него.
  • span + tab →
  • span.hello + tab →
  • p.odd.warning + tab →
  • div#contact + tab →
  • ul>li + tab →
  • p.hello*2 + tab →

  Также вы можете использовать символ $ в качестве счётчика. Используйте $$ для счётчика, начинающего отсчёт с нуля.

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

  CSS

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

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

  • posrel → position: relative;
  • posab → position: absolute;
  • fl → float:
  • fr → float: right;
  • db → display: block;
  • dib → display: inline-block;
  • tdn → text-decoration: none;
  • c → color: #
  • w → width:
  • w100 → width: 100px;
  • w100p → width: 100%;
  • p → padding:
  • p10 → padding: 10px;
  • p10p → padding: 10%;
  • bt1-s-red → border-top: 1px solid red;

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

  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 полон полезных функций и плагинов. Их столько, что хватит на книгу!

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

  • sublime text
  • текстовые редакторы
  • инструменты
  • фронтэнд
  • frontend

  При подготовке материала использовались источники:
  https://sublimetext.ru/about
  https://rusprogi.com/sublime-text
  https://habr.com/ru/articles/244681/