8 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Sublime Text 3; топ 75 Sublime плагинов 2020 (PHP, JS, CSS; тема и русификатор)

Sublime Text 3 – топ 75 Sublime плагинов 2020 (PHP, JS, CSS… +тема и русификатор).

Sublime Text 3 – продвинутый мультиплатформенный редактор кода. Он имеет огромное количество плагинов, соответственно функционал редактора можно значительно расширить, чем мы и займемся. Прокачаем ваш Sublime Text 3 для web-разработки по полной. Рассмотрим топ 65 лучших плагинов 2020 – PHP, Python, JS, CSS… и их правильные настройки.

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

Для начала нам нужен установленный PHP в системе и прописанный в Path, для Windows я использую OSPanel .

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

Качаем версию Sublime Text 3 для нашей ОС, устанавливаем, запускаем.

Идем в пользовательские настройки кнопок: Preferences – Key Binding, идем во вкладку User (вторая вкладка), тыкаем в нее курсор, вставляем туда:

Эта запись добавляет горячие клавиши alt+shift+f для команды reindent – форматирования выделенного кода (выравнивания отступов).

Далее создадим файл пользовательских настроек: Preferences – Setting – User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences.sublime-settings, если нет, создаем его.

Записки программиста

15 декабря 2015

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

Что такое Sublime Text?

Если вдруг кто-то из читателей не в курсе, Sublime Text — это такой легковесный текстовый редактор для программистов. Что-то вроде Vim, только с человеческим интерфейсом и из коробки умеет заметно больше. Также можно рассматривать Sublime Text в качестве легковесной IDE. До уровня IntelliJ IDEA, CLion или PyCharm ему, конечно, как до луны. Зато для всевозможной эзотерики вроде Go, Erlang и Haskell работает шикарно.

Многие оценят легковесность редактора и скорость его работы. Sublime Text просто летает, в том числе на проектах в миллион строк кода на хардкорном С++ c Boost’ом и вот этим всем. При этом саблайм имеет очень низкий порог вхождения, чего о Vim, к примеру, сказать никак нельзя. Изучить основные сочетания клавиш и начать фигачить код можно буквально за 15 минут.

Мне лично очень понравилась фирменная превьюшка кода, расположенная справа, и, конечно же, возможность редактировать текст при помощи нескольких курсоров. Еще из фишек есть подсветка и автокомплит практически чего угодно, неплохой поиск по проекту безо всяких там find и grep, автоматический вордврап по заданной ширине строки, спелчекер, поддержка разных кодировок и переносов строк, настраиваемая ширина отступов. Можно писать плагины на Python (ура, нормальный язык, а не как в Vim!). Плюс есть гибкая настройка шрифтов и цветовых схем. Кстати, о схемах — по дэфолту используется темная тема m/.

Не совсем явный момент при использовании Sublime Text — возможность открывать не файлы, а каталоги. Делается это при помощи File → Open Folder, или путем передачи имени каталога в качестве аргумента при запуске редактора из bash. При этом у вас не только появляется очень симпатичное дерево каталогов в сайдбаре слева, но и, к примеру, намного круче начинает работать поиск файла по имени (Ctr+P).

Читать еще:  Определение состояния жесткого диска с помощью S.M.A.R.T.

Работает все это хозяйство на Windows, Linux и OS X.

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

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

Сочетания клавиш

Как обычно, далее предполагается, что про всякие Ctr+C, Ctr+V и Ctr+S вы знаете, поэтому эти хоткеи не упоминаются. Учтите также, что перечень хоткеев не отражает всех возможностей Sublime Text. Например, в диалоге открытия нового файла (Ctr+O) предусмотрен весьма удобный автокомплит имен файлов.

Лэйауты:

Shift + Alt + 1Одна группа вкладок
Shift + Alt + 2..4От 2 до 4 столбцов
Shift + Alt + 5Типа табличка 2 на 2
Shift + Alt + 8/9В 2 или 3 строки
Ctr + циферкаПерейти на лайаут под заданным номером

Окна:

Ctr + Shift + NНовое окно
Ctr + Shift + WЗакрыть окно

Табы:

Ctr + NНовая вкладка
Ctr + PgUp/PgDownПереход между табами
Ctr + WЗакрыть вкладку
Alt + циферкаПерейти к табу с номером
Ctr + Shift + NПеренести таб на лайаут с заданным номером

Выделение:

Ctr + DВыделение слов с созданием новых курсоров
Ctr + UЕсли в результате выделения поставились лищние курсоры
Ctr + Shift + пробелВыделить текущий скоуп

Поиск:

Ctr + FПоиск в текущем файле
Ctr + EИспользовать выделенное для поиска
F3 / Shift + F3Искать вперед/назад в текущем файле
Ctr + Shift + FПоиск по нескольким файлам
F4 / Shift + F4Перемещение по результатам поиска в файлах
Alt + RВ диалоге поиска: вкл/выкл регулярные выражения
Alt + СВ диалоге поиска: вкл/выкл case sensitivity
Alt + F3Найти все, везде поставить курсоры

Замена:

Ctr + HДиалог замены текста
Ctr + Alt + EnterВ диалоге замены: заменить все

Переходы:

