Как сделать из sublime text ide
Обновлено: 03.07.2024
Sublime Text 3 — продвинутый мультиплатформенный редактор кода. Он имеет огромное количество плагинов, соответственно функционал редактора можно значительно расширить, чем мы и займемся. Прокачаем ваш Sublime Text 3 для web-разработки по полной. Рассмотрим топ 65 лучших плагинов 2020 — PHP, Python, JS, CSS… и их правильные настройки.
Редактор Sublime Text 3 — распространяется по коммерческой лицензии без особых ограничений. Версия без лицензии будет лишь иногда ненавязчиво напоминать о том, что лицензия должна быть приобретена для дальнейшего использования.
Для начала нам нужен установленный PHP в системе и прописанный в Path, для Windows я например использую OSPanel , можно установить Xampp или WampServer.
Качаем версию Sublime Text 3 для нашей ОС, устанавливаем, запускаем.
Устанавливаем Node.js
Для работы некоторых плагинов нам понадобиться Node.js и Python, качаем и устанавливаем node.js. При установке, оставляем все по умолчанию.
Устанавливаем Python
Далее скачиваем и устанавливаем Pyton, последний релиз, ссылка типа Windows x86(или x64) web-based installer.
Устанавливаем Ruby и RubyGems
Для работы необходимо установить Ruby и RubyGems . После установки Ruby, распакуйте RubyGems и кликаем правой кнопкой мышки с зажатым SHIFT на ней, выбираем PowerShell или консоль, вводим:
Должна начаться установка RubyGems.
Устанавливаем Package Control
Package Control — с его помощью вы можете устанавливать, обновлять , удалять и просматривать список плагинов, которые вы установили в SublimeText. На самом деле плагины Sublime Text 3 можно просто копировать (или клонировать при помощи Git) в папку (…\AppData\Roaming\Sublime Text 3\Packages), и они будут работать. Но устанавливать через Package Control куда проще.
Открываем наш редактор, жмем ctr+` или View > Show Console, должна появиться консоль, вводим:
Теперь, чтобы установить или удалить плагин для Sublime Text, жмем ctr+shift+p, вводим install Package
или настройки-> Package Control -> вводим install Package (remove Package для удаления), выбираем, пишем название плагина, выбираем его из списка, жмем Enter.
Я специально проставил ссылки на все плагины Sublime Text 3, чтобы лучше понять, как они работают, не поленитесь пройти по ним и прочесть оригинальные инструкции.
Идем в пользовательские настройки кнопок: Preferences — Key Binding, идем во вкладку User (вторая вкладка), тыкаем в нее курсор, вставляем туда:
Эта запись добавляет горячие клавиши alt+shift+f для команды reindent — форматирования выделенного кода (выравнивания отступов).
Далее создадим файл пользовательских настроек: Preferences — Setting — User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences.sublime-settings, если нет, создаем его.
Топ плагины Sublime Text.
Я не зря поставил ссылки на все плагины, очень рекомендую ознакомиться с описанием и инструкциями от разработчиков, если плохо с английским, пользуемся Google Chrome с переводчиком.
All Autocomplete — автозаполнение с открытых вкладок.
Каждый раз когда вы начинаете печатать, редактор анализирует набранный текст и предлагает наиболее релевантные варианты (из открытых документов) продолжения слова или функции в виде выпадающего списка. По-умолчанию функция доступна для языков программирования и для HTML, если набранное слово начинается со скобки «
E501 — означает пропуск проверки длины строк (мне не нужно), ну и авто формат включил, пригодиться.
AutoFileName — еще одно автозаполнение для подключения внешних файлов в код: имени файла, картинок в папке с проектом. Не конфликтует c All Autocomplete, скорее дополняет его. Активируется так же: ctrl+space.
Auto-save — Sublime Text плагин , который автоматически сохраняет текущий файл после каждой модификации.
В настройки горячих клавиш пользователя (Preferences / Key Bindings — User) добавляем строку:
Настройки для двух последних версий браузеров:
ApacheConf — подсветка синтаксиса .conf, .htaccess, .htgroups, .htpasswd.
Bootstrap 3 Snippets — автозаполнение кода Bootstrap 3 в виде выпадающего списка и по Tab.
В настройки пользователя (Preferences — Setting — User) добавляем строку:
Пример работы: пишем в html-файле — bs3-template: html5, жмем tab, должен появиться код стандартного шаблона html5+Bootstrap 3
Аналоги этого плагина уже имеются для Bootstrap 4, (Bootstrap 4 Snippets и Bootstrap 4 Autocomplete) хотя пока чаще используется Bootstrap 3.
BracketHighlighter — подсвечивает открытие/закрытие тегов и скобок в коде.
ColorHelper — упрощает работу с цветами: подсветка цветовых кодов, позволяет получать доступ к избранным цветам и цветовой палитре документа. Перевод цвета в различные форматы. Легко изменить цвет без знания кода.
Console Wrap — добавление вывода переменной в консоль по горячим клавишам ctrl+shift+q.
CSS Format — форматирование и минификация CSS из контекстного меню.
CSS3 — наиболее полная поддержка CSS для Sublime Text.
Djaneiro — автозаполнение и синтаксис Python Django для Sublime Text.
DocBlockr — это пакет для Sublime Text 3, который делает написание документации на одном дыхании. DocBlockr поддерживает JavaScript (включая ES6), PHP, ActionScript, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ и Rust.
Dockerfile Syntax Highlighting — подсветка синтаксиса Dockerfile для Sublime Text.
EditorConfig — помогает разработчикам поддерживать согласованные стили форматирования кода между различными редакторами.
Emmet — наш знакомый плагин по статье про Notepad++, позволит нам писать HTML и CSS код быстрее, используя аббревиатуры / ярлыки, затем расширит их до допустимых HTML тегов. Это один из моих самых часто используемых плагинов, который экономит время. Emmet занимает топ 1 по популярности среди плагинов репозитория SublimeText. Как и в прошлый раз настоятельно советую изучить документацию.
GhostText — один из самых крутых плагинов, позволяет связать редактор Sublime Text (со всеми вашими плагинами) с полями для ввода текста в браузере. Например, вы можете работать с CodePen, но все редактировать в Sublime Text. Просто нужно установить плагин и расширение для браузера. Просто выделите текстовую область, которую вы хотите связать, и щелкните расширение браузера: тогда произойдет волшебство.
GitGutter — плагин для отображения информации о файлах в репозитории. Всплывающее окно diff показывает исходный контент из коммита или различия между ним и рабочей областью.
Gitignore — плагин для загрузки шаблонов gitignore из коллекции шаблонов gitignore от Github
Google Search — поиск выделенного текста в Google.
Goto-CSS-Declaration — позволяет находить и переходить к id и классам в открытых CSS, LESS, SASS из редактируемых html, js и PHP-файлов.
jQuery и jQuery Snippets pack— наборы снипетов для jQuery. Эти плагины Sublime Text помогут с функциями jQuery. Они имеют почти все методы jquery в виде фрагментов для автозаполнения в коде и не конфликтуют друг с другом.
HTML5 — аналогичный набор для набор снипетов для автозаполнения HTML5 в коде.
HTML Nest Comments — позволяет правильно комментировать код, который уже содержит комментарии по ctrl+shift+/ .
Icon Fonts — автозаполнение для популярных шрифтов иконок, таких как Font Awesome, Glyphicons и других. ( Ctrl + Space).
Inc-Dec-Value — плагин позволяет уменьшать и увеличивать различные значения по горячим клавишам: числа, преобразовывать друг в друга цветовые форматы hex, rgb, rgba, hsl, hsla. С помощью этого плагина в коде мы можем одним движением заменять true на false, fadeIn на fadeOut, next на prev, дни недели и так далее. Стандартные горячие клавиши больше не работают в Windows, потому добавим в настройки клавиш:
Обзор SublimeText
Программа выполнена с суровым интерфейсом без кнопок и декоративных элементов, что позволяет на 100% использовать экранное пространство для дела. Экран можно разбить на несколько рабочих областей. Например, слева открывать файл html, а справа css и параллельно с ними работать. Отдельный плюс – можно открывать не отдельные файлы, а целые каталоги и работать в них. Далее мы подробно рассмотрим, что к чему, на примере нашего проекта.
Особая гордость разработчиков – интеллектуальный поиск (Incremental Find), который будет находить не только точное вхождение, но и близкие по написанию значения. Понятно, можно использовать обычный поиск, в том числе и с регулярными выражениями.
И, пожалуй, самая большая вишенка на торте – возможность мультиколонного выделения.
Недостатки – это, как обычно, обычно оборотные стороны достоинств. Профессионалы скажут, что Sublime не дотягивает до полноценной IDE и будут правы. Новичкам покажется жутковатым способ настройки через JSON. Любителям офисных программ будет скучновато без красивых кнопок в интерфейсе. Кого-то будут раздражать периодические призывы купить программу, а кому-то не понравится необходимость работы со сторонними плагинами. Тем не менее, как показывает опыт, для разработки сайтов средней и малой сложности SublimeText вполне годится.
Установка и настройка
С установкой никаких проблем нет, достаточно скачать дистрибутив с официального сайта. Представлены версии для Linux, MacOS 32-и 64-разрядной Windows, в том числе portable версии. Файл загрузки невелик, около 8Мб, в дальнейшем, после установки плагинов, программа разрастается до 20-30 Мб. Память потребляет тоже очень скромно, то есть, в целом всё достаточно бережливо с точки зрения ресурсов.
В процессе работы экран может выглядеть примерно так.
Установка плагинов
Существуют сотни плагинов, призванных облегчить жизнь разработчику и придать редактору новые возможности. Как показывает практика, лучше этим не увлекаться. Плагины пишут разные авторские коллективы, пакеты могут конфликтовать друг с другом, быть чувствительны к номеру версии и больше мешать, чем помогать. Поэтому я перечислю то, что использую в работе сам и укажу несколько интересных надстроек на ваше усмотрение.
Установка Менеджера Пакетов
Прежде всего, необходимо установить Менеджер Пакетов (Package Control). Сделать это можно вручную или через консоль.
1 Через консоль
2 Вручную
Перечислим основные полезные пакеты.
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
Установка SASS (SCSS) на SublimeText
Существует три способа подключить препроцессор SASS на Sublime.
Во-первых, вы можете использовать программу Koala, о которой подробно рассказано вот здесь.
Во-вторых, можно установить препроцессор глобально, а затем подключить нужные плагины в редакторе.
В третьих, существуют плагины, которые формируют код, используя собственные библиотеки, без внешнего компилятора.
1 Установка SASS на компьютер
Написан этот инструмент на языке Ruby, так что вам придётся установить компилятор языка. Пользователям Windows сделать это проще всего по следующей ссылке. Просто выбираете последнюю версию, с учётом вашей системы 32 или 64 битной и устанавливаете. Все остальные могут воспользоваться вот этим сайтом.
Компилятор установлен глобально и теперь нужно настроить необходимые плагины для работы с ним.
2 Установка плагинов для использования SASS
Для этого потребуются следующие плагины:
SublimeOnSaveBuild – устанавливаете опционально. Запускает компиляцию каждый раз при сохранении файлов проекта.
3 Встроенный компилятор SASS для Sublime
Также разработчики периодически пытаются придумать способы как использовать препроцессоры, не захламляя компьютер лишними файлами. Согласитесь, довольно странно тащить к себе целый компилятор одного из самых хитроумных языков высокого уровня только для того, чтобы работать с SCSS.
В качестве выхода был предложен плагин Libsass Build. Как пишут разработчики, он работает через некий интерфейс sassc для более быстрой компиляции по сравнению с официальной реализацией Ruby.
Заключение
Sublime Text — это известный текстовый редактор, широко используемый, в частности, для написания Python-кода. Удобный пользовательский интерфейс Sublime Text, а также многочисленные расширения для подсветки синтаксиса, поиска исходного файла и анализа метрик кода делают редактор более доступным для новичков в программировании, чем некоторые другие приложения, такие как Vim и Emacs. При этом Sublime Text — это воплощение концепции одновременно и текстового редактора, и среды программирования.
Что делает редактор Sublime таким потрясающим?
Зачастую, Sublime Text — это первый редактор, который выбирают новички. Он работает на всех платформах и намного проще в изучении, чем Emacs, Vim или даже PyCharm.
В Sublime легко начать работу, так как все пункты меню и другие опции доступны с помощью мыши. Не нужно изучать различные режимы, как например в Vim, где есть нормальный режим и режим вставки. Быстрые сочетания клавиш можно выучить в процессе работы, в отличие от тех же Vim или Emacs.
Sublime идеален для начинающих, а с ростом навыков разработчика всегда можно перейти на полноценную IDE, например на PyCharm.
Дополнительным бонусом для Python-разработчика является тот факт, что плагины для этого редактора пишутся на Python. То есть, чтобы написать расширение для Sublime Text, не надо учить новый язык программирования, как язык Elisp в Emacs или Vimscript в Vim.
Зачем же тогда используют какие-то другие редакторы, если Sublime настолько хорош?
Выбор текстового редактора или среды программирования (IDE) это, как правило очень личное решение каждого разработчика. Но следует понимать, что в выбранной среде разработки вы будете проводить много времени, и так день за днем. Поэтому имеет смысл убедиться, что вы сделали правильный выбор, и ваш редактор (или IDE) приятен в использовании и отличается высокой производительностью.
Несколько ссылок на ресурсы по Sublime Text для Python-разработчиков
По Sublime Text есть много руководств и различных ресурсов, так как этот редактор очень популярен среди Python-разработчиков. Изучив материалы из нашего списка, вы сможете дополнить ваш редактор Sublime анализаторами кода и средствами для оценки его метрик, проверкой синтаксиса и другими фичами, обычно присущими исключительно IDE.
Общие ресурсы по Sublime Text
Разумеется, Sublime Text можно использовать не только для Python-разработки. Существует много полезных пособий, не направленных на какой-то конкретный язык программирования.
Ресурсы по плагинам Sublime
Плагины для Sublime Text пишутся на Python, что делает их очень удобным для нашей экосистемы инструментом по кастомизации редактора. Нижеследующие ресурсы снабдят вас полезной информацией для написания вашего собственного плагина, а также расскажут вам о некоторых признанных сообществом расширениях этого редактора.
Что еще есть в Sublime Text 3 и как со всем этим работать – поговорим в сегодняшней статье.
Инструменты Sublime Text 3
Текстовый редактор Sublime обладает большим функционалом, который упрощает написание кода и его компиляцию. Из особенностей выделяют следующее:
- Goto Anything – удобная функция, позволяющая быстро получить доступ к нужным файлам.
- Сопоставление скобок – позволяет быстро определить неправильное сопоставление. Редактор напрямую выделяет соответствующие наборы скобок.
- Множественное выделение – полезная функция, позволяющая быстро изменять код в нескольких местах.
- Мощный Python API, благодаря которому Sublime обходит многих конкурентов. Он дает возможность достигать высокой производительности за счет дополнительных плагинов.
- Раздельное редактирование – благодаря этой функции можно разделять окно на несколько столбцов, например, один назначить под HTML, другой – под CSS, третий – под JavaScript.
- Сочетание клавиш – позволяет присваивать комбинацию клавиш к различным функциям.
Настройка Sublime Text 3
Первым делом рассмотрим настройки внешнего вида, а затем перейдем к горячим клавишам и установке плагинов.
Изменяем внешний вид
По умолчанию Sublime поставляется с черной темой, которая подойдет каждому, но если нужны изменения, то никто не запрещает их сделать.
На этом настройки не ограничиваются – мы также можем изменить шрифт текста и его размер, добавить новые темы и многое другое.
Например, мы можем установить следующие значения:
Настраиваем горячие клавиши
Мы привыкли использовать комбинации клавиш, чтобы скопировать, вставить или выделить весь текст. В Sublime Text можно установить свои пользовательские комбинации.
Аналогичным образом вы можете изменять другие комбинации либо добавлять собственные.
Русифицируем Sublime Text с помощью плагина
Как мы уже говорили ранее, основная фишка Sublime – плагины, с помощью которых можно менять функционал программы. Для их установки используется дополнительная утилита Package Control, которая позволяет находить и инсталлировать разные плагины.
Для примера давайте русифицируем программу с помощью плагина LocalizedMenu:
Вот такими несложными действиями у нас получилось установить один из тысячи плагинов. Вы можете добавлять любые расширения, которые есть в пакете Sublime.
Разделяем экран
Еще одна интересная функция, о которой я уже говорил – разделитель экрана. Ей часто пользуются веб-разработчики для удобства перемещения между HTML и CSS. Активировать ее можно следующим образом:
На этом настройка Sublime Text завершена – теперь вы можете использовать программу в полной мере. Чтобы вам было еще проще, ниже я рассмотрю некоторые плагины, которые заметно упрощают работу с кодом.
Популярные плагины для Sublime Text 3
Emmet
JavaScript & NodeJS Snippets
Abvanced New File
Позволяет создавать файлы, не выходя из программы – достаточно запустить плагин, прописать путь и название файла.
Если вы работаете с Git, то данный плагин будет вам попросту необходим. С его помощью можно выполнять все необходимые взаимодействия с Git внутри программы.
GitGutter
Еще один плагин для Git, с помощью которого можно не просто работать с основными командами, но и обращаться к измененным версиям.
Заключение
Сегодня мы настроили Sublime Text 3 и убедились, что в этом нет ничего сложного, так как программа адаптирована под начинающих пользователей.
Sublime Text 3 — это мощный и красивый редактор кода. Этот редактор славится своей быстрой работой, достаточно развитым функционалом и наличием огромного количества плагинов, позволяющих сделать из него удобную, заточенную практически под любой современный язык программирования IDE (Integrated Development Environment = Интегрированная Среда Разработки).
Sublime Text 3 (сокращенно его также называют и ST3) имеет практически все что надо для работы с языком программирования D (установленный ST3 уже умеет подсвечивать программный код D, а также имеет уже готовую к работе сборочную систему /build system/ для этого языка программирования), однако, чтобы получить хорошую и приятную среду для работы необходимо немного поработать над настройкой этого замечательного текстового редактора.
Установка Sublime Text 3
Прежде всего, я хотел бы обратить внимание на тот факт, что Sublime Text 3 является проприетарным программным обеспечением, то есть является небесплатным.
Но не спешите расстраиваться, можно воспользоваться торрентом…
Для того, чтобы установить Sublime Text 3 в Windows необходимо просто запустить инсталлятор и просто дождаться окончания его работы. На этом этап установки редактора для пользователей Windows заканчивается.
Для того, чтобы установить Sublime Text 3 в Linux необходимо воспользоваться deb-пакетом, соответствующим архитектуре процессора.
Переместите пакет в нужный каталог, откройте терминал и выполните следующую команду:
И после выполнения этой последовательности команд установка для пользователей Linux заканчивается.
На этом получение лицензии для редактора окончено.
Настройка Sublime Text 3 для работы с D
Изначально, в Sublime Text 3 крайне небольшой набор необходимых для программирования на D функций, к числу которых относятся: подсветка синтаксиса, поддержка интеграции с компилятором, вставка сниппетов кода и некоторые другие.
Одной из таких весьма необходимых вещей является автодополнение кода (на жаргоне программистов — автокомплит), которое на текущий момент еще не реализовано в виде плагина или расширения, доступного для Sublime Text 3. Несмотря на это весьма досадное обстоятельство, автодополнение кода, срабатывающее по нажатию клавиши Tab, можно встроить в Sublime Text 3 неплохое автодополнение, воспользовавшись тремя пакетами: DKit, DCD и DScanner.
К сожалению, у нас нет актуальной информации по этим пакетам, поэтому воспользуйтесь поисковыми системами…
Следующий шаг не является строго обязательным и необходимым, однако, стоит выполнить его для того, чтобы иметь возможность устанавливать различные плагины и встраивать различные пакеты в редактор — на этом шаге предлагаю установить дополнение под названием Package Control.
Для установки пакета требуется открыть Sublime Text 3 и нажать комбинацию клавиш Ctrl + ` (или же зайти в меню View и выбрать пункт Show Console) и введя код:
нажать клавишу Enter. Чтобы установка Package Control прошла успешно интернет-канал должен быть активен — Package Control скачает необходимые скрипты и обновит список доступных к установке расширений.
Ссылки
Поскольку, в этом весьма содержательном посте были упомянуты лишь установка и крайне минималистическая настройка, то некоторым может потребоваться более полная информация о возможностях и полной настройке этого замечательного текстового редактора, поэтому для интересующихся вопросом самостоятельной доработки Sublime Text 3 привожу ряд весьма содержательных и полезных ссылок:
Читайте также: