Sublime text как установить плагин

Sublime text как установить плагин

Обновляем страницу браузера автоматически при редактировании файлов на локальном сервере с помощью Sublime Text 4

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

В данной статье рассмотрим очень популярный плагин у верстальщиков, который ускоряет рабочий процесс — LiveReload. При сохранении в редакторе SublimeText, код на странице проекта будет обновляться автоматически, но при этом сама страница в браузере не будет обновляться.

Приступим к настройке.

1. Настройки браузера Google Chrome

Открываем браузер Google Chrome (в статье рассматриваю только данный браузер, т.к. другими не пользуюсь), переходим в «Меню» (троеточие сверху справа) — «Дополнительные инструменты» — «Расширения»:

Переходим в «каталог расширений» по ссылке «Открыть Интернет-магазин Chrome»:

В поисковой строке вводим запрос на поиск «LiveReload» и переходим на страницу плагина, щелкнув по заголовку:

Щелкаем «Установить»:

В появившемся всплывающем окне «Установить расширение». На этом завершаем настройку браузера и переходим к настройке редактора Sublime Text 4.

2. Настройка редактора Sublime Text 4

Щелкаем кнопки на клавиатуре «Ctrl + Shift + P», вызываем окно списка функций. В этом окне можно найти, скачать и установить функции, плагины для редактора и т.д.

В строке поиска пишем « Package Control », выбираем вариант «Package Control: Install Pakage», а затем ищем плагин «LiveReload», устанавливаем:

Далее переходим в «Preferences» — «Package Settings» — «LiveReload» — «Settings — User» и вставляем следующий код:

Теперь не нужно при каждом запуске Sublime Text включать LiveReload.

Финальным шагом, в браузере Google Chrome нажимаем на значок в правом верхнем углу «LiveReload» для синхронизации с Sublime Text.

Плагины для Sublime Text 3

Друзья! Я бы хотела поделиться минимальным необходимым списком плагинов для Sublime Text 3.

Для того, чтобы устанавливать плагины для Sublime Text 3, нужно сначала установить Package Control, если он у вас еще не установлен. Для этого нужно использовать вот эту инструкцию .

Далее в Sublime переходим Preferences – Package Control. Во всплывающем окне вводим Install Package. Это нужно проделывать каждый раз, когда вы хотите установить какие-либо плагины.

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

Следующий плагин, который нам необходимо установить – AutoFileName. Он нужен для того, чтобы помогать прописывать путь к файлам. Например, если мы в html-файле пропишем , то при установке курсора на атрибут src плагин автоматически откроет список файлов и папок в той директории, в которой хранится файл html. Это очень удобно и позволяет не ошибаться в написании имени и пути к файлу.

Не стоит оставлять без внимания плагин AllAutoComplete. Он помогает нам при указании нового класса или идентификатора воспользоваться теми классами или идентификаторами, которые уже использовались ранее. Причем не только в том документе, который открыт сейчас, а еще и в тех документах, которые привязаны к этому документу.

Также хотелось обратить внимание на плагин BracketHighlighter. Он подсвечивает начало или конец тех тегов, которые мы выделяем. При большом количестве кода это незаменимо. Вы никогда не ошибетесь, какой div вы нажали.

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

Быстрая настройка 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 и т.д.

Установка внешнего оформления 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 вручную, скачайте его и распакуйте в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

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

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

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

Keymap (Windows Users): [ < "keys": ["alt+shift+f"], "command": "reindent" >, ] Settings: < "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", >

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

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

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

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

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

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

«C:\Users\\AppData\Roaming\Sublime Text 3»
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

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

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

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

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

Я — фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

• Настройка VS Code для верстки
• Simple Starter — простой стартер для верстки | Материалы урока
• Делаем вкладки в проводнике Windows. Настройка QTTabBar от А до Я
• Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
• Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
• Актуальный способ установки и настройки окружения Windows WSL для веб-разработки

Как установит плагин Tag в sublime text 3?

Уважаемые помогите разобраться. При установке других плагинов вопросов нет (emmet и д.р.) но когда пишу Tag после того как sublime text 3 подключился к репозиторию в строке где вбивают название плагина такого нет хотя перечень большой из других.Может в ручную можно установить с гит хаба (github.com/sublimetext/tag) тогда объясните как сделать это.

• Вопрос задан более трёх лет назад
• 11338 просмотров

Комментировать
Решения вопроса 1

Software Engineer
ну там же написано github.com/sublimetext/tag

Download or clone the contents of this repository to a folder named exactly as the package name into the Packages/ folder of ST.

скачайте или склонируйте содержимое из этого репозитория в папку с названием пакета в дерикторию Packages саблайм текста

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 3
petrovich1975 @petrovich1975 Автор вопроса

Плагин может:
— Get CSS Classes(Копирует все классы из файла HTML в буфер обмена)
— Rename(Переназывает выделеный тег)
— Close Tag(Закрывает незакрытые теги)
— Fold Attributes
— Insert as Tag
— Lint Selection or Document
— Auto-Format Tags on Document(Форматирует выделенный код)
— Remove All Tags in Document(Удаляет все теги из файла оставляя только текст)
— Remove All Tags in Selection(Удаляет все теги из выделеного фрагмента)
— Remove Picked Tags in Document(Удаляет выбранные теги из файла)
— Remove Picked Tags in Selection(Удаляет выбранные теги из выделеного фрагмента)
— и другие.
я тоже там смотрел.Есть видео на ютюбе : Sublime Text — установка плагина Tag. Использование плагина Tag там все устанавливается обычно.