Sublime text что это за программа

Sublime Text

Sublime Text для Windows

Sublime Text (Саблайм текст) — удобный редактор кода с минималистичным дизайном, широким функционалом и поддержкой плагинов.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаИнтерфейс Sublime Text (версия 3.2.2)

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

Скачайте бесплатно последнюю версию Sublime Text на нашем сайте по прямой ссылке. Редактор кода имеет встроенную поддержку русского языка и работает с Windows 10, 8, 7, Vista, XP. Мы описали некоторые базовые функции программы ниже, а также составили инструкцию по установке.

Возможности программы

Интерфейс

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаПодсветка синтаксиса

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаВкладочный интерфейс

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

Еще одна особенность — подсветка парных скобок. Здесь нужно только установить курсор внутри сложной функции, и автоматически будут подсвечены парные скобки.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаНастройки редактора

Редактирование кода

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаПалитра команд

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

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаАвтозавершение кода

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаПоиск и замена

Инструменты

Плагины

Благодаря поддержке плагинов можно существенно расширить функционал приложения и упростить работу с ним. Например, используя дополнительные плагины, легко создавать готовые каркасы для HTML, искать проблемы в коде, добавлять подсветку синтаксиса для других языков программирования.

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

Плюсы и минусы

Преимущества

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

Недостатки

Несмотря на все свои достоинства, программа не может стать заменой полноценной IDE.

Скачать бесплатно

Скачайте Sublime Text бесплатно с помощью MultiSetup или по прямой ссылке.

Горячие клавиши

Установка на компьютер

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаПуть установки

1. Выберите путь (каталог) установки редактора и нажмите «Next >».

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаНастройки установки

2. Опциональные настройки установки, выберите добавлять ли ярлык в контекстное меню Windows и на рабочий стол.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаНачало установки

3. Все готово к инсталляции программы. Нажмите «Install».

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаКопирование файлов

4. Процесс копирования файлов программы и прочие инсталляционные действия. Просто немного подождите…

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программаЗавершение установки

5. Установка Sublime Text завершена! Нажмите «Finish».

Как пользоваться

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

Источник

О редакторе

На сцене текстовых редакторов для разработчиков появился новый актер — 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 – это ПО для редактирования текстов с поддержкой плагинов на Python, распространённых программных языков C, Java, SQL, PHP и ещё 2 десятков. Дополнительно пользователь может подгружать плагины с поддержкой редких языков программирования. Автоматизация настраивается через макросы и дублирование последних шагов. Результаты работы защищены автосохранением. Скачать бесплатно Саблайн текст для Windows можно на этой странице.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

ЛицензияБесплатная
ОСWindows 10/8.1/8/7, XP, Vista
Язык интерфейсаАнглийский
РазработкаSublime HQPty LTD
Разновидность программыРедактирование

Возможности и особенности

Режимы включают показ до 4 файлов. Код отображается в виде мини-карты с опцией навигации. Саблайм оснащается менеджером пакетов для управления/обновления без перезагрузки:

Несколько проектов можно объединить в единый.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Как пользоваться Sublime Text

Перед тем как бесплатно скачать Sublime Text на русском, ознакомьтесь с краткой инструкцией команд и дополнений.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Редактирование и отступы выполняются через командную строку с набранной Cmd +комбинация:

Повтор, отмена, замена, поиск (Cmd + …):

Мультикурсор/выделения (Cmd+…):

Навигация (Cmd+…):

Дополнительные опции:

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Для доп. опций нужно добавить в конфигурацию:

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

Источник

Sublime Text — среда программирования которую я выбрал

Автор: Владимир Васильев · Опубликовано 21 июля 2015 · Обновлено 29 августа 2018

Всем привет! Вы читали мою прошлую статью? Я в ней писал о том, что жду с нетерпением книжки про программированию, так вот, я все-таки дождался. На днях забежал в свое почтовое отделение и забрал свою бандерольку. Я просто полон впечатлений, книжка превзошла все мои ожидания — все теперь будем ее штудировать.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

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

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

На мой взгляд наиболее популярной средой программирования сейчас является Microsoft Visual Studio. Интернет об этом просто трубит, такое у меня создалось впечатление.

Однако с установкой этого славного программного пакета у меня как-то не заладилось. Студия устанавливалась около часа. И чего это люди Била Гейтца туда насовали?

В общем мне это сразу не понравилось и я для своих творческих программных деяний выбрал что попроще. Да, и это «попроще» называется редактор текста Sublime Text 3.

Sublime Text 3

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

Начнем с того что этот редактор содержит в себе консоль, которую можно вывести нажав комбинацию клавиш CTRL+

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

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

Установка и настройка Sublime Text 3

Для начала попробуем скачать эту программу а затем пойдем дальше. Скачать ее можно с сайта www.sublimetext.com, поэтому кликаем по ссылке. И нам открывается страничка.Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Здесь нам нужно выбрать операционную систему которая у вас установлена но компьютере. Если у вас стоит 32 битная система виндовс то выбирайте третью строчку.

Кликнув на Windows вы скачаете файл, который требует установки в вашей операционной системе. Если вы выберете о строчку portable version у вас появляется возможность установки портативной версии. Эта версия не требует установки и в дальнейшем вы сможете работать даже с флешки.

Я для себя выбрал вариант установки для 64 битной системы Windows.

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

Вот только среди всего многообразия языков нет стандарта для языка Си — стандарт C99.

Устанавливаем расширение Package Control

