Получить профессию в SkyproНастройка Emacs для редактирования HTML с Javascript
Быстрый ответ
Если вы хотите улучшить процесс работы с HTML и JavaScript в Emacs, рекомендуется воспользоваться web-mode. Установите его при помощи менеджера пакетов Emacs и добавьте в init.el следующие строки для его настройки:
(package-install 'web-mode) ; Устанавливаем web-mode для Emacs.
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode)) ; Используем web-mode для файлов с расширением HTML.
(add-hook 'web-mode-hook '(lambda ()
(setq web-mode-enable-engine-detection t) ; Активируем автоопределение движка.
(setq web-mode-engines-alist '(("javascript" . "\\.html\\'")))
(setq web-mode-code-indent-offset 2))) ; Устанавливаем отступ в два пробела для кода.При помощи web-mode вы значительно упростите манипуляции с кодом благодаря его структурированию, форматированию HTML и JavaScript, а также улучшенной подсветке синтаксиса.
Реализация функциональности мультирежима
Для комфортной работы с HTML и встроенным JavaScript в Emacs можно воспользоваться расширенными настройками:
Применение multi-web-mode
multi-web-mode – это удобное решение для работы с файлами, содержащими код на разных языках. Используйте следующий код для его настройки:
(require 'multi-web-mode) ; Активируем multi-web-mode.
(setq mweb-default-major-mode 'html-mode) ; Задаём режим HTML как основной.
(setq mweb-tags '((php-mode "<\\?php\\|<\\? \\|<\\?=" "\\?>")
(js2-mode "<script +\\(type=\"text/javascript\"\\|language=\"javascript\"\\)[^>]*>" "</script>")
(css-mode "<style +type=\"text/css\"[^>]*>" "</style>"))) ; Задаём правила для PHP, JavaScript и CSS.
(setq mweb-filename-extensions '("htm" "html" "ctp" "php" "phtml" "tpl")) ; Указываем список расширений файлов.
(multi-web-global-mode 1) ; Активируем multi-web-mode глобально.Данная конфигурация устанавливает основной режим и определяет шаблоны для подсветки JavaScript и CSS, адаптируясь под особенности HTML5.
Использование режима espresso
В процессе редактирования JavaScript можно использовать espresso-mode. Не забудьте предварительно установить multi-mode.el:
(add-to-list 'mweb-tags '(espresso-mode "<script[^>]*>" "</script>")) ; Используем espresso для блоков скриптов.Учтите, что js2-mode является более современным аналогом espresso-mode и, если есть возможность, лучше использовать его.
Фокусировка на блочном уровне
При работе с сложными файлами умение фокусироваться на отдельных блоках JavaScript может быть крайне полезным. Используйте следующие функции для этого:
(defun my-js-mode-narrow ()
"Сжимаем область до <script> и переключаемся на `js-mode`."
(interactive)
(narrow-to-region (search-backward "<script>") (search-forward "</script>")) ; Определяем границы блока <script>.
(js-mode)
(message "Сфокусировались на JavaScript!"))
(global-set-key (kbd "C-c nj") 'my-js-mode-narrow)
(defun my-js-mode-widen ()
"Возвращаемся к работе с полным документом после редактирования JavaScript."
(interactive)
(widen) ; Расширяем область видимости.
(message "Работаем с полным документом!"))
(global-set-key (kbd "C-c nw") 'my-js-mode-widen)Визуализация
Настройку Emacs можно представить как процесс создания профессионального набора инструментов:
Набор инструментов для Emacs (🧰)
|
|-- [📄] HTML-режим
| * Подсветка синтаксиса
| * Сопоставление тегов
| * Валидация кода
|
|-- [💻] JavaScript-режим
* Проверка кода
* Свёртывание кода
* IntelliSenseЭтот набор вспомогательных средств облегчит процесс разработки, предоставляя специальные функции для работы с HTML (📄) и JavaScript (💻).
Тонкая настройка Emacs
Для достижения максимальной гармонии в работе с Emacs важно его тонко настроить:
Автоматическое определение типов файлов
Добавьте в auto-mode-alist типы HTML-файлов, чтобы Emacs мог автоматически их определять:
(add-to-list 'auto-mode-alist '("\\.html\\.erb\\'" . web-mode)) ; Файлы с расширением ERB открываем в web-mode.
(add-to-list 'auto-mode-alist '("\\.jinja2\\'" . web-mode)) ; Файлы с расширением Jinja2 тоже открываем через web-mode.Поддержка HTML5
Обновите шаблоны multi-web-mode для корректного взаимодействия с HTML5:
(setq mweb-tags '((js2-mode "<script[^>]*>" "</script>")
(css-mode "<style[^>]*>" "</style>")
;; Добавьте другие режимы по мере необходимости.
))Унификация расширений файлов
Передайте web-mode управление работой с различными шаблонизаторами:
(setq mweb-filename-extensions '("htm" "html" "erb" "jinja2" "twig" "hbs" "handlebars")) ; От ERB до Handlebars — все под одним флагом.
(multi-web-global-mode 1) ; Запускаем multi-web-mode.Полезные материалы для усиления вашего Emacs
Чтобы освоить Emacs в полной мере, ознакомьтесь с следующими ресурсами:
- multi-web-mode можно найти здесь: multi-mode.el.
- web-mode доступен на web-mode.org.
- Продвинутую поддержку ASP.NET предлагает multi-mode.el из проекта csharpmode.
Ссылки
- EmacsWiki: Html Mode — подробности о настройке и использовании HTML-режима в Emacs.
- web-mode.el – HTML шаблоны для редактирования в Emacs — обзор возможностей
web-modeдля работы с HTML/CSS/JS. - GitHub – mooz/js2-mode: Улучшенный JavaScript-режим для GNU Emacs — описание
js2-mode, который упрощает работу с кодом JavaScript. - Овладение Emacs — комплексный портал для глубокого понимания Emacs.
- Руководство Tern Reference — инструкция по интеграции Tern.js для расширения возможностей работы с JavaScript в Emacs.