如何配置emacs来编辑包含Javascript的HTML文件？

94

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

我不喜欢的另一方面是，它不像通常的C / C ++模式那样进行语法着色。我非常喜欢在编辑HTML文件时使用默认Java模式的行为，但这与HTML代码不能很好地配合使用。:-(

1）是否有更好的模式来编辑带有Javascript部分的HTML文件？

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

问候，

中号

— MakeDummy
source

我使用MMM模式，理论上可以做到这一点，但是有点儿麻烦，我对它并不满意。我已经从emacswiki将很多Lisp粘贴到了我的配置中，但是并没有花太多时间在上面。我希望对于那些对emacs感兴趣而不是对其进行配置的人来说，它更简单。

— 内森2010年

1

我猜一种解决方法是创建两个文件，并使用引用javascript文件<script src>。您可以按C-x 2或观看它们，C-x 3并为每个观看一个模式。：-/

— Patrick

可能的重复什么模式做的人使用Emacs到包含CSS，JavaScript和HTML编辑网页时使用？

— phunehehe

41

另一个解决方案是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一起使用-无需超精确且脆弱的正则表达式。

— 凯·卡佛
source

我很难将它与flymake结合使用

— juanmirocks

为了处理更多情况，例如html5，我现在使用更简单，更宽容的JavaScript和CSS标签描述：(js-mode "<script[^>]*>" "</script>") (css-mode "<style[^>]*>" "</style>")

— Kai Carver 2015年

32

我已经为这种用法编写了主要模式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))

— fxbois
source

1

网络模式也可作为软件包提供。至少来自MELPA。

— mcginniwa

有播放/剃须刀引擎支持！

— juanmirocks

嗨，fxbois，为什么这对我不起作用？我将web-mode.el复制到/ use / local / share / emacs / site-lisp /中（并删除了所有其他.el文件），然后按照web-mode.org中的“安装”部分操作（仅.emacs文件）有这几行）。你能帮忙吗？谢谢。

— Tony Xu

1

您能否在emacs中以及Mx Web模式之后加载we-mode.el文件

— fxbois 2014年

14

好问题。看看您第一个获得了多少票！

每个人都有与您相同的经历。我也是。

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

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

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

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

— 奇索
source

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

— MakeDummy 2011年

7

如果您确实需要在HTML中添加javascript，这不是一个很好的解决方案，但是一个快速解决方案是选择包含javascript的区域并使用命令narrow-to-region（C-x n n），然后切换到首选javascript模式。该命令widen将您带回（C-x n w）。

— 安东尼
source

0

听起来您的nxhtml设置不正确。唯一必要的设置应该是加载autostart.el文件，然后一切都应在某种程度上起作用。nxhtml在任何方面都不是完美的，但是我将其用于html / css / javascript / mako的经验非常好，至少对于mako以外的所有事物都如此。但是我敢肯定，我已经搞砸了mako-part。

这就是我初始化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))

— tu
source