如何配置emacs以编辑包含Javascript的HTML文件?

时间:2010-12-16 15:28:08

标签: javascript html emacs lisp

我已经开始使用emacs编辑带有HTML标记和javascript内容的HTML文件的痛苦的第一步。我已经安装了nxhtml并尝试使用它 - 即设置为.html文件使用nxhtml-mumamo-mode。但我不喜欢它。当我编辑代码的Javascript部分时,选项卡缩进的行为与编辑C / C ++代码时的行为不同。它开始在行中添加制表符,如果您尝试在行前面的空白处按Tab键,则会插入制表符而不是重新列表该行。

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

1)使用Javascript部分编辑HTML文件是否有更好的模式?

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

此致

中号

5 个答案:

答案 0 :(得分:40)

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

答案 1 :(得分:31)

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

答案 2 :(得分:13)

好问题。看看你在第一个上有多少赞成票!

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

我没有依赖于nhtml模式,它对我展示了与你所描述的相同的陌生感,我寻找了另一个选项并找到了multi-mode.el。它是一种通用的多模式骨架。要使用它,您需要指定正则表达式来描述一个模式的开始位置和另一个模式的结束位置。因此,您需要<script...>启动javascript块,并<style...>启动css块。然后你为每个块插入自己的模式 - 如果你喜欢espresso的javascript,请使用它。等等识别其他块的其他正则表达式。

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

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

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

答案 3 :(得分:6)

不是一个很好的解决方案,但如果你真的需要在你的html中使用javascript快速解决方法是选择包含javascript的区域并使用命令narrow-to-regionC-x n n),然后切换到你的首选的javascript模式。命令widen带您回来,(C-x n w)。

答案 4 :(得分: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))