Ctr + GПерейти к строке с заданным номером
Ctr + MПереход к парной скобке
Ctr + PПерейти к файлу по его имени (с превью в редакторе!)
Ctr + RПереход к методу или классу по имени в текущем файле
Alt + OПереключение между .c и .h файлами
Ctr + Shift + RST 3: Переход к символу по имени во всем проекте
F12ST 3: Перейти к определению того, что под курсором
Alt + −ST 3: Вернуться туда, откуда пришли
Alt + Shift + −ST 3: Обратное действие к предыдущему пункту

Закладки:

Ctr + F2Поставить/снять закладку
F2 / Shift + F2Предыдущая/следующая закладка в рамках одного файла
Ctr + Shift + F2Снять все закладки в рамках текущего файла

Фолдинг:

Ctr + Shift + [Свернуть код
Ctr + Shift + ]Развернуть код
Ctr + K + JРазвернуть все, что свернуто

Отступы:

Ctr + ]Увеличить отступ
Ctr + [Уменьшить отступ

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

Ctr + /Закомментировать/раскомментировать код
Ctr + Shift + /То же самое, но использовать блочный комментарий

Макросы:

Ctr + Alt + QНачать/закончить записывать макрос
Ctr + Shift + Alt + QВыполнить записанный макрос

Курсоры:

Ctr + кликСоздать новый курсор
Alt + Shift + ↑↓Создание новых курсоров выше/ниже
Ctr + Shift + LДля каждой выделенной строки создаться свой курсор

Некоторые преобразования текста:

F9Сортировка строк
Ctr + F9Сортировка строк с учетом регистра
Ctr + K + LПривести текст к нижнему регистру
Ctr + K + UПривести текст к верхнему регистру

Интерфейс:

F11Включить/выключить фулскрин режим
Shift + F11Так называемые distraction free mode
Ctr + K + BПоказать/скрыть сайдбар слева
Ctr + колесико/+/−Сделать шрифты больше/меньше

Прочее:

По большому счету, это все!

Файл настроек

В контексте этой заметки нельзя не сказать и пару слов о файле настроек.

Искать его следует где-то здесь:

Если такого файла нет, ничего страшного — просто создайте его.

Вот содержимое моего файла:

Читать еще:  Обзор Мобильного Приложения РусШтрафы ГИБДД

Как видите, это обычный JSON. Приведенные настройки говорят саблайму (1) всегда подсвечивать на minimap справа то место, на которое мы сейчас смотрим, (2) рендерить текст по центру, а не по левой стороне (3) отображать слова на следующей строчке, если строка не умещается в 80 символов по ширине, (4) использовать шрифт размером 10 попугаев, (5) отмечать вертикальной линией ширину строки в 80 символов и (6) не проверять наличие новых версий редактора. В такой конфигурации получается что-то очень похожее на distraction free mode, только с табами, номерами строк и отображением закладок. Все изменения настроек саблайм подхватывает на лету, без перезапуска редактора.

Здесь можно найти более подробную неофициальную документацию по настройкам Sublime Text.

Заключение

Хотелось бы отметить несколько недостатков Sublime Text. Возможно, часть из них уже исправлена в Sublime Text 3. Я его пока не смотрел, так как во время написания поста третья версия еще находилась в бете.

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

Очень не хватает просмотра git blame рядом с номерами строк, как в IDEA. Из коробки нет поддержки синтаксиса Rust, Kotlin и GLSL. Из коробки нет истории буфера обмена. Нет встроенной поддержки TODO-списков. Нельзя посмотреть список закладок, нельзя давать закладкам имена. Не удалось найти хоткеев для перемещения вкладок влево и вправо, ровно как и для изменения ширины лайаутов. Встроенный шелл был бы не лишним.

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

В целом впечатления от Sublime Text у меня очень положительные. Я полностью заменил им Geany, а Vim теперь использую только для задач вроде изменения пары строчек в конфиге по SSH. Интересно, что при написании кода в саблайме чувствуешь себя просто мега реактивным. Ничего лишнего не отвлекает, все сосредоточение только на коде. Любопытное чувство, попробуйте!

А пользуетесь ли вы Sublime Text? Если да, то что вы в нем пишите и каковы ваши впечатления от редактора?

Дополнение: Небольшая подборка полезных плагинов — Package Control (через него ставится все остальное), Sublime Git, Makrdown Preview, GoSublime, Anaconda, SublimeHaskell, PlainTasks, OpenGL Shading Language (GLSL).

Быстрая настройка Sublime Text 3 для вёрстки сайтов

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

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

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения вёрски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.

По-умолчанию Sublime Text выглядит довольно печально:

Установка Package Control в Sublime Text

Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чём вы получите соответствующее уведомление.

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.

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

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

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду «Install Package» и выбираем нужный пакет из списка.

Самые популярные плагины для Sublime Text:

  • Emmet — ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
  • AutoFileName — дополняет код при написании путей до файлов в вёрстке;
  • Gist — подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
  • Sass — плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
  • terminus — плагин встроенного терминала Sublime Text.
  • W3​CValidators — мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.
Читать еще:  Huawei выпустит гибкий Mate Xs весной

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

  • One Dark Color Scheme — цветовая схема для подсветки кода;
  • One Dark Material — Theme — тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

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

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина, скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:

Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) — отдельно:

Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

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

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

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку

«C:Users<Ваш пользователь>AppDataRoamingSublime Text 3″
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector