Как установить плагин или тему для Sublime Text 3 — Webstacker
Если ты читаешь эту статью – ты хочешь узнать побольше о плагинах и темах для Сайблайма и то, как их установить. Так что погнали!
Зачем оно нам? Плагины дают возможность увеличить функционал «чистого» Саблайма и, соответственно, твою производительность, а темы помогут сделать процесс разработки более комфортным и приятным.
Установка
Есть два способа установки плагинов и тем для Sublime Text 3 – автоматическая с помощью Package Control и ручная, скачивая архив и размещая его в папке приложения.
Автоматическая установка
Рекомендуемый способ установки тем и плагинов. Даже не перезапуская приложение мы устанавливаем нужную тему или плагин, используя интерфейс Package Control:
- Нажимаем ⌘ / ctrl + shift + P чтобы открыть консоль Саблайма
- В консоли пишем
install package
, выбираем эту команду - Пишем нужный запрос – будь то Git, подсветка синтаксиса или тема
- Нажимаем Enter и вуаля
Ручная установка
Бывают ситуации когда плагин приходится устанавливать вручную (Например, плагин отсутствует в пакетном менеджере Саблайма). Это занимает не больше пары минут времени и делается следующим образом:
- Качаем архив с плагином
- Распаковываем, меняем название папки на название плагина
- Переходим в папку плагинов приложения, используя меню приложения –
Preferences > Browse packages…
- Переносим папку с плагином в папку, которая открылась в шаге выше
Активация
Если плагины устанавливаются и активируются автоматически, то тему придется активировать вручную. Это делается невероятно просто – открываем меню приложения, выбираем Preferences > Theme...
и выбираем нужную тему. Бинго, все работает!
Где взять плагины и темы?
Учитывая популярность редактора – для него существует невероятное количество плагинов и тем на любой цвет и вкус – от подсветки синтаксиса и сниппетов до автоматизации действий и гита.
Больше всего плагинов и тем для Sublime Text 3 можно найти в пакетном менеджере – Control Manager или на GitHub.
Кстати говоря, мы уже писали ранее о маст-хэв крутых плагинах для Sublime Text 3
Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!
Поделиться статьей:
Прокачиваем Sublime 3 для эффективной верстки
Быстро настраиваем Sublime text 3 для верстки.
Package Control — это менеджер дополнений, который позволяет легко и быстро установить необходимые плагины. Процесс установки:
Для установки плагинов необходимо нажать shift + cmd + p
, набрать install
и выбрать пункт «Package Control: Install Package».
После выбора этого пункта можно начать писать название необходимого модуля. Например, на картинке ниже я ищу плагин для Coffescript.
Плагины для верстки
- AutoFileName — предлагает пути для файлов и изображений;
- Emmet — целый набор плагинов для быстрого написания кода. Подробнее;
- SideBarEnhancements — расширение сайдбара;
- SASS — подсветка синтаксиса sass. Забавно, но долгое время я спокойно справлялся подсветкой синтаксиса less при работе с sass файлами;
- LESS — подсветка синтаксиса less. На данный момент почти не использую. так как по работе все больше использую sass;
- SublimeOnSaveBuild — компилирует файлы из less или sass в css сразу после сохранения. В последнее время тоже почти не используется, так это делает Gulp.
Emmet
Emmet сам по себе заслуживает отдельной статьи, это очень мощный инструмент для быстрой верстки и работы с HTML/CSS. Пара быстрых трюков, которые пригодятся почти каждому:
Шаблон html
Создание элементов
Создание вложенных элементов. Тут можно увидеть работу плагина AutoFileName при выборе ссылки
Работа с большим списком. Шорткат shift + cmd + l
позволяет выбрать похожие элементы и работать одновременно со всеми
По ссылке можно посомтреть полный перечень трюков для Emmet.
Для внесения изменений в настройки Sublime необходимо перейти Preferences > Settings
. Все измнения лучше вносить в User settings
{ "open_files_in_new_window": false, //при открытии любого файла из папки открывает его в текущем окне "translate_tabs_to_spaces": true, //преобразование табов в пробелы "tab_size": 2, //количество пробелов в одном табе "filename_filter": ".(sass|scss)$", //эта и нижняя строка для компиляции css из scss файлов при сохранении "build_on_save": 1, "createCssSourceMaps": true //создавать sourcemap }
Почитать про настройку и работу с Sublime
Sublime Text — плагины для верстки
Пришло время прокачать ваш Sublime Text, чтобы разрабатывать проекты быстро и современно.
Находясь в Sublime Text нажмите Ctrl+Shift+P. Откроется консоль, в ней напишите install, появится строка Install Package Control. Нажмите на нее, и установится Package Control (переводится как «контроль пакетов»).
Пакеты в данном случае это плагины (дополнения), которые вы будете устанавливать, чтобы расширить возможности вашего Sublime.
Можете посмотреть короткое видео по установке Package Control:
Теперь через Package Control можно устанавливать плагины (дополнения) для Sublime Text. Вверху Sublime Text найдите кнопку Preferences, а в ней найдите Package Control. В открывшемся окне найдите Package Control: Install Package и нажмите. В открывшемся окне находится список всех плагинов для Sublime Text. Все устанавливать не нужно. В строке поиска этого окна введите Alignment, и нажмите на появившийся плагин, начнется установка. Посмотрите видео:
Таким же образом установите плагины из списка ниже. Без некоторых из этих плагинов у вас не получится полноценно изучать следующие уроки. Устанавливайте плагины, которые полностью соответствуют названию из списка ниже. Установка плагинов сейчас займет у Вас некоторое время, но в будущем может сэкономить целые дни.
Список плагинов:
- Alignment (вы должны были его только что установить)
- Auto Semi-Colon
- AutoFileName
- ApacheConf
- BracketHighlighter
- Color Highlighter
- Console Wrap
- CSS Extended Completions
- DocBlockr
- Inc-Dec-Value
- JQuery
- SASS
- StyleToken
- SublimeLinter
- SwapStrings
- JavaScript & NodeJS Snippets
- Advanced New File
- Git
- GitGutter
- SublimeCodeIntel
- HTML-CSS-JS Prettify
- Goto-CSS-Declaration
- CSScomb
- ClipBoard History
- Web Inspector
sublimetext2 — Sublime Text 3: Как установить плагины из Github
Как установить плагины из github для Sublime Text 3? Я пытаюсь установить это. На данный момент я установил displayfunctions.py
в Packages/Display-Functions/displayfunctions.py
(я создал новую папку Display-Functions
в папке Packages
для хранения displayfuntions.py
). Это все еще не работает. Как я могу это исправить?
24
George Newton 12 Апр 2014 в 08:47
5 ответов
Лучший ответ
Этот процесс установки работает для любых плагинов Sublime-Text 2/3.
Выйти из Sublime
Перейти в папку
Packages
:- Windows:
%APPDATA%\Sublime Text 3\Packages
- OS X:
~/Library/Application\ Support/Sublime\ Text\ 3/Packages
- Linux:
~/.config/sublime-text-3/Packages/
- Windows:
Выполнить:
git clone https://github.com/BoundInCode/Display-Functions.git
Откройте Sublime и попробуйте использовать.
42
Community 20 Июн 2020 в 09:12
В Sublime Text 3, если у вас уже есть Package Control, но пакет не отображается в Install Packages
, например, ChainOfCommand , вам нужно «Добавить репозиторий», чтобы добавить package в Package Control, только после этого вы сможете его установить.
Вот пошаговый процесс:
В веб-браузере перейдите к своему плагину, скопируйте URL-адрес git (должен заканчиваться на
.git
).- для ChainOfCommand это
https://github.com/jisaacks/ChainOfCommand.git
- для ChainOfCommand это
В Sublime, открытый контроль пакетов
Выберите
Package Control: Add Repository
Внизу окна Sublime появится поле ввода. Вставьте URL. И УДАЛИТЕ РАСШИРЕНИЕ .GIT ; нажмите Enter.
- Теперь репозиторий добавлен в Package Control, но не установлен.
Снова откройте Package Control (как на шаге 2).
Выберите
Package Control: Install Packages
Теперь у вас должна быть возможность найти и установить ранее отсутствующий пакет, то есть ChainOfCommand.
В качестве альтернативы, если у вас есть TortoiseGit, вы можете выполнить установку вручную:
Как и в предыдущем случае, скопируйте URL-адрес (на этот раз включите .git).
В Sublime перейдите в «Настройки»> «Обзор пакетов» (откроется папка «Пакеты»).
-
Щелкните правой кнопкой мыши пустое место в папке> Git Clone
Поскольку URL-адрес уже находится в вашем буфере обмена, он должен автоматически отображаться в URL-адресе окна Git Clone. Нажмите ОК и вуаля, установлено.
28
Travis Heeter 28 Сен 2018 в 12:46
Для Sublime text 3 я установил несколько пакетов с GitHub, например:
Все готово и готово к использованию пакетов.
Обновление: Спасибо @GMunguia за то, что помните предупреждение.
3
mtb 13 Дек 2016 в 10:57
Поскольку этот плагин доступен через Package Control, который, как я считаю, является наиболее удобным способом установки пакетов, вам следует посмотрите на установку этого. Это широко поддерживаемый менеджер пакетов для Sublime Text 2/3.
0
idleberg 13 Апр 2014 в 13:39
Перейдите к
tools
, затемcommand palette...
, затем введитеpackage control: install package
и нажмите Enter. после этого введите имя нужного пакета. это очень просто
0
Geco 5 Апр 2020 в 08:45
Быстрая настройка Sublime Text 3 для вёрстки сайтов
Скачать дистрибутив Sublime Text 3: https://www.sublimetext.com/
По умолчанию Sublime Text — выглядит печально 😥
Поэтому установим все необходимые плагины.
Настроим Package Control
Нажимаем: Ctrl + Shift + P
На MAC другое сочетание клавиш, возможно Cmd + Shift + P
Жмем Enter
и устанавливаем Package Control
Package Control
необходим для того, что бы можно было устанавливать необходимые пакеты и плагины для Sublime Text
После установки Package Control
— установим все необходимые плагины.
Emmit
— нужен для того, что бы максимально быстро писать html
и css
код ;
Установим Emmit
Нажимаем: Ctrl + Shift + P
Имеем список доступных пакетов (серый список)
И судя по сообщению — установка Emmet
завершена!
Следующий плагин который установим: AutoFileName
— Он нужен, что бы максимально быстро прописывать пути до файлов.
Для установки нажимаем: Нажимаем: Ctrl + Shift + P
И в появившемся списке пакетов — набираем в строке: AutoFileName
Следующий плагин который установим: Gist
Гисты — это кусочки кода, которые хранятся на gist.github.com.
Причем эти кусочки кода можно прямо из Sublimetex — извлечь с gist.github.com.
Для установки нажимаем: Нажимаем: Ctrl + Shift + P
Установили Gist!
Рекомендуется посмотреть видео по настройке Gist
СЛЕДУЮЩИЙ ПЛАГИН: SASS
Важно!
НЕ ЗАБЫВАЕМ УСТАНОВИТЬ Gulp sass
в Terminal
Командой: npm i gulp-sass --save-dev
Да ХРЕН ТАМ! — НЕ БУДЕТ РАБОТАТЬ!
Еще необходимо доставить еще пакет:
Скрина нет) Так как уже поставил — а 2 раза установщик не показывает.
Теперь установим Внешнее оформление Sublime Text
Начали:
и 2 варианта цветовых оформления на выбор:
Далее переходим собственно к настройке Sublime Text 3
Отrроется файл настроек Sublime Text3
Правим настройки прям в этом же файле и нажимаем Ctrl + S
Ссылка на статью с настройками Sublime Text
Однако, при простом копировании настроек из статьи по ссылке — может возникать ошибка — МОл, не может найти тему One Dark!
Проблема решилась — выбором нашей темы «One Dark..»
напрямую через меню Sublime Text3:
Порядок! Продолжаем настройку :
Включить отображение непечатных символов:
нужно добавить строку в пользовательский файл настроек Sublime Text → Preferences → Settings — User.
Допишем код ЧЕРЕЗ ЗАПЯТУЮ в наш файл настроек:
"draw_white_space": "all" //Показать все символы
Меню выключили — но можно его оперативно включать.
Установка темы One Dark на MAC |
Выполняем стандартную установку в Sublime Text 3
через комбинацию клавиш Cmd + Shift + P
1) Ставим: Theme — One Dark
2) Ставим: One Dark — Color Scheme
Но потом, скорее всего произойдет сбой ТЕМЫ!
Что бы это исправить — идем как на картинке:
SumbLime Text
-> Preferences
-> Color Scheme...
И вуаля! Тема One Dark у нас встала!
Установка темы на MAC — Завершена! |
Далее — откроем настройки клавиатуры:
Preferences → Key Bindings (Сочетания клавиш)
Далее переходим к Гисту:
GitHub Gist
Ссылка на статью с настройками Sublime Text
и вставляем ее сюда — в правую вкладку:
{ "keys": ["alt+shift+f"], "command": "reindent" },
Далее — откроем настройки клавиатуры Sublime Text3 на MAC:
Preferences
→ Key Bindings
(Сочетания клавиш)
В открывшееся правое окно (документ) — вставляем строчку (см. инструкцию Windows):
И вуаля — все работает!
А точнее — выполняется Выравнивание строк кода!
Важно, обязательно оставить квадратные скобки — иначе ошибка будет и не будет работать.
Выравнивание на MAC — РАБОТАЕТ!
Далее настраиваем:
и откроется папка Packages
Эта папка нужна для быстрого переноса настроек — на другое рабочее место.
Просто копируем все содержимое этой папки Packages
Или же можно сохранить только отдельные настройки из папки User
Включение боковой панели Sidebar
Можно приступать к работе по верстке сайтов!
И пропишем строку в конец файла,
ВАЖНО поставить ЗАПЯТУЮ после предыдущего параметра:
<span>»draw_white_space»: «all»</span> // показывать все символы
<span>»draw_white_space»: «all»</span> // показывать все символы |
Изменить шрифт в Sublime Text 3
Пропишем нужный нам шрифт:
"font_face": "Courier New",
Установим еще дополнение для быстрого просмотра цвета:
Вызовем установщик: Ctrl + Shift + P
ГОТОВО!
Можно настроить — с какой стороны подсвечивать квадратик.
Включить «Черную (Темную)» тему для «Side Bar»
И выбрать:
Настройка переносов длинных строк:
Как получить мои настройки Sublime Text 3 – Николай Громов
Намедни вернулся к Sublime Text 3 от Atom. Пользовался последним чуть менее двух месяцев, полностью прочувствовал, отказываюсь от него.
Для Sublime Text 3 есть плагин синхронизации настроек Sync Settings, который сохраняет настройки в gist и позволяет синхронизировать через такой gist настройки ST3 на разных компьютерах. Синхронизируются файлы из папки пользователя, которые можно посмотреть, вызвав из выпадающего меню: Preferences → Browse Packages
(откроется файловый менеджер, будет видна папка User
— это и есть папка пользователя).
Чтобы получить мои настройки, нужно:
1. Установить Package Control
Смотрите выпадающее меню Preferences, если есть пункты Package Control — пропускайте шаг.
Установка Package Control элементарна.
2. Установить Sync Settings
Как и с любым другим плагином:
Ctrl+Shift+P
(Cmd+Shift+P
для OSX), набираемinstall
, вызываем пунктPackage Control: Install Package
,- ждем появления модального окна со списком доступных плагинов,
- набираем
Sync Settings
и выбираем пункт с ним.
3. Генерируем новый токен
Нужна регистрация на github.com (этобесплатноБЕЗСМС). Имя токена — что-то вроде «ST3 sync settings», права — работа с gist (ставим галочку рядом с пунктом «gist»).
4. Форкаем мои настройки
Переходим к gist-у с моими настройками (осторожно, там словарь проверки орфографии на 10+ Мб) и жмем кнопку Fork
, чтобы у вас появилась их копия.
5. Настроим ваш Sync Settings
Идем в Preferences → Packege Settings → Sync Settings → Settings — Default, выделяем всё и копируем в буфер.
Идем в Preferences → Packege Settings → Sync Settings → Settings — User, вставляем из буфера.
Заполняем поля "access_token"
(вы генерировали его раньше, копипастим) и "gist_id"
(это конечная часть URL-а вашего gist-а с настройками, примерно такая: b1b28f1c3586a9e3985989518db20457).
6. Стянем настройки
Ctrl+Shift+P
(Cmd+Shift+P
для OSX), находим и вызываем пункт Sync Settings: Download
, ждем некоторое время (на быстром канале — в пределах 2-х минут) пока скачаются настройки и установятся все плагины.
Как пользоваться
- Пройтись по настройкам, поменять что-то для себя (я, к примеру, использую светлую тему)
- Посмотреть какие плагины стоят, возможно, добавить свои.
После изменений отправить свой настройки в свой гист: Ctrl+Shift+P
(Cmd+Shift+P
для OSX), находим и вызываем пункт Sync Settings: Upload
.
P.S.
Я не работаю в техподдержке Sublime Text или каких-либо его плагинов.
Понравилась статья? Ставьте лайк, делитесь в соц. сетях или купите мне кофе.Как Установить Livereload На Sublime Text 3?
Платформа, которую я использовал: Linux Mint 17+
Я хочу поблагодарить http://anthozano.fr/livereload-pour-sublime-text-3/. Я смог запустить живую перезагрузку над возвышенным текстом 3 с инструкциями на веб-сайте. Тем не менее, веб-сайт написан на французском языке (я считаю, что Google translate сказал), поэтому я решил написать здесь шаги.
Сначала установите возвышенный текст 3 отсюда http://www.sublimetext.com/3 или следуйте по своему усмотрению (я сделал это с Linux mint Package manager).
Во-вторых, установите управление пакетом отсюда https://packagecontrol.io/installation#st3 (инструкция четко указана на веб-сайте, поэтому я сделал не объясняйте это много).
В-третьих, откройте управление пакетом (ярлык: Ctrl+Shift+P
) и выполните поиск Package Control: Add Repository
Теперь появляется область для ввода URL-адреса в нижней части окна возвышенного текста 3. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json
.
Снова откройте управление пакетом и выполните поиск Package Control: Install Package
, а затем выполните поиск LiveReload
в следующем окне.
Настройте установку пакета LiveReload на Preferences > Package Settings > LiveReload > Setting - Default
и вставьте это:
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
Теперь для вашего браузера установите подключаемый модуль LiveReload, как показано ниже:
Firefox: http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari: http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz
Не забудьте включить плагин LiveReload в браузере после его установки, чтобы сразу увидеть изменения кода, отображаемые в браузере.
Примечание. Пользователи Chrome, для поддержки LiveReload для страниц file://
, перейдите к chrome://extensions/
и отметьте Allow access to file URLs
.
Снимок сделан из Safari для Mac OSX:
Наслаждайтесь, живите перезагрузкой с возвышенным текстом 3.
Спасибо Энтони Лозано за http://anthozano.fr/livereload-pour-sublime-text-3/.
sublimetext2 — Sublime Text 3: как установить плагины из Github
sublimetext2 — Sublime Text 3: как установить плагины из Github — qaru Этот сайт в настоящее время находится в режиме только для чтения; мы скоро вернемся с полной функциональностью. Подпишитесь на @StackStatus или посетите наш статусный блог для получения дополнительной информации.Спросил
Просмотрено 43k раз
Как мне установить плагины из github для Sublime Text 3? Я пытаюсь это установить.До сих пор я установил displayfunctions.py
в Packages / Display-Functions / displayfunctions.py
(я создал новую папку Display-Functions
в папке Packages
для хранения displayfuntions.py
) . Это все еще не работает. Как я могу это исправить?
Создан 12 апр.
Джордж Ньютон Джордж Ньютон2,9497 золотых знаков2727 серебряных знаков4444 бронзовых знака
Этот процесс установки работает для любых плагинов Sublime-Text 2/3.
Создан 12 апр.
Антон Дозорцев4,47455 золотых знаков3131 серебряный знак6464 бронзовых знака
5 В Sublime Text 3, если у вас уже есть Package Control, но пакет не отображается в Install Packages
, , например ChainOfCommand , вам нужно «Добавить репозиторий», чтобы добавить пакет в Package Control, только потом можно установить.
Вот пошаговый процесс:
-
В веб-браузере перейдите к своему плагину, скопируйте URL-адрес git (должен заканчиваться на
.git
).- для ChainOfCommand, это
https://github.com/jisaacks/ChainOfCommand.git
- для ChainOfCommand, это
-
В Sublime, Open Package Control
-
Выбрать
Управление пакетами: добавить репозиторий
-
Внизу окна Sublime появится поле ввода.Вставьте URL. И УДАЛИТЬ РАСШИРЕНИЕ .GIT ; нажмите Enter.
- Теперь репо добавлено в Package Control, но не установлено
-
Снова откройте элемент управления пакетами (как на шаге 2).
-
Выбрать
Управление пакетами: установить пакеты
-
Теперь у вас должна быть возможность найти и установить пакет, который ранее отсутствовал, то есть ChainOfCommand.
В качестве альтернативы, если у вас есть TortoiseGit, вы можете выполнить ручную установку:
-
Как и выше, скопируйте URL-адрес (на этот раз включите .git).
-
В Sublime перейдите в «Настройки»> «Обзор пакетов» (откроется папка «Пакеты»).
-
Щелкните правой кнопкой мыши пустое место в папке> Git Clone
-
Поскольку URL-адрес уже находится в буфере обмена, он должен автоматически отображаться в URL-адресе окна клонирования Git.Нажмите ОК и вуаля, установлено.
Создан 08 июн.
Трэвис Хитер Трэвис Хитер10.7k1010 золотых знаков7171 серебряный знак118118 бронзовых знаков
2Для Sublime text 3 я установил несколько пакетов с GitHub, например:
-
Установить
Управление пакетами
:- открытая консоль:
View-> Show Console
(или CTRL + `) -
скопируйте и вставьте код из packagecontrol.io и запустите (нажмите , введите )
-
В консоли выберите
Добавить репозиторий
- Добавьте ссылку GitHub и нажмите Введите
- В консоли выберите «установить пакет» и нажмите Введите
- открытая консоль:
Все готово и готово к использованию пакетов.
Обновление: Спасибо @GMunguia за то, что помните предупреждение.
Создан 23 авг.
mtbmtb1,977711 серебряных знаков2929 бронзовых знаков
1Поскольку этот плагин доступен через Package Control, который, как я считаю, является наиболее удобным способом установки пакетов, вам следует изучить его установку.Это широко поддерживаемый менеджер пакетов для Sublime Text 2/3.
Создан 13 апр.
idlebergidleberg11k77 золотых знаков3737 серебряных знаков5858 бронзовых знаков
2Перейдите к
инструментам
, затем к палитре команд...
, затем введитеpackage control: установите пакет
и нажмите Enter. после этого введите имя нужного пакета. это очень просто
Создан 05 апр.
GecoGeco1321414 бронзовых знаков
Этот сайт временно находится в режиме только для чтения и не принимает новые ответы.
Stack Overflow лучше всего работает с включенным JavaScriptВаша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
Плагины Sublime Text 3 для веб-разработчиков
Правильный набор плагинов может сделать ваше время в любом приложении намного более продуктивным.Если вы веб-разработчик, работающий над Sublime Text 3, мы настоятельно рекомендуем внимательно изучить эти плагины.
- Управление пакетами
- HTMLПоказать
- Эммет
- Кронштейн Highlighter
- jQuery
- Преобразование корпуса
Пакетный контроль
Package Control — это плагин (также известный как пакет), который упрощает поиск, установку и обновление других пакетов. В идеале это плагин, который вы хотите установить в первую очередь. Это значительно упрощает работу со всеми другими плагинами.
Как установить
- Перейдите на https://packagecontrol.io/installation и скопируйте туда длинную команду. Это будет выглядеть примерно так:
- Нажмите клавишу Control-backtick (
⌃ `
), чтобы открыть Sublime Text Console. - Вставьте длинную командную строку и нажмите
, верните
. - После запуска команды вы, вероятно, увидите небольшое всплывающее окно с предупреждением.
- Продолжайте и нажмите ОК.
- Закройте и перезапустите Sublime Text.
- Нажмите Shift-Command-P (
P
) для OSX или Control-Shift-P (⌃⇧P
) для Windows, чтобы открыть палитру команд. - Начните вводить
Package Control
, чтобы увидеть все команды.
Мы будем использовать Package Control: Install Package для остальных плагинов.
HTMLПоказать
HTMLPrettify принимает длинные строки HTML, CSS, JavaScript и JSON и форматирует их, чтобы вы могли их читать, а не пытаться анализировать стену сплошного текста.
Как установить
- Нажмите Shift-Command-P (
P
) для OSX или Control-Shift-P (⌃⇧P
) для Windows, чтобы открыть палитру команд. - Начните вводить
Package Control
, чтобы увидеть все команды. ВыберитеPackage Control: Install Package
. Появится меню доступных плагинов. - Начните вводить
HTMLPrettify
. - Щелкните
HTML-CSS-JS Prettify
. Это немного другое название, но не волнуйтесь — это тот же плагин.
В этом 14-секундном видео вы можете увидеть HTMLPrettify в действии.
Эммет
Emmet раньше назывался Zen Coding, и это уже давно существует.Это позволяет вам писать сокращенные HTML и CSS. Например, набрав это:
#page> div.logo + ul # navigation> li * 5> a {Item $}
и нажатие на вкладку
превращается в это:
1 2 3 4 5 6 7 8 9 10 | |
После установки Emmet через Package Control перезапустите Sublime Text.
Чтобы заставить Эммета работать, убедитесь, что вы установили синтаксис для своего документа. Иначе ничего не получится.
Попробуй. Введите это:
1 | |
и нажмите вкладку
. (Вы также можете использовать Control-E ⌃E
)
Бам!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | |
Чтобы изучить все горячие клавиши, потребуется некоторое время, но если вы пишете много HTML, это того стоит.
Кронштейн осветителя
BracketHighlighter — отличный хайлайтер для скобок и тегов.
После установки с помощью Package Control, вы можете щелкнуть в любом месте JavaScript или HTML и увидеть начальные и конечные скобки в левом столбце.
jQuery
Подключаемый модуль jQuery обеспечивает правильную окраску синтаксиса для методов jQuery и предоставляет фрагменты jQuery для завершения кода.
Преобразование корпуса
Case Conversion позволяет переключаться между snake_case, camelCase, PascalCase и другими.
После установки Case Conversion через Package Control (введите «pic» для быстрого доступа к Install Package), попробуйте:
До: navMenu
Нажмите: ⌃⌥c
, затем s
После: nav_menu
Обратите внимание, что он не будет работать должным образом, если вы попытаетесь преобразовать регистр на всей строке.
Раньше:
Нажмите: ⌃⌥c
, затем ⌃⌥s
(для CamelCase)
После: navIDMenuSystemClassNavMenuIsOpen
Если вы веб-разработчик, использующий Sublime Text 3, попробуйте эти плагины! Если они вам не нравятся, вы всегда можете удалить их с помощью Package Control: Remove Package
.
18 основных плагинов для Sublime Text
Несмотря на то, что SublimeText поставляется с множеством замечательных функций, которые помогают нам работать в качестве веб-разработчиков, как и любой другой инструмент, всегда будет возможностей для улучшений . Именно тогда плагины могут быть действительно полезными (а мы их большие поклонники).
Прежде чем мы продолжим, возможно, вы хотели бы проверить наши предыдущие сообщения о SublimeText, чтобы увидеть, что он может делать в своем исходном состоянии:
В этом посте мы собрали несколько плагинов, которые вам, возможно, потребуется установить для , чтобы заполнить функции, которые отсутствуют в SublimeText .
12 самых востребованных советов и хитростей в области возвышенного текста12 самых популярных советов и хитростей в области возвышенного текста
Вы, наверное, уже знаете, что мы фанаты Sublime Text. Это могло бы выглядеть очень просто … Читать дальше
1. Пакетный контроль
Package Control — это первое, что вам нужно установить сразу после установки SublimeText. С его помощью вы можете легко устанавливать, обновлять, удалять и просматривать список пакетов или плагинов, которые вы установили в SublimeText.
2. Эммет
Короче говоря, Emmet позволяет нам быстрее писать HTML и CSS с помощью сокращений / ярлыков, а затем расширять их с помощью допустимых тегов HTML. Это один из моих наиболее часто используемых ярлыков, позволяющий сэкономить время:
((h5> a [rel = external]) + p> img [width = 500 height = 320]) * 12
Создает 12 списков заголовков, сопровождаемых изображением. Затем я могу заполнить свой контент, не беспокоясь о том, чтобы испортить формат.
Подробнее: Пишите HTML и CSS быстрее с Emmet
3.SublimeLinter
SublimeLinter был недавно переработан и доработан для SublimeText 3. Новая версия, безусловно, поставляется с набором новых функций. Вместо того, чтобы помещать все линтеры в один пакет, разработчик позволяет вам выбрать и установить только те, которые вы регулярно используете.
Подробнее: Взгляд на SublimeLinter 4
4. SublimeEnhancements
Улучшения боковой панели имеет несколько новых функций в меню боковой панели, включая создание нового файла в текущей папке проекта, перемещение файла и папки, дублирование файла и папки, открытие в Finder и браузере, обновление и многое другое.
5. PackageResourceViewer
С помощью PackageResourceViewer вы можете легко просматривать и редактировать пакеты, которые поступают из SublimeText. Вы также можете извлечь пакет, который скопирует его в папку пользователя, чтобы вы могли безопасно редактировать его.
6. Git
Этот плагин интегрирует SublimeText с Git, поэтому вы можете запускать некоторые команды Git из SublimeText, такие как добавление и фиксация файлов, просмотр журнала и аннотирование файлов.
7. Терминал
Этот плагин позволяет открывать папки проекта в Терминале прямо из SublimeText — с помощью горячей клавиши.Это очень полезный плагин, когда вам нужно выполнить командные строки в данной папке.
8. CSSComb
CSSComb — это плагин для сортировки свойств CSS. Если вам нужно, чтобы ваши коды были аккуратными и в правильном порядке, этот плагин позволит вам настроить порядок свойств. Это также полезно, когда вы работаете с командой разработчиков, у каждого из которых свои предпочтения в написании кода.
Подробнее: Сортировка и организация CSS с помощью CSSComb
9.Можно ли использовать
С помощью этого подключаемого модуля вы можете проверить поддержку браузером свойств CSS и элементов HTML, которые вы используете. Чтобы использовать его, выделите свойство CSS или элемент HTML, и вы перейдете на соответствующую страницу в CanIUse.com.
10. Выравнивание
Alignment позволяет выровнять ваши коды, включая PHP, JavaScript и CSS, что делает их более понятными и удобочитаемыми. См. Следующий снимок экрана для сравнения до и после.
11.Триммер
Этот плагин помогает вам удалить ненужные пробелы, а также конечные пробелы, которые могут вызвать некоторые ошибки в JavaScript.
12. ColorPicker
С помощью этого плагина вы можете выбирать и добавлять цвета в SublimeText с помощью собственного цветового круга из вашей ОС.
Подробнее: Easy Color Picker в SublimeText
13. Редактирование MarkDown
Несмотря на то, что SublimeText может просматривать и редактировать файлы Markdown, он обрабатывает их как простой текст с очень плохим форматированием.Этот плагин полезен для обеспечения лучшей поддержки с правильным выделением цвета для Markdown в SublimeText.
Подробнее: Написание веб-контента с помощью Markdown
14. FileDiffs
FileDiffs позволяет вам видеть различия между двумя файлами в SublimeText. Вы можете сравнивать файлы с скопированными данными из буфера обмена, с файлом в проекте, с открытым в данный момент файлом, а также между сохраненными и несохраненными файлами.
15. DocBlockr
DocBlokr позволяет с легкостью создавать документацию или аннотации для ваших кодов, анализируя функции, параметры, переменные и автоматически добавляя возможную документацию (см. Снимок экрана ниже).
16. Пользовательские темы
Хотите верьте, хотите нет, но использование другой темы может побудить вас к творчеству и идеям. Ниже приведены несколько отличных настраиваемых тем, которые придают SublimeText другой, возможно, лучший вид.
SpaceGray
Центурион
Сода
17. Фрагменты
Фрагменты кода могут помочь вам писать код быстрее за счет повторного использования фрагментов кода. Хотя вы также можете создать свой собственный набор фрагментов кода, есть несколько пакетов фрагментов, готовых к использованию прямо сейчас.Вот лишь некоторые из них:
- Foundation — набор фрагментов для создания компонентов инфраструктуры Foundation 5 , таких как кнопки, вкладки и навигация.
- Bootstrap 3 — Если вы предпочитаете Bootstrap , попробуйте это.
- Bootstrap 3 для Jade — этот плагин объединяет Bootstrap 3 с синтаксисом Jade.
- jQuery Mobile — набор фрагментов для создания компонентов jQuery Mobile и макетов .
- HTML5 Boilerplate — этот фрагмент позволяет в мгновение ока создавать HTML5 Boilerplate документов .
18. Дополнительная поддержка синтаксиса
Языки, которые не поддерживаются в SublimeText, могут не отображаться с правильной подсветкой синтаксиса. Они включают LESS, Sass, SCSS, Stylus и Jade, поэтому, если вы работаете с этими языками, вот плагины для установки для поддержки синтаксиса.
Установка и настройка Sublime Text 3
Содержание
Обзор
Этот документ поможет вам установить и настроить текстовый редактор Sublime Text 3. для редактирования программ (например,g., C ++, Python, Ruby, Java, JavaScript, HTML и т. д.). Этот доступен для OS X, Windows и Linux.
Возвышенный текст не бесплатен. Вы можете использовать полнофункциональную пробную версию, если вы хотите, но всплывающее окно с сообщением о покупке будет отображаться после каждых нескольких сохранений. Регистрация стоит около 75 долларов. У нас есть зарегистрированные копии установлен на всех машинах в Mac Lab и в Центре для Вычисления в LSB 113 (офисами факультета CSC).
Есть много альтернатив.jEdit — это полностью бесплатный кроссплатформенный редактор. Вы также можете использовать встроенный редактор: в Windows есть Блокнот, в Mac есть TextEdit (хотя вам нужно обязательно переключить параметр форматирования в текстовый режим), а в Linux есть GEdit и тому подобное. В целом случаях убедитесь, что вы редактируете в текстовом формате, а не в формате RTF. Остальная часть этого документа относится к настройке Sublime Text, поэтому, если вы выберете и альтернативный текстовый редактор, вы можете игнорировать этот документ.
Установить Sublime Text
Загрузите и установите Sublime Text 3 здесь.Если у вас OSX <10.7, вам, вероятно, потребуется установить Sublime Text 2
Настроить Sublime Text
Sublime имеет множество приятных функций, главная из которых — простота установки. расширения, сделанные другими пользователями. В этом разделе вы узнаете, как настроить Возвышенный, позволяющий легко устанавливать расширения, а затем некоторые полезные плагины, которые вы должны установить.
Установка управления пакетами
Чтобы легко загружать и устанавливать плагины в Sublime, вам необходимо: сначала установите Package Control.Вот шаги:
- Посетить эту страницу и скопируйте текст в серое поле под «Sublime Text 3» (или «Sublime Text 2», если у вас установлена более старая версия)
- откройте Sublime Text и нажмите комбинацию клавиш
Ctrl
+`
(то есть удерживая элемент управления, нажмите кнопку обратного тика слева от 1 ключ) - на предыдущем шаге должно открыться текстовое поле внизу Sublime Text
и должен автоматически получить фокус; вставьте текст, который вы скопировали из
веб-сайт, нажав
Ctrl
+V
(Windows) илиКоманд
+В
(OSX) - хит
Введите
Строка состояния в самом низу Sublime Text должна показывать прогресс. установки.Это довольно быстро — не более нескольких секунд. Это это для установки Package Control.
Установить плагины
Чтобы установить любой плагин (перечисленные здесь, а также любой другой плагин, например), вы должны получить доступ к Менеджеру установки. Сделайте это:
- в Sublime нажмите комбинацию клавиш:
- Windows / Linux:
Ctrl
+Сдвиг
+P
- OSX:
Cmd
+Shift
+P
- Windows / Linux:
- при этом откроется всплывающее окно; начните вводить «установить»
- щелкните результат с надписью «Управление пакетами: установить пакет»
- появится новое всплывающее окно; начать вводить название пакета и выберите результат, соответствующий пакету, который вы пытаетесь установить
Вот список пакетов, которые я рекомендую установить:
- SublimeAStyleFormatter (код автоформатов)
- нажатие
Ctrl
+Alt
+F
будет автоматически форматировать код
- нажатие
- Терминал (открывает оболочку командной строки в каталоге текущего файла)
- нажатие
Cmd
+Shift
+T
в OSX откроется Терминал - нажатие
Ctrl
+Shift
+T
в Windows вызовет PowerShell (чтобы использовать ConEmu, см. примечание ниже)
- нажатие
Настройка подключаемого модуля терминала для использования ConEmu в Windows
По умолчанию плагин Terminal в Windows открывает PowerShell.Чтобы установить это чтобы открыть ConEMu, после установки Терминала вам необходимо сделать следующее:
- в Sublime Text, перейдите в «Настройки» → «Настройки пакета» → «Терминал» → «Настройки — По умолчанию»
- , который откроет ваш файл настроек как текстовый файл
- заменить текст следующим текстом:
{ "терминал": "C: \ Program Files \ ConEmu64.exe", "параметры": ["-Dir", "% CWD%"] }
Чтобы проверить, откройте файл в Sublime и нажмите
Ctrl
+ Shift
+ T
;
если ConEMu открывается (вместо PowerShell) и открывается в правильном каталоге,
все готово!
Чтобы вернуться к системным настройкам по умолчанию:
- в Sublime Text, перейдите в «Настройки» → «Настройки пакета» → «Терминал» → «Настройки — По умолчанию»
- , который откроет ваш файл настроек как текстовый файл
- заменить текст следующим текстом:
{ "Терминал": "", "параметры": [] }
Какие плагины Sublime Text 3 для веб-разработки самые лучшие?
Здесь я собираюсь продемонстрировать вам несколько классных плагинов для веб-разработчиков, позволяющих легко кодировать в Sublime Text 3.так что приступим сейчас.
Почему нам нужно устанавливать плагины в Sublime Text 3?
всякий раз, когда разработчику нужно писать код на возвышенном уровне, он думает о чем-то классном и красивом виде кода, и он / она может легко обнаружить ошибки и легко получить некоторые предложения по кодам. поэтому каждый должен знать о лучших плагинах для Sublime Text 3.
Всякий раз, когда вы открываете возвышенное, вид будет выглядеть так.
Sublime New Window ViewПрежде чем мы начнем о надстройках Sublime Text.мы должны обсудить его веб-сайт управления пакетами. где вы можете найти все плагины, связанные с возвышенным. поэтому веб-сайт управления пакетами Sublime выглядит следующим образом:
Теперь давайте начнем обсуждение плагинов Sublime и их установки.
- щелкните Инструменты меню
- щелкните Палитру команд .. [Ctrl + Shift + P]
- Поиск Управление пакетами: Установите и щелкните по нему.
- После этого вы автоматически получите весь список плагинов.
- Emmet
- SublimeLinter
- Sass
- Babel
- GhostText
- Git
- Terminal
- DocBlockr
- Emoji
Примечание: всякий раз, когда вы устанавливаете какие-либо плагины из палитры команд. результат установки будет показан в строке состояния.
Итак, друзья, вы также можете искать другие плагины и комментировать нас, которые вы используете в своем возвышенном, чтобы легко разрабатывать или изменять код на любом языке.
Поддержите нас, поделившись этим блогом со своими друзьями-разработчиками.
Старший инженер-программист в CotocusEmail — [email protected] Будьте разработчиком полного стека и стремитесь изучать новые технологии.
Знание: CSS, Bootstrap, Javascript, PHP, WordPress, Joomla, Moodle, Laravel, AJAX, Jquery, Java, Dart, Flutter, Photoshop, CorelDraw, Pagemaker
и пакет Office
возвышенный текст | Metals
Metals работает с Sublime Text 3 благодаря Плагины sublimelsp / LSP и scalameta / Metallic-Sublime.
Требования #
Java 8, 11, 17, предоставляемые OpenJDK или Oracle . Eclipse OpenJ9 не является
поддерживается, убедитесь, что переменная среды JAVA_HOME
указывает на допустимую установку Java 8, 11 или 17.
macOS, Linux или Windows . Metals разработан на многих операционных системах и каждый PR тестируется на Ubuntu, Windows и MacOS.
Scala 2.13, 2.12, 2.11 и Scala 3 . Metals поддерживает следующие версии Scala:
-
Scala 2.13 : 2.13.6, 2.13.5, 2.13.4, 2.13.3, 2.13.2, 2.13.1, 2.13.0
-
Scala 2.12 : 2.12.15, 2.12.14, 2.12.13, 2.12.12, 2.12.11, 2.12.10, 2.12.9, 2.12.8
-
Scala 2.11 : 2.11.12
-
Scala 3 : 3.1.1-RC1, 3.1.0, 3.0.2, 3.0.1, 3.0.0
Обратите внимание, что поддержка 2.11.x устарела и будет удалена в будущих выпусках. Рекомендуется обновить до Scala 2.12 или Scala 2.13
Установка плагинов #
Установите следующие пакеты:
-
sublimelsp / LSP: Поддержка протокола языкового сервера для Sublime Text.
Палитра команд (Cmd + Shift + P)> Установить пакет> LSP
-
scalameta / Metals-sublime: для автоматической установки металлов и пользовательских команд.
Палитра команд (Cmd + Shift + P)> Установить пакет> LSP-metal
Наконец, перезапустите возвышенный текст.
Затем откройте «Настройки> Привязка клавиш» и зарегистрируйте F12
для запуска goto
определение.
Импорт сборки #
Откройте Sublime в базовом каталоге вашего проекта Scala, и он предложит вам импортировать сборку, если вы используете один из поддерживаемых инструментов сборки.Нажмите «Импортировать сборку», чтобы начать установку.
При этом запускается языковой сервер Metal, но пока никакие функции работать не будут, потому что сборка не была импортирована.
Этот шаг может занять много времени, особенно при первом запуске в новом рабочая среда. Точное время зависит от сложности сборки и от того, кэшированы ли зависимости библиотеки или их необходимо загрузить. Например, этот шаг может занять от 10 секунд в небольших кэшированных сборках до 10-15 минут в больших некэшированных сборках.
Журналы сервера #
Для получения более подробной информации о том, что происходит за кулисами во время
sbt bloopInstall
run lsp переключить панель сервера
в палитре команд. При желании вы можете добавить привязку клавиш для этой команды.
После завершения шага импорта начинается компиляция для вашего открытого * .scala
файлы. После успешной компиляции источников вы можете перемещаться по
источники с «определением Goto», нажав F12
.
Поиск ссылок на символы #
Привязка клавиш по умолчанию — shift + F12
. Если вы используете vim-привязки, вам нужно быть
в режиме вставки.
Перейти к символу в рабочем пространстве #
Вы можете искать символы в своем источнике зависимостей с помощью палитры команд.
Запуск импорта сборки вручную #
При желании можно зарегистрировать привязку клавиш для команды.
Настройка Sublime Text для повышения производительности #
Этот абзац содержит несколько советов и приемов, которые могут улучшить вашу повседневную продуктивность с помощью Metals.
Дополнительные настройки клиента LSP #
Если вы предпочитаете включать только завершение металлов (не смешивая их со стандартными из Sublime) установите следующий параметр в «Предпочтения> Предпочтения: Настройки LSP»:
Также, если вы предпочитаете отображать ссылки на символы на быстрой панели Sublime, а не на нижней панели установите следующие настройки в «Предпочтения> Предпочтения: Настройки LSP»:
Дополнительные сопоставления клавиш #
Вы можете установить несколько дополнительных сопоставлений клавиш для включения ярлыков полезных действий и выполнить некоторые настройки для всплывающего окна завершения.
Раскладка клавиатуры для форматирования документа с помощью scalafmt #
Откройте «Настройки> Привязка клавиш» и зарегистрируйте ctrl + alt + l
для запуска форматирования документа.
определение.
Добавить сопоставление клавиш для символа Goto в рабочем пространстве #
Это необязательный шаг, если вы хотите иметь ярлык для поиска символов в рабочем пространстве. Откройте «Настройки> Привязка клавиш» и добавьте:
Включение автоматического импорта по завершении #
Металлы могут завершать символы из области вашего рабочего пространства и автоматически импортировать их.Однако по умолчанию, если вы нажмете «Enter» для выбора завершения, клиент LSP будет завершить класс, не импортируя его, но вы можете легко переназначить его, используя также клавишу «Enter». Откройте «Настройки> Привязка клавиш» и добавьте:
Использование последних металлов SNAPSHOT #
Обновите параметр «server_version», чтобы опробовать последние ожидающие обработки металлов.
функции, открыв Preferences> Package Settings> LSP> Servers> LSP-Metallic
Версия | Опубликована |
---|---|
0.10,8 | 26 октября 2021 г. 10:46 |
0.10.8 + 17-0ddc2b2e-SNAPSHOT | 29 октября 2021 г. 18:25 |
Файлы и каталоги для включения в ваш Gitignore #
Место на сервере Metals журналы и другие файлы в каталоге .metals
. В
Сервер компиляции Bloop помещает журналы и артефакты компиляции в .bloop
.
каталог. Плагин Bloop, который генерирует конфигурацию Bloop, добавлен в
Metals.sbt
файл, который добавлен в project / metal.sbt
и далее
проект
каталогов в зависимости от того, насколько глубокими должны поддерживаться файлы * .sbt
.
Для поддержки каждого файла * .sbt
Metals необходимо создать дополнительный файл на
./project/project/metals.sbt
относительно файла sbt.
При работе со сценариями Ammonite скомпилированные сценарии помещаются в каталог .ammonite
.
Рекомендуется исключить эти каталоги и файлы
из систем контроля версий, таких как git.
Рабочие листы #
Рабочие листы — отличный способ изучить API, опробовать идею или код. пример и быстро просмотреть вычисленное выражение или результат.Позади рабочие листы сцен основаны на большой работе, проделанной в mdoc.
Начало работы с рабочими таблицами #
Чтобы начать работу с рабочими таблицами, вы можете использовать файл Metals.new-scala-file
и выберите Рабочий лист или создайте файл с именем * .worksheet.sc
.
Этот формат важен, поскольку именно он сообщает Metals, что он должен быть
рассматривается как рабочий лист, а не только как скрипт Scala. Где вы создаете
сценарий тоже имеет значение. Если вы хотите использовать классы и значения из вашего
проект, вам необходимо убедиться, что рабочий лист создан внутри вашего src
каталог.Вы все еще можете создать рабочий лист в других местах, но вы
иметь доступ только к стандартной библиотеке и вашим зависимостям.
Evaluations #
После сохранения вы увидите результат выражения в виде комментария в конце строки. Вы можете не увидеть полный результат, например, если он слишком длинный, поэтому вы также может навести курсор на комментарий, чтобы развернуть его.
Имейте в виду, что вам не нужно заключать код в объект
. В листах
все можно оценить на высшем уровне.
Использование зависимостей в рабочих листах #
Вы можете включить внешнюю зависимость в свой рабочий лист, включив это одним из следующих двух способов.
::
совпадает с %%
в sbt, который добавит текущую двоичную версию Scala
к имени артефакта.
Вы также можете импортировать опций scalac
в специальном импорте $ scalac
, как показано ниже:
Подключаемые модули и пакеты Sublime Text, которые вы должны проверить
Все разработчики создают свой собственный набор инструментов для работы с различными проектами.Инструменты, которые использует веб-разработчик, могут сократить время, необходимое для создания веб-сайта или веб-приложения, и могут облегчить выполнение задач.
Интеллектуальные инструменты необходимы для каждого успешного рабочего процесса разработчика, поэтому, если вы хотите расширить свой инструментарий с помощью совершенно нового набора уловок, рекомендуется внимательно прочитать эту статью от начала до конца.
Нет недостатка в редакторах кода, которые упростят вашу работу. Выбор между ними становится намного сложнее, когда вас ждет так много вариантов.
Таким образом, мы представим один вариант, который стоит выше остальных: Sublime Text. Это один из наиболее широко используемых редакторов кода на рынке, и его предпочитают тысячи программистов, веб-разработчиков и веб-дизайнеров.
Что впечатляет в Sublime Text, так это его гибкость. Вы можете легко расширить редактор кода, используя плагины Sublime Text, созданные почти для всех мыслимых целей. И вы даже можете создавать собственные пакеты, которые заметно улучшат ваш рабочий процесс и повысят вашу продуктивность.
Продолжайте читать в этой статье, созданной нашей командой в wpDataTables, и узнайте о некоторых из лучших пакетов Sublime Text, о том, как они работают и как вы можете их использовать.
ПлагиныSublime Text: установка пакетов
Прежде чем перечислять плагины Sublime Text, которые мы считаем актуальными для всех веб-дизайнеров, вы должны узнать, как устанавливать пакеты в этом редакторе кода. Вот шаги, которые вам необходимо выполнить:
- Загрузите zip-файл репозитория пакетов.Вы можете сделать это на странице пакета GitHub.
- Извлеките файлы в папку Sublime Text Packages. Вы должны найти его в: {{имя пользователя}} \ AppData \ Roaming \ Sublime Text {{версия}} \ Packages \
или
- Установите пакет с помощью официального элемента управления пакетами Sublime Text. Щелкните ссылку и скопируйте код, который подходит для вашей версии Sublime Text.
- Вставьте код в консоль Sublime Text, к которой вы можете получить доступ, нажав CTRL + ~.
- Перезапустите редактор кода, откройте командное окно, нажав CTRL + Shift + P, и введите «Package Control: Install Package» (или просто «Install Package» — автозаполнение покажет нужные параметры)
После установки пакета не вносите никаких изменений в его файл конфигурации по умолчанию, если вы точно не знаете, что делаете. Пакеты Sublime Text в основном предназначены для настройки с использованием отдельных файлов переопределения, чтобы ваши изменения не были потеряны при обновлении пакетов.
Плагины для возвышенного текста, которые должны попробовать все веб-разработчики
Говоря о расширяемости редактора кода, было бы полезно перечислить несколько лучших плагинов Sublime Text и то, как они могут помочь вам стать лучшим разработчиком в кратчайшие сроки.
Надеюсь, вы найдете эти плагины полезными и актуальными для вашей работы. Вот список:
Управление пакетами
Sublime Text Package Control — вероятно, самый популярный инструмент, доступный для этого редактора кода.Он позволяет загружать, устанавливать и обновлять пакеты прямо из интерфейса Sublime Text.
Хотя «плагин» и «пакет» часто используются как взаимозаменяемые, пакеты включают в себя плагины, меню, фрагменты и другие элементы, которые можно использовать для расширения Sublime Text по своему вкусу.
Вместо того, чтобы загружать файлы пакетов самостоятельно и устанавливать их в нужную папку, пусть этот плагин сделает все за вас, не выходя из Sublime Text. Если вы программист, подумайте об этом как о pip для Python или npm для node.js.
Выравнивание
Alignment делает именно то, о чем говорит его название: это один из тех плагинов Sublime Text, которые упрощают вашу работу в 10 раз, выравнивая ваш код, чтобы сделать его более аккуратным и легким для чтения. Он отлично работает с PHP, JavaScript, CSS и другими.
Вы можете выравнивать разделы, многострочные выделения или весь код с помощью разделителей, таких как «=». Даже если вы думаете, что это не очень помогает, как только вы начнете использовать его, вы станете зависимым от того, насколько он полезен.
Эммет
Среди наиболее часто используемых плагинов Sublime Text — Emmet, простой плагин, который может повысить продуктивность любого разработчика, помогая с его рабочим процессом CSS и HTML.
Например, если вы напишете html: 5 и нажмете CTRL + E при использовании Emmet, вы получите доступ к базовому шаблону страницы HTML5 для работы. Плагин прост, но чрезвычайно эффективен и определенно улучшит вашу работу.
ИзменитьЦитаты
Вы ненавидите работу с цитатами? Поздравляю, вы один из миллионов разработчиков, которым также нелегко поддерживать их согласованность.ChangeQuotes вам поможет.
Он может легко преобразовывать одинарные / двойные кавычки и повторно экранировать их. Если вы хотите изменить кавычки, поместите курсор внутри цитируемого текста и откройте палитру команд. Запустите плагин, и вам больше не нужно выделять всю строку для изменения кавычек. Так намного быстрее!
Усовершенствования боковой панели
Этот плагин Sublime Text добавит некоторые новые функции в меню боковой панели. Например, вы можете создать новый файл намного быстрее, оставаясь в папке текущего проекта.Вы также можете легко перемещать файлы и папки, дублировать их по мере необходимости и открывать файлы в Finder или в браузере.
SublimeEnhancements добавляет множество полезных функций боковой панели, которые помогут вам более эффективно управлять своим проектом. Установите его, чтобы открыть для себя все полезные функции.
SublimeLinter
Если вы пользователь Sublime Text 3, вам понравится SublimeLinter. Не многие плагины Sublime Text были обновлены для последней версии редактора, поэтому всегда приятно видеть, что разработчики плагинов сосредоточены на обновлении своих продуктов.Вместо того, чтобы иметь все ваши линтеры в одном пакете, этот плагин позволяет вам устанавливать те, которые вы используете регулярно.
По сути, SublimeLinter дает вам основу для линтинга кода. Если вы не знаете, линтинг представляет собой процесс отметки непереносимого или неправильного синтаксиса в вашем коде. Проще говоря, он предупреждает вас, когда код загроможден ошибками.
SublimeGit
Работа с ПО для контроля версий — обычное дело для разработчиков.Самый популярный — Git. Для тех, кто устал сохранять текстовые файлы и возвращаться к терминалу для выполнения пары команд Git, SublimeGit будет ответом. Этот плагин Sublime Text позволяет выполнять все ваши команды Git в текстовом редакторе.
Используя SublimeGit, разработчики могут делать больше за меньшее время, тем самым значительно повышая свою продуктивность. Вам не придется переключаться между редактором кода и командной строкой.
Раньше он был доступен только как платный плагин, но в прошлом году он стал с открытым исходным кодом.Он имеет множество функций, которые вы найдете полезными, а также документацию SublimeGit, которая поможет вам понять и использовать плагин.
GitGutter
Вы всегда можете запускать команды Git в самом Sublime Text, но это не самый быстрый способ справиться с этой задачей. Sublime Text заставляет вас запускать отдельную команду вместо того, чтобы просматривать изменения в реальном времени. Что ж, здесь на помощь приходит GitGutter.
GitGutter похож на Atom с некоторых точек зрения.Он добавляет те же типы функций в Sublime Text, а это означает, что вы можете начать добавлять подсказки различий в поле боковой панели. Наведя курсор на индикаторы боковой панели, вы получаете доступ к очень удобным всплывающим окнам с различиями.
SASS
Выделение имеет первостепенное значение для быстрого обнаружения ошибок и ошибок. Для разработчиков быстрое и эффективное исправление ошибок является абсолютной необходимостью. SASS поможет вам в этом. Он выделяет синтаксис SASS и SCSS и поможет любому разработчику CSS, использующему эти языки расширения.
GitHubinator
Те, кто использует репозитории GitHub / Bitbucket, должны попробовать GitHubinator. Этот плагин показывает выделенный текст в удаленном репозитории. Таким образом, текст, который вы ищете, выделяется, и вы можете просто щелкнуть контекстное меню, чтобы запустить соответствующую веб-страницу в браузере.
Как и в случае других плагинов Sublime Text, перечисленных здесь, GitHubinator помогает разработчикам экономить время и избегать повторяющихся действий.
GitOpenChangedFiles
Как видите, этот плагин используется для открытия измененных файлов из репозитория Git.Вам просто нужно установить его и запустить плагин, чтобы открывать файлы, которые вы ранее изменили в своей ветке Sublime Text.
Это небольшой плагин, но тем, кому нужна эта функция, она действительно пригодится.
Терминал
Вы знаете, сколько времени занимает процесс открытия папок проекта с помощью Sublime Text. Терминал позволяет открывать папки прямо из Sublime Text на платформе с помощью одной горячей клавиши. Разве это не удобно?
При выполнении командных строк в заданной папке вам необходимо выполнить несколько этапов, которые отнимают много времени и довольно утомительны.Терминал сокращает эти шаги до сочетания клавиш CTRL + SHIFT + T.
SublimeREPL
Использование SublimeREPL упростит работу программиста в 10 раз. Этот плагин позволяет запускать интерпретаторы наиболее распространенных языков, включая NodeJS, Python, Ruby, Scala или Haskell.
Вы можете запустить интерпретатор на любом из этих и других языков прямо из Sublime Text. Взгляните на другие функции плагина, чтобы лучше понять, что он может делать.
Вавилон
Если вам нужны определения языков для ES6 + Javascript, вам следует использовать Babel. Не многие плагины Sublime Text предлагают хорошие языковые определения, особенно для последней версии. Babel специально создан для Sublime Text 3 и не поддерживает более ранние версии. Он также поддерживает синтаксис React JSX.
AllAutocomplete
По умолчанию Sublime Text использует опцию автозаполнения только для слов, которые присутствуют в текущем файле.Чтобы распространить эту функциональность на все открытые файлы, вы можете использовать AllAutocomplete, плагин, который выполняет поиск в каждом открытом вами файле и находит совпадения, а также предлагает слова.
CSSComb
CSSComb сортирует свойства CSS, чтобы ваш код стал чище и удобнее для чтения. Он размещает код в правильном порядке и позволяет без особых проблем настраивать его свойства. Это полезный плагин для тех, кто работает в командах, где не все участники пишут код одинаково.
MarkdownПредварительный просмотр
Многие разработчики привыкли создавать файлы Markdown в GitHub, StackEdit или Markable в облаке. Если вы писатель старой школы и предпочитаете хранить файлы локально, вам следует попробовать MarkdownPreview.
Вы также можете установить MarkdownEditing и выделить свой код Markdown.
DocBlockr
В некоторых компаниях все правила кодирования должны строго соблюдаться. Это может давить на плечи разработчиков.DocBlockr упрощает задачу, создавая комментарии для вашего кода, анализируя функции, переменные или параметры и автоматически добавляя базовые элементы.
Вам нужно будет только ввести / **, и плагин сделает всю работу за вас.
Материализованные фрагменты CSS
MaterializeCSSisa запоминающийся интерфейсный фреймворк, созданный Google. Он современный, полностью адаптивный и готов к использованию всеми дизайнерами и разработчиками. Этот плагин Sublime Text поможет вам использовать Materialize CSS в текстовом редакторе с использованием общих фрагментов.
Materialized CSS Snippets добавляет компоненты CSS непосредственно в редактор кода, поэтому вы можете получить к ним доступ с помощью основных команд. Материализованные фрагменты CSS могут сэкономить массу времени и энергии, которые обычно уходят на ввод синтаксиса вручную и добавление компонентов CSS отдельно.
Стандартный формат
Без форматирования ваш код будет выглядеть запутанным и трудным для обработки. StandardFormat позволяет вам создавать гораздо более надежную кодовую базу, помогая людям читать ваш код быстрее и эффективнее, когда им нужно.
Плагин основан на библиотеке Standard Format JS, которая будет применяться к тому, что вы пишете. Все знают, как читать традиционный формат JS, поэтому этот плагин оказывается весьма полезным для разработчиков.
Фрагменты запросов мультимедиа CSS
Медиа-запросы используются для разработки приложений и программного обеспечения для мобильных устройств или масштабируемых размеров экрана. Без этих запросов вы не сможете превратить свой проект в мобильный.
CSS Media Query Snippets призван помочь вам с этой задачей, предлагая заранее написанные шаблоны для медиа-запросов.Вы можете просто использовать шаблон для внесения изменений.
Шелл Exec
Все мы знаем, что доступ к оболочке — спорная тема из-за небезопасных конфигураций, которые серверы использовали в прошлом. Падение хакеров было гораздо более распространенным явлением, когда к командам Shell Exec можно было получить доступ извне, что открывало уязвимости в платформе.
Этот плагин помогает запускать команды оболочки внутри Sublime Text 3, учитывая, что Интернет сейчас намного безопаснее.Это хороший способ сэкономить время, но не забудьте настроить параметры брандмауэра и выяснить схемы доступа, чтобы избежать вышеупомянутой ситуации.
Laravel BladeHighlighter
Laravel — это фреймворк с открытым исходным кодом для PHP, который заметно повлиял на разработку PHP. Laravel использует Blade Engine, синтаксис, который позволяет разрабатывать новое программное обеспечение поверх фреймворка.
Sublime Text не был бы таким же без Laravel Blade Highlighter, если вы используете Laravel ежедневно.Этот плагин, который установили более 300 000 раз, не должен пропустить ни один разработчик PHP.
Завершение мыслей об этих плагинах Sublime Text
Sublime Text сам по себе достаточно силен, но плагины и пакеты делают его еще более мощным. Самым большим преимуществом этих плагинов является экономия вашего времени, помогая вам настроить Sublime Text в соответствии с вашими потребностями, требованиями и повседневными задачами.
Каждый разработчик предпочитает определенную процедуру кодирования, и вы можете поддерживать ее, выбирая плагины Sublime Text, которые лучше всего подходят для вашей ситуации.Выберите те, которые подходят для вашего образа работы и вашей работы. Это сделает все более эффективным и займет меньше времени.
Удачи в выполнении задач по кодированию!
Если вам понравилось читать эту статью о плагинах Sublime Text, вам стоит проверить эту статью о темах Sublime Text.
Мы также писали о нескольких связанных темах, например о лучших пакетах Atom и о том, как стать фронтенд-разработчиком.
.