GeekBrains
300*600
↑↑

↓↓
Флаг России Флаг Англии
🏠 | 💻 IT |

Sublime Text Editor

Введение
Установка
Package Controll
SideBarEnhancements
Emmet CSS Snippets
Advanced New File
ColorPicker
Колонки
Быстрое комментирование
Множественное выделение
Создание сниппетов

Введение

Sumblime Text имеет следующие особенности:

Быстрая навигация (Goto Anything)
Командная палитра (Command Palette)
API плагинов на Python
Одновременное редактирование (Split Editing)
Высокая степень настраиваемости (Customize Anything)



Sublime Text поддерживает большое количество языков программирования и имеет возможность подсветки синтаксиса для C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML.

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

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

Менеджер поддерживает установленные пакеты в актуальном состоянии, загружая новые версии из репозиториев. Кроме того, он предоставляет команды для активации и деактивации установленных пакетов.

Установка Sublime Text Editor

sublimetext.com

Видеоуроки

Установка Sublime Text Editor

Создание файлов в Sublime Text Editor

Элементы окна Sublime Text Editor

Подключение сайдбара Sublime Text Editor

Выбор цветовой схемы в Sublime Text Editor

Package Controll



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

CTRL + ~



Затем

CTRL + SHIFT + P



И вводим

Package Controll

Видеоурок

Sublime Text 3 - плагин Package Controll

SideBarEnhancements

Shift + CTRL + P

Package Control: Install Package

SideBarEnhancements

Emmet CSS Snippets

Установка

Shift + CTRL + P

Package Control: Install Package

Emmet CSS Snippets

Вводим следующую команду

h1{Текст заголовка}+p*2(lorem27)

И нажимаем TAB

Результат:

<h1>Текст заголовка</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente porro voluptatem rerum modi quibusdam accusantium nihil facere cupiditate quam! Ipsa unde repellendus officiis quo, cum obcaecati saepe!</p>
<p>Pariatur laudantium consequatur ratione quaerat reiciendis modi magnam voluptas ipsa, deleniti explicabo sequi aspernatur vitae, ut cumque nemo, tempore doloremque atque quia assumenda ipsam fugiat perspiciatis autem.</p>

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

Второй пример. Вводим следующую команду

p{Простой список}+ul.class1*>li.class1*7>a[href="#"](lorem2)

И нажимаем TAB

Результат:

<p>Простой список</p>
<ul class="class1">
<li class="class2"><a href="#">Lorem ipsum.</a></li>
<li class="class2"><a href="#">Nulla, vero.</a></li>
<li class="class2"><a href="#">Nam, quasi!</a></li>
<li class="class2"><a href="#">Aut, alias!</a></li>
<li class="class2"><a href="#">Minima, laboriosam.</a></li>
<li class="class2"><a href="#">Laudantium, saepe.</a></li>
<li class="class2"><a href="#">Dolorum, at.</a></li>
</ul>

Как видим внутри ul было создано семь li a, которые автоматически заполнились текстом по два слова в каждом.

Документация по плагину

docs.emmet.io

Видеоурок

Sublime Text 3 - Emmet CSS Snippets

AdvancedNewFile

AdvancedNewFile

Чтобы открыть командную строку введите

CTRL + ALT + N

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

Например:

heihei.ru\index.html

AdvancedNewFile

Результат:

AdvancedNewFile

Видеоурок

Sublime Text 3 - плагин AdvancedNewFile

ColorPicker

Я не смог найти

Видеоурок

Sublime Text 3 - плагин ColorPicker

Колонки

Чтобы разделить окно на несколько колонок переходим в ViewLayouts

Или нажимаем

ALT + SHIFT + 2

ALT + SHIFT + 3

И так далее, в зависимости от того, сколько Вы хотите колонок.

Columns

Комментирование

Чтобы закомментировать строку зажмите

CTRL + /

Обратите внимание на строки 8 и 10

Comments

Если нужно закомментировать какой-то определённый тэг, особенно это касается вложенных тэгов

CTRL + SHIFT + /

Обратите внимание на строки с 13 по 21 - это закомментированный тэг ul

Comments

Множественное выделение

Чтобы курсор стал активным сразу на нескольких строках зажмите CTRL ALT и стрелку вверх или вниз

CTRL + ALT +

Чтобы выделить содержимое какого-то тэга нажмите

CTRL + SHIFT + A
Остановка автобуса Lux Express люкс экспресс в аэропорту Хельсинки
Вантаа изображение с сайта www.heihei.ru
Горячие клавиши Sublime Text Editor

Создание сниппетов

Tools → New Snippet

Вставить нужный код между тэгами content

Раскомментировать tabTrigger и вставить туда название сниппета, которое Вы придумываете сами и будете потом использовать. Нужно сохранить сниппет.

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

Видеоурок

Sublime Text 3 - плагин ColorPicker

Вы нашли то, что искали на сайте?

Или оцените по десятибальной шкале

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

Например: у нас есть статья про аэропорт Хельсинки и про аэропорт Риги но в выдаче по Риге всё равно статья про Хельсинки.

Если статья Вам помогла, нажимайте ДА. Так мы поймём, что переделывать её не нужно.

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

Сделаем поиск лучше!

Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@urn.su если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети:
Growfood
Finn Flare