logo
Все курсыВсе курсы
ВебинарыРазобраться в ITРеферальная программаПолучить профессию в SkyproПолучить профессию в Skypro

Настройка Emacs для редактирования HTML с Javascript

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Если вы хотите улучшить процесс работы с HTML и JavaScript в Emacs, рекомендуется воспользоваться web-mode. Установите его при помощи менеджера пакетов Emacs и добавьте в init.el следующие строки для его настройки:

emacs-lisp
Скопировать код
(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, а также улучшенной подсветке синтаксиса.

Кинга Идем в IT: пошаговый план для смены профессии

Реализация функциональности мультирежима

Для комфортной работы с HTML и встроенным JavaScript в Emacs можно воспользоваться расширенными настройками:

Применение multi-web-mode

multi-web-mode – это удобное решение для работы с файлами, содержащими код на разных языках. Используйте следующий код для его настройки:

emacs-lisp
Скопировать код
(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:

emacs-lisp
Скопировать код
(add-to-list 'mweb-tags '(espresso-mode "<script[^>]*>" "</script>")) ; Используем espresso для блоков скриптов.

Учтите, что js2-mode является более современным аналогом espresso-mode и, если есть возможность, лучше использовать его.

Фокусировка на блочном уровне

При работе с сложными файлами умение фокусироваться на отдельных блоках JavaScript может быть крайне полезным. Используйте следующие функции для этого:

emacs-lisp
Скопировать код
(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 можно представить как процесс создания профессионального набора инструментов:

Markdown
Скопировать код
Набор инструментов для Emacs (🧰)
|
|-- [📄] HTML-режим
|      * Подсветка синтаксиса
|      * Сопоставление тегов
|      * Валидация кода
|
|-- [💻] JavaScript-режим
       * Проверка кода
       * Свёртывание кода
       * IntelliSense

Этот набор вспомогательных средств облегчит процесс разработки, предоставляя специальные функции для работы с HTML (📄) и JavaScript (💻).

Тонкая настройка Emacs

Для достижения максимальной гармонии в работе с Emacs важно его тонко настроить:

Автоматическое определение типов файлов

Добавьте в auto-mode-alist типы HTML-файлов, чтобы Emacs мог автоматически их определять:

emacs-lisp
Скопировать код
(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:

emacs-lisp
Скопировать код
(setq mweb-tags '((js2-mode "<script[^>]*>" "</script>")
                  (css-mode "<style[^>]*>" "</style>")
                  ;; Добавьте другие режимы по мере необходимости.
                 ))

Унификация расширений файлов

Передайте web-mode управление работой с различными шаблонизаторами:

emacs-lisp
Скопировать код
(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.

Ссылки

  1. EmacsWiki: Html Mode — подробности о настройке и использовании HTML-режима в Emacs.
  2. web-mode.el – HTML шаблоны для редактирования в Emacs — обзор возможностей web-mode для работы с HTML/CSS/JS.
  3. GitHub – mooz/js2-mode: Улучшенный JavaScript-режим для GNU Emacs — описание js2-mode, который упрощает работу с кодом JavaScript.
  4. Овладение Emacs — комплексный портал для глубокого понимания Emacs.
  5. Руководство Tern Reference — инструкция по интеграции Tern.js для расширения возможностей работы с JavaScript в Emacs.
Свежие материалы
Коды состояния HTTP: что они значат?
6 сентября 2024
Как выбрать инструменты для тестирования сайтов
6 сентября 2024
Проверка юзабилити сайта: пошаговое руководство
6 сентября 2024