Sublime text 3 emmet нет в списке

Обновлено: 06.07.2024

При постоянном наборе одних и тех же тегов html и правил css невольно задумываешься можно ли ускорить данный рутинный процесс.

Сегодня мы рассмотрим расширение emmet для популярных редакторов и сред разработки, которое помогает существенно ускорить верстку сайтов. По своей сути emmet это набор сокращений которым соответствуют css правила и html разметка.

Установка emmet для редактора Sublime text

Первый способ

Нажимаем ctrl+shift+p и пишем команду Packege Control: Install Package
Вводим название плагина Emmet

Второй способ

В редакторе переходим в консоль View -> Show console и добавляем следующий код:

После чего нажимаем ввод

Установка emmet для редактора PhpStorm

В данную среду разработки уже включён плагин emmet. Чтобы это проверить достаточно набрать какое-либо сокращение emmet и нажать tab

Основные сокращения emmet

Сокращения для html:

! Сокращение для вывода структуры html документа

meta:vp вывод viewport

a Вывод ссылки

link:css Подключение таблицы стилей

link:favicon Вывод фавикона

script:src Добавление js кода

form:post

inp

select+

tarea

art

c Комментарий

btn:s Вывод кнопки

hdr тег header

ftr тег footer

ol+ Нумерованный список

table+ Вывод таблицы

Правила emmet

div>ul>li Описание вложенности элементов

div+p Создание нескольких равнозначных элементов

div>p>span^a Элемент на уровень выше

header>(ul>li)+div Объединить в один элемент

a*3 Вывести несколько элементов

div.block_$*2 Класс с номером

.block1 Вывод текста

Сокращения для css:

p10 padding: 10px;

pt20 padding-top: 20px;

w20 width: 20px;

wa width: auto;

h20 height: 20px;

mah20 max-height: 20px;

mh20 min-height: 20px;

maw20 max-width: 20px;

mw20 min-width: 20px;

bgt background-color: transparent

bgi background-image:url();

В этой статье я расскажу о том как установить плагин Emmet в Sublime Text 3, который помогает ускорить написание кода на HTML.

Каждый верстальщик знает, что скорость работы это важное составляющее в любом проекте. Плагин Emmet работает очень просто, вот пример. Чтобы создать блок div с классом allDiv, достаточно ввести div.allDiv и жмем кнопку “Tab”.

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

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

Чтобы установить плагин Emmet, переходи в Sublime Text и выполняем все описанные ниже шаги.

1. Нажимаем сочетание клавиш “Ctrl+Shift+p”, появится окно в которое вводим “Package Control”.

2. В появившемся списке выбираем “Package Control: Install Package” и ждем появления списка.

3. В поле вводим “Emmet” и жмем и выбираем первую вкладку как на картинке.

4. Откроется новый файл и это значит что все успешно установилось, его можно закрыть.

5. Проверяем работу, для этого вводим в файл “!” и жмем кнопку “Tab”. Если появилась разметка, значит все установилось успешно.

Все действия происходят в русской версии Sublime Text, если вы хотите так-же перевести на Русский Язык, смотрите эту статью в которой за 1 минуту вы сможете поменять язык.

Я ранее использовал пакет JSX Аллана Хортла пока я не столкнулся с проблемой с тем, как он обрабатывал подсветку синтаксиса. Я тогда заметил, что есть официальный пакет,sublime-react.

С пакетом Аллана Хортла он включил фрагмент в Preferences > Key Bindings – User для включения функции Emmet, которая выглядит следующим образом:

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

если ты типа shift+super+p в файле, это позволит вам увидеть контекст текущего выбора в левом нижнем углу.

первое слово всегда является базовым типом файла. ( source.js , text.html ) по делу JSX я решил изменить это source.js.jsx . Это связано с тем, что до компиляции JSX действительно не является javascript, хотя он выглядит довольно похожим. Есть много завершений и возвышенного сахара, которые вы хотели бы иметь в JSX, но не JS. sublime-react С другой стороны использует старый добрый source.js .

так что этот фрагмент у вас есть право вам просто нужно заменить source.js.jsx С source.js

В Апреле 2015 Года Эммет добавил поддержку jsx, но он не работает по умолчанию. Ну, для моего удивления это было на самом деле работает с control + E ярлык, но я хотел использовать TAB ключ к расширению. Следуя за должностные инструкции сделал трюк для меня.

в принципе, мне пришлось вставить следующее в мой файл привязки ключей пользователя ( Preferences > Key Bindings — User ):

это код без всех комментариев, а с помощью правильно SCOPE_SELECTOR на месте.

С JSX-SublimeText Package readme:

по умолчанию Emmet не поддерживает файлы JS. Таким образом, вам нужно будет добавить сочетание клавиш для tab complete в файлах JSX.

открыть Preferences > Key Bindings - user и добавить эту запись:

просто расширяя этот ответ.
Возможно, вы не хотите, чтобы все письма, которые вы пишете, были расширяемыми в html. Вы можете установить еще один дополнительный объект в своем контексте, чтобы ограничить, когда применяется завершение вкладки. Этот код был найден в в этом суть однако я изменил регулярное выражение, чтобы быть немного лучше.

вам также нужно будет установить пакеты RegReplace и Chain of Command, как рекомендовано в gist, чтобы даже получить span.class превращаются в <span className="class"></span>
Если вы хотите добавить больше элементов для прослушивания, просто добавьте их в список, т. е. (a\b|div|span|p\b|button|strong)
Элемент \b ссылается на границу слова и останавливает следующее от расширения abc на <abc></abc>

просто использовать ctrl+e ( cmd+e на mac) вместо вкладки, чтобы заставить Эммет работать внутри вашего jsx. например, если я расширяю (используя ctrl+e )

затем я получаю

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

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

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

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

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

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

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

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

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

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

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

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

Brackethighlighter

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

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

Color Highlighter

Gotocss Declaration

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

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

Читайте также: