Как установить плагин emmet в блокноте

Обновлено: 01.07.2024

Вы можете установить последнюю версию Emmet вручную из консоли:

Затем перезапустите редактор Atom.

Особенности:

  • Раскрывайте аббревиатуры с помощью клавиши Tab.
  • Поддержка нескольких курсоров: большинство действий Emmet, таких как "Развернуть аббревиатуру", "Перенести аббревиатуру", "Обновить тег", могут выполняться в режиме с несколькими курсорами.
  • Интерактивные действия (Интерактивное расширение аббревиатуры, Обтекание аббревиатурой, Обновить тег) позволяют просматривать результат в режиме реального времени по мере ввода.
  • Улучшенные позиции табуляции в сгенерированном контенте: когда аббревиатура расширяется, нажимайте клавишу Tab, чтобы быстро перемещаться между важными точками кода.
  • Ядро Emmet v1.1.

Сообщайте о любых проблемах в системе отслеживания проблем.

Клавиша Tab

В настоящее время Emmet расширяет сокращения с помощью клавиши Tab только для синтаксисов HTML, CSS, Sass/SCSS и LESS. Область действия обработчика вкладок ограничена, поскольку он переопределяет фрагменты кода по умолчанию.

Если вы хотите, чтобы Emmet расширял аббревиатуры с помощью клавиши Tab для других синтаксисов, вы можете сделать следующее:

  1. Используйте пункт меню Open Your Keymap, чтобы открыть собственный файл keymap.cson.
  2. Добавьте в него следующий раздел:

Замените YOUR GRAMMAR HERE фактическим значением атрибута грамматики. Самый простой способ получить имя грамматики открытого в данный момент редактора — открыть DevTools и найти соответствующий элемент: он будет содержать атрибут data-grammar с нужным вам значением. Например, для синтаксиса HTML это текстовый html basic .

Вы можете добавить любое количество разделов для разных синтаксисов. Обратите внимание, что фрагменты кода по умолчанию больше не будут работать, но вы можете добавить свои собственные фрагменты в Emmet.

Сочетания клавиш по умолчанию

Вы можете изменить их в разделе «Настройки» > «Привязки клавиш».

