如何配置 emacs 以编辑包含 Javascript 的 HTML 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4462393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I configure emacs for editing HTML files that contain Javascript?
提问by MakeDummy
I have started the painful first steps of using emacs to edit an HTML file with both HTML tags and javascript content. I have installed nxhtml and tried using it - i.e set up to use nxhtml-mumamo-mode for .html files. But I am not loving it. When I am editing the Javascript portion of the code the tab indents do not behave as they do when editing C/C++ code. It starts putting tabs within the line and if you try and hit tab in the white space preceding a line it inserts the tab rather than re-tabifying the line.
我已经开始了使用 emacs 编辑带有 HTML 标签和 javascript 内容的 HTML 文件的痛苦的第一步。我已经安装了 nxhtml 并尝试使用它 - 即设置为对 .html 文件使用 nxhtml-mumamo-mode。但我不爱它。当我编辑代码的 Javascript 部分时，选项卡缩进的行为与编辑 C/C++ 代码时不同。它开始在行内放置制表符，如果您尝试在行前的空白处点击制表符，它会插入制表符而不是重新对行进行制表。
Another aspect that I don't like is that it doesn't do syntax colouring like the usual C/C++ modes do. I much prefer the behaviour of the default java-mode when editing HTML files but that doesn't play nicely with the HTML code. :-(
我不喜欢的另一个方面是它不像通常的 C/C++ 模式那样进行语法着色。在编辑 HTML 文件时，我更喜欢默认 java 模式的行为，但这与 HTML 代码不能很好地配合。:-(
1) Is there a better mode for editing HTML files with Javascript portions?
1) 是否有更好的模式来编辑带有 Javascript 部分的 HTML 文件？
2) Is there a way to get nxhtml to use the default java-mode for the javascript portions?
2) 有没有办法让 nxhtml 对 javascript 部分使用默认的 java 模式？
Regards,
问候，
M
米
回答by Kai Carver
Another solution is multi-web-mode:
另一个解决方案是multi-web-mode：
https://github.com/fgallina/multi-web-mode
https://github.com/fgallina/multi-web-mode
which may be more easily configurable than the already mentioned multi-mode.
这可能比已经提到的更容易配置multi-mode。
You just configure your preferred modes in your .emacsfile like this:
您只需在.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)
More on Emacs's multiple multiple modes (sigh) here:
更多关于 Emacs 的多种多模式（叹息）在这里：
http://www.emacswiki.org/emacs/MultipleModes
http://www.emacswiki.org/emacs/MultipleModes
UPDATE: simplified the regexps to detect JavaScript or CSS areas to make them work with HTML5 -- no need for super-precise and fragile regular expressions.
更新：简化了正则表达式以检测 JavaScript 或 CSS 区域，使它们与 HTML5 一起工作——不需要超精确和脆弱的正则表达式。
回答by fxbois
I have written the major mode web-mode.el for this kind of usage : editing HTML templates that embed JS, CSS, Java (JSP), PHP. You can download it on http://web-mode.orgWeb-mode.el does syntax highlighting and indentation according to the type of the block. Installation is simple :
我已经为这种用法编写了主要模式 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))
回答by Cheeso
Great question. Look how many upvotes you got on your first one!
很好的问题。看看你的第一个投票有多少赞！
Everyone has the same experience as you. Me too.
每个人都有和你一样的经历。我也是。
Rather than rely on nhtml-mode which exhibited the same sort of strangeness for me as you described, I looked for another option and found multi-mode.el. It's a sort of general-purpose multi-mode skeleton. To use it, you need to specify regular expressions to describe where one mode starts and another one ends. So, you look for <script...>to start a javascript block, and <style...>to start a css block. Then you plug in your own modes for each block - if you like espresso for javascript, use it. And so on for the other regexes that identify other blocks.
我没有像你描述的那样依赖 nhtml-mode，它对我表现出同样的陌生感，而是寻找另一个选项并找到了multi-mode.el。它是一种通用的多模式骨架。要使用它，您需要指定正则表达式来描述一种模式从哪里开始，另一种模式在哪里结束。所以，你<script...>想启动一个 javascript 块，然后<style...>启动一个 css 块。然后你为每个块插入你自己的模式 - 如果你喜欢 javascript 的 espresso，使用它。对于标识其他块的其他正则表达式，依此类推。
In practice, as you navigate through the document, a different mode is enabled for each block.
实际上，当您浏览文档时，会为每个块启用不同的模式。
I used multi-mode to produce an ASP.NET, that allows me to edit C#, HTML, CSS, and Javascript in a single file, with the proper highlighting and fontification depending on where the cursor is in the buffer. It isn't perfect but I found it to be a marked improvement on the existing possibilities. In fact this may be what you want. Try it out.
我使用多模式生成 ASP.NET，它允许我在单个文件中编辑 C#、HTML、CSS 和 Javascript，并根据光标在缓冲区中的位置进行适当的突出显示和字体化。它并不完美，但我发现它是对现有可能性的显着改进。事实上，这可能就是你想要的。试试看。
https://code.google.com/p/csharpmode/source/browse/trunk/aspx-mode.el?r=14
https://code.google.com/p/csharpmode/source/browse/trunk/aspx-mode.el?r=14
回答by antonj
Not really a good solution but a quick fix if you really need to have javascript in your html is to select the region containing javascript and use the command narrow-to-region(C-x n n) and then switch to your preferred javascript mode. The command widenbrings you back, (C-x n w).
这不是一个很好的解决方案，但如果您真的需要在 html 中使用 javascript，一个快速解决方法是选择包含 javascript 的区域并使用命令narrow-to-region( C-x n n) 然后切换到您喜欢的 javascript 模式。该命令widen将您带回来，( C-x n w)。
回答by monotux
It sounds like you've setup your nxhtml incorrectly. The only setup necessary should be loading the autostart.elfile, and then everything should work to some level. nxhtml isn't perfect in any way, but my experiences from using it for html/css/javascript/mako is pretty good, at least for everything but mako. But I'm pretty sure I've screwed up with the mako-part.
听起来您的 nxhtml 设置不正确。唯一必要的设置应该是加载autostart.el文件，然后一切都应该在一定程度上工作。nxhtml 在任何方面都不是完美的，但是我将它用于 html/css/javascript/mako 的经验非常好，至少对于除 mako 之外的所有内容。但我很确定我已经搞砸了 mako 部分。
This is how I initialize my nxhtml:
这就是我初始化 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))
