如何配置 emacs 以编辑包含 Javascript 的 HTML 文件？答案

【问题标题】：How do I configure emacs for editing HTML files that contain Javascript?如何配置 emacs 以编辑包含 Javascript 的 HTML 文件？
【发布时间】：2011-05-26 15:10:12
【问题描述】：

我已经开始了使用 emacs 编辑带有 HTML 标签和 javascript 内容的 HTML 文件的痛苦的第一步。我已经安装了 nxhtml 并尝试使用它——即设置为对 .html 文件使用 nxhtml-mumamo-mode。但我不喜欢它。当我编辑代码的 Javascript 部分时，制表符缩进的行为与编辑 C/C++ 代码时不同。它开始在行内放置制表符，如果您尝试在行前的空白处点击制表符，它会插入制表符而不是重新制表行。

我不喜欢的另一个方面是它不像通常的 C/C++ 模式那样进行语法着色。在编辑 HTML 文件时，我更喜欢默认 java-mode 的行为，但这与 HTML 代码不兼容。 :-(

1) 有没有更好的模式来编辑带有 Javascript 部分的 HTML 文件？

2) 有没有办法让 nxhtml 对 javascript 部分使用默认的 java 模式？

问候，

M

【问题讨论】：

我使用 MMM 模式，理论上它可以做到这一点，但它有点糟糕，我对此并不满意。我从 emacswiki 将很多 lisp 粘贴到我的配置中，但并没有真正花几周时间在上面。我希望对于我们这些对使用 emacs 比对其配置更感兴趣的人来说，它更简单。
我想一种解决方法是创建两个文件并使用 <script src> 引用 javascript 文件。您可以使用C-x 2 或C-x 3 观看它们，并为每个模式设置一个模式。 :-/
What mode do people use when using Emacs to edit web pages that contain CSS, javascript, and HTML?的可能重复

标签： javascript html emacs lisp

【解决方案1】：

另一种解决方案是multi-web-mode:

https://github.com/fgallina/multi-web-mode

这可能比已经提到的multi-mode 更容易配置。

您只需在 .emacs 文件中配置您的首选模式，如下所示：

(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags 
  '((php-mode "<\\?php\\|<\\? \\|<\\?=" "\\?>")
    (js-mode  "<script[^>]*>" "</script>")
    (css-mode "<style[^>]*>" "</style>")))
(setq mweb-filename-extensions '("php" "htm" "html" "ctp" "phtml" "php4" "php5"))
(multi-web-global-mode 1)

更多关于 Emacs 的多种模式（叹气）在这里：

http://www.emacswiki.org/emacs/MultipleModes

更新：简化正则表达式以检测 JavaScript 或 CSS 区域，使它们与 HTML5 一起工作——无需超精确和脆弱的正则表达式。

【讨论】：

我在将它与 flymake 结合使用时遇到了麻烦
为了处理更多的情况，比如 html5，我现在对 JavaScript 和 CSS 使用更简单、更宽容的标签描述：(js-mode "<script[^>]*>" "</script>") (css-mode "<style[^>]*>" "</style>")

【解决方案2】：

我已经为这种用法编写了主模式 web-mode.el：编辑嵌入 JS、CSS、Java (JSP)、PHP 的 HTML 模板。你可以在http://web-mode.org下载 Web-mode.el 根据块的类型进行语法高亮和缩进。安装很简单：

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

【讨论】：

web-mode 也可以作为一个包使用。至少来自 MELPA。
支持 play/razor 引擎！
嗨 fxbois，为什么这对我不起作用？我将 web-mode.el 复制到 /use/local/share/emacs/site-lisp/ （并删除了所有其他 .el 文件），然后按照 web-mode.org 上的“安装”部分（和 .emacs 文件有那几行）。你能帮忙吗？谢谢。
你能在emacs中和M-x web-mode之后加载we-mode.el文件吗

【解决方案3】：

听起来您的 nxhtml 设置不正确。唯一需要的设置应该是加载autostart.el 文件，然后一切都应该在某种程度上工作。 nxhtml 在任何方面都不是完美的，但是我将它用于 html/css/javascript/mako 的经验非常好，至少对于除 mako 之外的所有东西都是如此。但我很确定我搞砸了 mako 部分。

这就是我初始化我的 nxhtml 的方式：

(when (load "autostart.el" t)
  (setq nxhtml-skip-welcome t
        mumamo-chunk-coloring 'submode-colored
        indent-region-mode t
        rng-nxml-auto-validate-flag nil))

【讨论】：

【解决方案4】：

很好的问题。看看你在第一个投票中获得了多少赞！

每个人的经历都和你一样。我也是。

我没有像你描述的那样依赖对我来说表现出同样陌生感的 nhtml-mode，而是寻找另一个选项并找到了 multi-mode.el 。它是一种通用的多模式骨架。要使用它，您需要指定正则表达式来描述一种模式的开始位置和另一种模式的结束位置。因此，您寻找<script...> 来启动一个javascript 块，并寻找<style...> 来启动一个css 块。然后你为每个块插入你自己的模式——如果你喜欢 espresso for javascript，使用它。对于标识其他块的其他正则表达式，依此类推。

实际上，当您浏览文档时，会为每个块启用不同的模式。

我使用多模式生成 ASP.NET，它允许我在单个文件中编辑 C#、HTML、CSS 和 Javascript，并根据光标在缓冲区中的位置进行适当的突出显示和字体化。它并不完美，但我发现它是对现有可能性的显着改进。事实上，这可能是你想要的。试试看。

https://code.google.com/p/csharpmode/source/browse/trunk/aspx-mode.el?r=14

【讨论】：

我刚开始尝试 aspx 模式。效果很好。我唯一做的就是将 javascript 支持从 expresso-mode 更改为 javascript-mode。

【解决方案5】：

如果您确实需要在 html 中包含 javascript，则不是一个很好的解决方案，但一个快速解决方法是选择包含 javascript 的区域并使用命令narrow-to-region(C-x n n)，然后切换到您喜欢的 javascript 模式。命令 widen 将您带回 (C-x n w)。

【讨论】：