< td>Расширить аббревиатуру < tr>< td>Отразить значение CSS
Command Darwin Linux/Windows
tab или shift + ⌘ + e tab или ctrl + e
Раскрыть аббревиатуру (интерактивно)< /td> alt + ⌘ + enter ctrl + alt + enter
Обтекание аббревиатурой ctrl + w ctrl + alt + w
Баланс (наружу) ctrl + d ctrl + shift + e
Баланс (внутрь) alt + d ctrl + shift + 0
Перейти к соответствующей паре ctrl + alt + j ctrl + alt + j
Следующее редактирование Точка ctrl + → ctrl + alt + →
Предыдущая точка редактирования ctrl + ← ctrl + alt + ←
Выбрать следующий элемент ctrl + shift + → ctrl + shift + .
Выбрать предыдущий элемент ctrl + shift + ← ctrl + shift +,
Переключить комментарий ⌘ + /< /td> ctrl + shift + /
Разделить/объединить тег shift + ⌘ + j ctrl + shift + `
Удалить тег ⌘ + ' ctrl + shift + ;
Вычислить математическое выражение shift + ⌘ + y ctrl + shift + y
Увеличить число на 0,1 ctrl + alt + ↑ alt + ↑
Уменьшить число на 0,1 ctrl + alt + ↓ alt + ↓
Увеличить число на 1 ctrl + alt + ⌘ + ↑ ctrl + ↑
Уменьшить число на 1 ctrl + alt + ⌘ + ↓ ctrl + ↓
Увеличить число на 10 ctrl + alt + ⌘ + shift + ↑ shift + alt + ↑
Уменьшить число на 10 ctrl + alt + ⌘ + shift + ↓ shift + alt + ↓
shift + ⌘ + r ctrl + shift + r
Обновить размер изображения ctrl + i ctrl + u
E ncode/Decode image to data:URL ctrl + shift + i ctrl + '
Обновить тег ctrl + shift + u ctrl + shift + '
Объединить строки shift + ⌘ + m ctrl + shift + m

Все действия и их сочетания клавиш доступны в разделе "Пакеты" > пункт меню Emmet.

Поддержка расширений

Вы можете легко расширить Emmet новыми действиями и фильтрами или настроить существующие. В «Настройки» > «Emmet» установите путь «Расширения» к папке с расширениями Emmet. По умолчанию это ~/emmet , например emmet в вашей системной папке HOME.

Я думаю, что этот пакет - плохие новости.

Хороший улов. Сообщите нам, что в этом пакете кажется вам неправильным, и мы немедленно займемся расследованием.

После того, как я скачал Notepad++, я установил Plugin Manager и попытался установить Emmet. После этого я увидел только "Установка Эммета не удалась". Я пробовал все. Установите разные версии Notepad++ (включая x86) и Python Script. Пытался установить вручную. Ничего не помогло.

Как установить Emmet на Nodepad++?

UPD: я удалил все из APPDATA и использовал "Программы и компоненты" для удаления Notepad++

3 ответа 3

Emmet не отображается в окне диспетчера подключаемых модулей Notepad++. Возможно, он устарел или больше не совместим. В любом случае, если вы устанавливаете Emmet вручную и по-прежнему не видите подключаемый модуль, выполните следующие действия:

  • Откройте Notepad++ и установите подключаемый модуль Python Script (доступен в диспетчере подключаемых модулей)
  • Затем откройте папку с плагинами в меню «Плагины» и извлеките файл emmet-npp.zip в папку plugins.

Примечание. Если это не работает, вам может потребоваться переместить файл EmmetNPP.dll в папку EmmetNPP.

Теперь перезапустите Notepad++, и вы должны увидеть плагин Emmet в меню плагинов.

Windows 10 не может безопасно загрузить ZIP-файл. Он читает файл может быть опасным. Даже если скачаю, не могу разархивировать по той же причине. Есть мысли?

Emmet устанавливается в Notepad++ с помощью диспетчера подключаемых модулей (полные инструкции можно найти в репозитории Emmet для Notepad++ на GitHub). Если вы установили чистый Notepad++ (последняя версия) и установили диспетчер подключаемых модулей Notepad++, используйте команду меню «Плагины» > «Диспетчер подключаемых модулей» > «Показать диспетчер подключаемых модулей» и найдите и установите подключаемый модуль «Emmet».

Если это не работает для вас, первое, что я бы сделал, это удалил Notepad++ и все расширения/модификации, которые вы добавили к нему, и начал заново:

  1. Установите Notepad++
  2. Установите диспетчер подключаемых модулей Nodepad++
  3. Установите Emmet из меню диспетчера подключаемых модулей.

Я уже сделал все, о чем вы написали. Когда я пытаюсь установить Emmet, у меня появляется сообщение об ошибке. Но спасибо за попытку помочь

notepad++, Baidu рекомендовать это очень полезно. notepad++ является открытым исходным кодом, никто не может беспокоиться об использовании проблем в процессе.

Установить подключаемый модуль Emmet, как правило, также относительно просто, установить загруженные файлы в каталог notepad++ ниже, чем подключаемые модули. Так что плагин Emmet, даже если он установлен, заново откройте блокнот++, под плагином его можно увидеть. Конечно, даже если вы его видите, он не работает, когда вы хотите его использовать. Затем вам нужно установить скрипт Python.

Установите Python Script, он самый хлопотный, ключевой момент, я прошел много обходных путей, чтобы успешно установить. Сначала я думал поставить плагин прямо под плагинами. Но когда я запустил notepad++, я обнаружил ошибку. Меня это угнетает, ощущение, что я добьюсь успеха. Начну с сути.

Один из загруженных файлов — pythonscript_1.0.8.0.msi (удобнее прямо нажать «Установить в каталог установки Блокнота») в этом формате. На этот раз вам нужно разархивировать (щелчок правой кнопкой мыши Распаковать в текущую папку, все в порядке), извлечь папку, как показано на рисунке. Что нам нужно, так это Pythonscript внутри этой папки. Четыре файла в красной рамке находятся в центре внимания, остальные можно игнорировать.

Затем скопируйте файл Python27.dll в корневой каталог установочного каталога notepad++.

Наконец поместите остальные три файла в папку Plugins.

Наконец, снова откройте программное обеспечение, после установки Emmet настоятельно рекомендуется изменить аббревиатуру Expand на клавишу TAB. Откройте Настройки Notepad++ > Управление сочетаниями клавиш. диалоговом окне, переключитесь на команды плагина, установите флажок Развернуть аббревиатуру и измените его сочетание клавиш на вкладку.

Final final Test открывает файл HTML или CSS, который создается путем написания инструкций по грамматике, нажатием клавиши TAB. Например: Ul>li*5, после нажатия клавиши TAB тормоз генерирует 5 li. КОНЕЦ Соображения Процесс установки скрипта Python особенно важен, поэтому внимательно изучите его. Pythonscript_1.0.8.0.msi — это метод распаковки, а не двойной щелчок по установке напрямую.

Emmet, ранее называвшийся Zen Coding, представляет собой подключаемый модуль для большинства популярных текстовых редакторов, который значительно повышает эффективность и точность кодирования HTML и CSS. По сути, это необходимый набор инструментов для веб-разработчиков, которые не используют такие инструменты, как Visual Studio.

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

Ну, а что именно означает для веб-разработчика? И почему это так хорошо? Позвольте мне показать вам несколько примеров. Поскольку я использую Notepad++ в качестве основного редактора, я покажу эти примеры с помощью Notepad++.

Подготовка Notepad++ к Emmet

Откройте Notepad++, перейдите в «Плагины» и «Диспетчер подключаемых модулей». Выберите Emmet из списка и нажмите «Установить».

Установка Emmet Notepad++ — Zen Coding Emmet в Notepad++ для лучшей и быстрой веб-разработки

Перезапустите Notepad++, и все готово.

Как его использовать

Введите очень простой синтаксис Emmet и перейдите в меню «Плагины», Emmet и выберите «Развернуть» или другую команду. Или вы можете использовать быструю комбинацию клавиш, например Ctrl + Alt + Enter .

Меню Emmet Notepad++ - Zen Coding Emmet в Notepad++ для лучшей и быстрой веб-разработки

А теперь давайте повеселимся.

Введите ! или html:5 и нажмите Ctrl + Alt + Enter. Вот что вы получаете:

Emmet html 5 — Zen Coding Emmet в Notepad++ для лучшей и быстрой веб-разработки

Чтобы упростить написание стандартной строки html-тега, такой как a, div, .class, мы можем сделать

Введите a и нажмите Ctrl + Alt + Enter, чтобы мигающий курсор находился между двумя кавычками.

Введите .class и нажмите Ctrl + Alt + Enter, чтобы получить

Более того, вы можете использовать оператор > для вложения элементов друг в друга. Например:

Введите div>ul>li и нажмите Ctrl + Alt + Enter, вы получите это с мигающим курсором в первой строке li.

Элементы вложения Emmet — Zen Coding Emmet в Notepad++ для лучшей и быстрой веб-разработки

Хотите строку комментариев? Введите C и нажмите Ctrl + Alt + Enter.

Чтобы сгенерировать фиктивный текст «Lorem ipsum», введите lorem или ipsum и нажмите Ctrl + Alt + Enter. Чтобы повторить их по 5 раз в абзацах, введите p*5>lorem и нажмите Ctrl + Alt + Enter.

Emmet dummy text lorem - Zen Coding Emmet в Notepad++ для лучшей и быстрой веб-разработки

Довольно интересно, не так ли? Но мы коснулись только поверхности Эммета. Мы даже не упомянули, как это работает в расширении CSS. Но я позволю вам во всем разобраться. Документация Emmet также хорошо написана, проста для понимания и понимания.

Примеры, показанные в этом посте, сделаны в Notepad++, но Emmet поддерживает многие другие, почти все популярные, включая Sublime Text, Vim, TextMate, Eclipse, Code, CodeMirror и т. д. и т. д.

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