Чтобы это исправить мы проделаем следующее. Идем по адресу и видим.Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Здесь выбираем вкладку sublime text 3 и копируем весь код в буфер обмена. Далее переходим в окно программы Саблайм и нажимаем CTRL+

(Контрол плюс Тильда). Тильда расположена над клавишей Tab.

При нажатии этой комбинации у нас откроется командная строка (консоль).

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Теперь нам остается в эту консоль вставить скопированный нами код. Что мы и делаем. В результате в меню preferens появилась строчка packaje control. Нажимаем на этот пункт меню и у на с появляется вот такое окошко, теперь нам нужно выбрать пункт install packaje.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Все, что мы проделали позволит нам писать код в комфортных условиях среды Саблайма.

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

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

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

Источник

Sublime Text 3 для верстки сайтов. Настройка внешнего вида и установка плагинов. Руководство для начинающих

Сегодня расскажу о редакторе кода, которым пользуюсь для верстки сайтов уже много лет. Быстрый, удобный и полностью настраиваемый Sublime Text 3.

Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!

Внешний вид программы

Первым делом, после установки Sublime Text 3, я настраиваю внешний вид программы.

Боковая панель

Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Цветовая схема

Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.

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

Перехожу в меню Tools – Command Palette, либо нажимаю Ctrl+Shift+P. Открывается вот такое окно с поиском, в поле поиска ввожу install пока не увижу пункт Install Package Control, и нажимаю на него. Спустя несколько секунд получаю сообщение о том, что Package Control успешно установлен. Теперь я могу приступить к установке нужной цветовой схемы.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.

В поле поиска ввожу название того дополнения, которое хочу установить, в данный момент — это цветовая схема под названием Base16 Color Schemes, точнее это целый пакет с множеством цветовых схем. Нажимаю на найденный пункт и ожидаю установки. Индикатор процесса установки можно увидеть на нижней панели программы. Получив там же короткое сообщение о том, что все установлено перехожу к смене схемы. Для этого открываю уже знакомый пункт меню Preferences – Color Scheme и вижу в открывшемся окне уже большое множество разных вариантов. Меня интересует схема Ocean, ввожу название в поиске, их тут есть две: одна более контрастней другой.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

Дополнительные настройки

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

Поясню каждую настройку.

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер 🙂

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Например мы работали работали, а потом неожиданно закрыли программу 🙂 Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.

Разделение рабочего окна

Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.

Поскольку практически всегда приходится работать с несколькими разными файлами, например index.html style.css и какой-то js файл, то дополнительным удобством будет разделение окна с кодом на секторы. Варинтов несколько. Переходим в View – Layout и смотрим что тут у нас есть.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Соответственно Single – это вид без разделений как сейчас, Columns: 2, 3, 4 это разбивка по вертикали. Например нажав на Columns: 2 наш экран с кодом разделится пополам, и мы можем часть файлов переместить в пустую колонку, например CSS слева HTML и JS справа, что делает работу более наглядной и быстрой.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

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

Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.

Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.

Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.

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

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.

Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

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

Плагины

AutoFileName

Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

BracketHighliter

BracketHighliter можно перевести как подсветка кавычек. Установим его. Нажимаем Ctrl+Shift+P, Install Package Control ищем BracketHighliter. Устанавливаем. Тут даже открывается отдельный файл с сообщением об успешной установке. Теперь в нашем коде будет подсвечиваться начальный и конечный элемент, например открывающий и закрывающий тег, начальная и конечная ковычка, открывающая и закрывающая скобка. Это очень помогает с ориентацией в коде.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

ColorHighliter

Обрати внимание на этот код — это код цвета, но какого именно непонятно.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Давай установим плагин. Ctrl+Shift+P, Install Package Control ищем ColorHighliter. Опять открывается отдельный файл с сообщением об успешной установке. И сообщения о некой ошибке, игнорируем их. Смотрим на наш код с цветом, и теперь видим что за цвет скрывается за буквенноцифровым кодом. Сам плагин можно дополнительно настроить в меню Tools — ColorHighliter но сейчас не будем останавливаться на этом. Все и так стало намного лучше.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

Великий и могучий Emmet

Устанавливаем по наработанной схеме. Ctrl+Shift+P, Install Package Control ищем Emmet. Открывается отдельный файл с сообщением с просьбой перезагрузить программу для окончания установки. Закрываем и открываем Sublime. Получаем сообщение, что все установлено.

Итак, что же умеет Emmet?

Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать «block» и нажать клавишу Tab. Мы получим:

Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:

Жмем клавишу Tab и получаем:

Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следующее:

Теперь для того чтобы вызвать запись:

нам достаточно написать bl и нажать клавишу Tab

Из этого следует, что возможности Emmet безграничны, и мы можем настроить свои сниппеты как угодно и работать очень быстро. Подробную информацию о возможностях плагина можно найти на сайте https://emmet.io

GotoCSSDeclaration

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

Где [«ctrl+1«] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

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

Зовут его Tag и установить нам придется его вручную. По этой ссылке можно скачать архив с плагином. Далее распаковываем в особую папку программы. Для Windows 10 это C:\Users\[Подставь свое имя пользователя]\AppData\Roaming\Sublime Text 3\Packages. Далее закрываем Sublime и открываем снова и добавляем горячие клавиши открыв Preferences – Key Bindings и дописав следующее:

Где ctrl+` это и есть наше сочетание клавиш.

Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`

Sublime text что это за программа. Смотреть фото Sublime text что это за программа. Смотреть картинку Sublime text что это за программа. Картинка про Sublime text что это за программа. Фото Sublime text что это за программа

и потом вставить результат копирования в наш CSS ctrl+v.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *