如何配置 Emacs 以编辑包含 JavaScript 的 HTML 文件？

在开发 Web 应用过程中，经常会涉及到编辑 HTML 文件并且包含 JavaScript 代码。如果你使用 Emacs 作为主要的编辑器，那么你需要配置一些插件和设置才能更方便地编辑这些文件。

这篇文章将介绍如何配置 Emacs 以编辑包含 JavaScript 的 HTML 文件。

安装插件

要编辑包含 JavaScript 的 HTML 文件，首先需要安装一些插件。这些插件将帮助你编写和调试 JavaScript 代码。

Web Mode

Web Mode 是一个专门为 Web 开发人员设计的插件。它可以将 HTML、CSS、JavaScript 和其他 Web 技术语言的代码高亮显示，并提供了一些方便的功能，如按键绑定等。

你可以在 Emacs 中使用以下命令安装 Web Mode：

M-x package-install RET web-mode

Flycheck

Flycheck 是一个语法检查器，可以在代码编写期间检查错误。它集成了多种语言的检查器，包括 JavaScript。

你可以在 Emacs 中使用以下命令安装 Flycheck：

M-x package-install RET flycheck

JavaScript Mode

JavaScript Mode 是一个 JavaScript 语法高亮插件。尽管 Web Mode 已经支持 JavaScript 语言的高亮显示，但是 JavaScript Mode 更加细致，并提供了更多的功能。

你可以在 Emacs 中使用以下命令安装 JavaScript Mode：

M-x package-install RET js2-mode

配置 Emacs

安装完插件后，需要对 Emacs 进行适当的配置才能更好地编辑包含 JavaScript 的 HTML 文件。

配置 Web Mode

Web Mode 的默认配置可以满足很多需求。但是如果你需要在编辑 HTML 文件时也要编辑 JavaScript 代码，需要将 Web Mode 配置为启用 JavaScript 应用程序模式。

可以将以下代码添加到你的 Emacs 配置文件中：

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))

(defun my-web-mode-hook ()
  "Hooks for Web mode."
  (setq web-mode-content-types-alist
        '(("jsx" . "\\.js[x]?\\'")))
  (setq web-mode-enable-auto-quoting nil)
  )
(add-hook 'web-mode-hook  'my-web-mode-hook)

这个配置将会在打开 HTML 文件时，自动启用 Web Mode。同时，也会将 .jsx 文件关联到 JavaScript 应用程序模式下。

配置 Flycheck

Flycheck 默认会对文件进行检查，但是需要忽略 ESlint 的检查。可以将以下代码添加到你的 Emacs 配置文件中：

(require 'flycheck)
(setq-default flycheck-disabled-checkers
              (append flycheck-disabled-checkers
                      '(javascript-jshint)))
(flycheck-add-mode 'javascript-eslint 'web-mode)

这个配置会在 Web Mode 下启用 JavaScript-eslint 检查模式。

配置 JavaScript Mode

JavaScript Mode 能够帮助你高亮显示 JavaScript 代码，并提供了一些方便的功能。

可以将以下代码添加到你的 Emacs 配置文件中：

(require 'js2-mode)
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))

这个配置会在打开 .js 文件时启用 JavaScript Mode。

结论

通过安装对应的插件和适当的配置，你可以在 Emacs 下优雅地编写包含 JavaScript 的 HTML 文件。

Web Mode 和 JavaScript Mode 可以帮助你高亮显示代码，并且提供了一些方便的功能，如自动缩进等。

Flycheck 将帮助你在编辑代码时进行语法检查，确保代码的正确性。