Установка плагинов sublime text 3 linux

Плагины

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

Установка плагинов в Sublime Text

На данный момент существует два метода установки плагинов в программу:

1. Варварский. Достаточно просто скачать из интернета необходимый плагин и закинуть его в соответствующую папку. Но это не корректные метод из-за этого мы на нем останавливаться не будем.
2. Через Sublime Package Control

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

Для установки плагинов нужно:

1. открыть командную строку, нажав комбинацию клавиш: ctrl+shift+p ;
2. в строчке вводим Install Package и жмем ентер;
3. снизу в открывшемся поле вводим название плагина, например: emmet;
4. нажимаем enter и ждем конца установки, там появится экран с кучей строчек;
5. Готово.

(см инструкцию на 3 скринах)

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

Но так как основная масса людей, выбирающая этот редактор пишет на php мы все же рассмотрим несколько.

Sublime Text Emmet

Чуть ранее в примере мы установили этот плагин. Он очень сильно ускоряет разработку сайтов. Для того, что бы понять, что он делает в правом нижнем углу вместо Plain Text выберим PHP. Теперь в редакторе ставим ! и нажимаем TAB.

Еще можно ввести: .wrapper нажимаем tab, как видем у нас появился div.

Для того, что бы сделать меню на 10 ссылок можно написать следующее, после чего нажать tab: .menu>ul>li*10>a[href=#]

В левой части «!+tab» , в центральной части «.wrapper + tab», а в правой части «menu>ul>li*10>a[href=#] + tab» Думаю, что суть уловили.

Advanced New File

Позволяет создавать новые файлы. Устанавливаем плагин, открываем правый сайд бар (view – side bar –show side bar), далее нажимаем комбинацию клавиш ctrl+alt+n и пишем index.php, как видим файл создался, и это очень быстро и удобно.

Brackethighlighter

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

Заметно, что подчеркнут яркой белой линией.

Color Highlighter

Подсказывает цвет кода, то есть по умолчанию нам не ясно, какого цвета будет код #224f43, а плагин подчеркивает код тем цветом, которым он является. Более того если мы кликнем по коду, то он выделит его этим цветом.

Gotocss Declaration

Помогает найти и перейти на нужный элемент css прямо из html кода. Нужно просто правой кнопкой мыши кликнуть по элементу, к которому применяется этот стиль и выбрать Go To CSS Declaration

У нас Вы можете скачать последнюю версию текстового редактора под все ОС.

Источник

SublimeText. Руководство по настройке

20 сентября 2019 / Разработка

Итак, сначала вопрос, который волнует всех в первую очередь – да, программа платная. Стоит она на конец 2018 года 80 долларов (годом раньше было 40), в сети можно найти версии, вылеченные от жадности. Однако можно без проблем работать и с незарегистрированной версией. Единственное отличие – в топе программы будет написано слово UNREGISTERED и периодически (где-то раз в 2 часа) при попытке сохранения выскакивает окошечко с предложением купить платную версию. Других ограничений не замечено.

Обзор SublimeText

Автором называют некоего Джона Скиннера. Разработка началась в ноябре 2007 года, причём было объявлено о том, что поставлена цель «создать лучший текстовый редактор всех времён и народов ». Первая версия вышла 18 января 2008 года, вторая в 2011, третья в 2013 году. К 2018 году Скиннер со товарищи быстро сориентировались в тенденциях рынка и сосредоточились на Python, накидав много приятных возможностей для программистов «на змее».

Изначально в качестве целевой аудитории подразумевались разработчики, а потому в программе была предусмотрена проверка синтаксиса для множества популярных языков программирования. Это 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. Можно подключать плагины и для других языков.

Программа выполнена с суровым интерфейсом без кнопок и декоративных элементов, что позволяет на 100% использовать экранное пространство для дела. Экран можно разбить на несколько рабочих областей. Например, слева открывать файл html, а справа css и параллельно с ними работать. Отдельный плюс – можно открывать не отдельные файлы, а целые каталоги и работать в них. Далее мы подробно рассмотрим, что к чему, на примере нашего проекта.

Подсвечивается всё очень красиво, по дефолту установлена приятная для глаза тёмная тема с контрастным выделением. Её ещё очень любят показывать в фильмах и ТВ-передачах, когда нужно снять «что-то о программистах».

Для установки, удаления и настройки плагинов применяется менеджер пакетов. Настраивается редактор довольно специфично – для этого нужно открывать и редактировать файл настроек. Для этого нажимаете в меню «Preferenses —>Settings», после чего можно будет увидеть расположение файла настроек.

Особая гордость разработчиков – интеллектуальный поиск (Incremental Find), который будет находить не только точное вхождение, но и близкие по написанию значения. Понятно, можно использовать обычный поиск, в том числе и с регулярными выражениями.

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

Вы просто ставите курсор в нужное место, затем зажимаете шифт и правую кнопку мыши и ведёте мышь вверх или вниз. Курсоры появляются в нескольких местах, и вы можете вводить символы или удалять текст сразу в колонке. Другой вариант – можно создать дополнительные курсоры в любом месте «Ctrl + клик мыши».

Недостатки – это, как обычно, обычно оборотные стороны достоинств. Профессионалы скажут, что Sublime не дотягивает до полноценной IDE и будут правы. Новичкам покажется жутковатым способ настройки через JSON. Любителям офисных программ будет скучновато без красивых кнопок в интерфейсе. Кого-то будут раздражать периодические призывы купить программу, а кому-то не понравится необходимость работы со сторонними плагинами. Тем не менее, как показывает опыт, для разработки сайтов средней и малой сложности SublimeText вполне годится.

Установка и настройка

С установкой никаких проблем нет, достаточно скачать дистрибутив с официального сайта. Представлены версии для Linux, MacOS 32-и 64-разрядной Windows, в том числе portable версии. Файл загрузки невелик, около 8Мб, в дальнейшем, после установки плагинов, программа разрастается до 20-30 Мб. Память потребляет тоже очень скромно, то есть, в целом всё достаточно бережливо с точки зрения ресурсов.

В процессе работы экран может выглядеть примерно так.

Здесь слева мы видим колонку с каталогом проекта, фалы можно открывать просто кликнув на них мышью. Чтобы начать работать с папкой, выбираете в меню «File —> OpenFolder…»

Рабочую область я разбил на две части. Это делается чрез меню следующим образом «View -> Layout -> Column2». Там же вы можете увидеть и другие режимы – например, разбить экран на верхнюю и нижнюю области, либо на 4 части. Вкладки можно перетаскивать с места на место просто зажав мышью.

Установка плагинов

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

Установка Менеджера Пакетов

Прежде всего, необходимо установить Менеджер Пакетов (Package Control). Сделать это можно вручную или через консоль.

1 Через консоль

Консоль открывается сочетанием клавиш «Ctrl + `» (это крайняя левая клавиша, сразу под Esc). Код, который нужно ввести, скопируйте с официального сайта. Сам код не привожу, поскольку он может отличаться от версии к версии. Копируйте актуальный. Затем нажимаете Enter и откидываетесь на спинку кресла.

2 Вручную

Для этого нужно вначале скачать файл с той же самой страницы, только с правой части. Затем в меню Sublime выбираем «Preferences -> Browse Packages». Теперь нужно перейти на одну папку выше, и открыть папку «Installed Packages». После чего перезапустить редактор.

В результате в меню «Preferences» должны появится пункты «Package Settings» «Package Control». Вот таким образом:

При запуске «Package Control» появляется вот такое окошко, в котором вы можете вводить название нужного плагина. Самые часто используемые разделы: «Install Package» — установить пакет, «Remove Package» – соответственно, удалить. Менеджер пакетов сам находит нужные плагины, распаковывает их из депозитория и запускает. Всё очень удобно.

Перечислим основные полезные пакеты.

Emmet

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

Формирование базовой структуры html. В новом файле с расширением html просто ставите ! и нажимаете . В результате появляется заготовка в формате html5.

Быстрый ввод блоков. Пишете div.class-name, жмёте и получаете структуру вида

Понятно, что вместо div можно вписать один из тегов html5, а вместо class-name – название вашего класса.

Ввод вложенных блоков. Пишете section.class-name>article.class-name2>p, жмёте — получаете:

Построение списков. Пишете ul>li*4>a, жмёте — получаете:

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

ColorPicker

Плагин открывается в отдельном окне и даёт возможность оперативно выбрать цвет из круговой палитры в hex-формате. Открывается в любом месте экрана.

DocBlockr

Плагин «знает» формат комментариев для большинства языков программирования и позволяет быстро вставлять ваши описания в код.

Color Highlighter

Полезный плагин, который сразу показывает цвет, написанный в файле css в шестнадцатеричном коде.

SublimeREPL

Устанавливается по желанию, содержит встроенные компиляторы для нескольких языков программирования, в том числе PHP и Python. После установки в меню появляется вкладка «Toolse -> SublimeREPL», нажав которую вы увидите выпадающую панель с перечнем языков. Ещё один шаг на пути к полноценной IDE. Достаточно удобно, если вы хотите сразу же проверить работу кода не выходя из редактора.

Установка SASS (SCSS) на SublimeText

Существует три способа подключить препроцессор SASS на Sublime.

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

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

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

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

Написан этот инструмент на языке Ruby, так что вам придётся установить компилятор языка. Пользователям Windows сделать это проще всего по следующей ссылке. Просто выбираете последнюю версию, с учётом вашей системы 32 или 64 битной и устанавливаете. Все остальные могут воспользоваться вот этим сайтом.

В процессе установки не забудьте установить флажок на пункте «Add Ruby executables to your PATH»

Затем запускаете консоль, нажав Win + R и набрав «cmd». Либо, кому больше нравится, запустив Windows PowerShell. В командной строке наберите инструкцию для Ruby: «gem install sass» (без кавычек).

Компилятор установлен глобально и теперь нужно настроить необходимые плагины для работы с ним.

2 Установка плагинов для использования SASS

Для этого потребуются следующие плагины:

SASS Build – запускает компилятор и формирует файл css. Для настройки перезагрузите Sublime, откройте меню «Tools —> Build System» и выберите пункт SASS. Построение запускается по нажатию клавиш Ctrl + B.

SublimeOnSaveBuild – устанавливаете опционально. Запускает компиляцию каждый раз при сохранении файлов проекта.

3 Встроенный компилятор SASS для Sublime

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

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

Заключение

Итак, мы установили «лучший текстовый редактор всех времён и народов» SublimeText, настроили его внешний вид, добавили необходимые для работы плагины и подготовили всё необходимое для работы с препроцессором.

Источник

Sublime Text — плагины, их установка и настройка

Плагины для Sublime Text это вообще отдельная тема. Их нереально много. Около 800 разработчиков регулярно пополняют репозиторий все новыми и новыми разработками!

В стоковом редакторе нет ни плагинов, ни возможности их установить. Для этого нужно подключить Package Control. Это своеобразный менеджер, который добавляет в меню дополнительный пункт, в котором хранятся все плагины!

Установка Package Control производится в виде отправки запроса на сервер через консоль. Консоль вызывается нажатием Ctl+

(Ё) и туда необходимо вставить следующий код и нажать Enter:

Код для Sublime Text 2

Код для Sublime Text 3

После установки Package Control в меню Preferences должен появиться дополнительный пункт как на скриншоте выше. Отсюда ведется управление плагинами и всем, что с ними связано. Установка плагинов осуществляется через репозиториум — единую базу всех плагинов!

На скриншоте показано, что для вызова консоли управления плагинами необходимо зайти в: Preferences->Package Control->Install Packages а далее на примере скриншотов ниже я расскажу, что необходимо сделать.

Зайдя в раздел Install Packages я, например, хочу себе что-нибудь для CSS. Для этого ввожу в поиск слово CSS и для меня формируется список доступных плагинов по данному ключевому слову:

Я подобрал для себя плагин CSS3_Syntax и хочу его установить. Для этого я просто нажимаю на него и отправляю свой взор в правый нижний угол. Там будет показан процесс установки:

Первый скриншот это процесс установки, где символ равенства мечется между двумя квадратными скобками: [ = ]. Это значит, что редактор проводит какие-то операции. В данном случае скачивает и подключает плагин.

Второй скриншот — сообщение об успешной установке.

Источник