Javascriptを含むHTMLファイルを編集するために、emacsをどのように設定しますか?


94

私はemacsを使用して、HTMLタグとJavaScriptコンテンツの両方を含むHTMLファイルを編集するという苦痛な最初のステップを開始しました。私はnxhtmlをインストールしてそれを使ってみました-.htmlファイルにnxhtml-mumamo-modeを使うように設定しました。しかし、私はそれを愛していません。コードのJavascript部分を編集しているとき、タブのインデントがC / C ++コードの編集時のように動作しません。これは、行内にタブを配置し始め、行の前の空白スペースでタブを押すと、行を再タブ化するのではなくタブを挿入します。

私が気に入らないもう1つの側面は、通常のC / C ++モードのように構文の色分けを行わないことです。私は、HTMLファイルを編集するときのデフォルトのJavaモードの動作を非常に好みますが、HTMLコードではうまく機能しません。:-(

1)JavaScript部分を含むHTMLファイルを編集するためのより良いモードはありますか?

2)nxhtmlがjavascript部分にデフォルトのjavaモードを使用する方法はありますか?

よろしく、

M


私はMMMモードを使用しています。これは理論的にはこれを実行しますが、それはちょっと厄介なことですが、実際にはそれほど満足していません。emacswikiの設定にたくさんのlispを貼り付けましたが、実際には何週間も費やしていません。私はそれを設定するよりもemacsを使用することに興味がある私たちのためにそれがよりシンプルであることを望みます。
ネイサン

1
回避策は、2つのファイルを作成し、javascriptファイルを<script src>。あなたは少しでそれらの両方を見ることができC-x 2たりC-x 3と、それぞれのモードを持っています。:-/
Patrick

回答:


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で動作するように正規表現を簡略化しました-超精密で壊れやすい正規表現は必要ありません。


flymakeと組み合わせるのに問題がありました
juanmirocks

より多くのケースを処理するために、HTML5のように、私は今、よりシンプルでJavaScriptとCSSのタグ記述を寛容を使用:(js-mode "<script[^>]*>" "</script>") (css-mode "<style[^>]*>" "</style>")
甲斐カーバー

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))

1
パッケージとしてwebモードも利用できます。少なくともMELPAから。
mcginniwa 2013

再生/かみそりエンジンをサポートしています!
juanmirocks 2013年

こんにちは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 14

14

すばらしい質問です。最初の投票で獲得した投票数を確認してください。

誰もがあなたと同じ経験をしています。私も。

あなたが説明したのと同じ種類の奇妙さを示したnhtml-modeに依存するのではなく、別のオプションを探してmulti-mode.elを見つけました。一種の汎用マルチモードスケルトンです。これを使用するには、あるモードが開始し、別のモードが終了する場所を説明する正規表現を指定する必要があります。したがって、<script...>JavaScriptブロック<style...>を開始し、CSSブロックを開始することを探します。次に、ブロックごとに独自のモードを接続します。JavaScriptのエスプレッソが必要な場合は、それを使用してください。他のブロックを識別する他の正規表現についても同様です。

実際には、ドキュメントをナビゲートすると、ブロックごとに異なるモードが有効になります。

マルチモードを使用してASP.NETを作成しました。これにより、C#、HTML、CSS、およびJavascriptを1つのファイルで編集でき、カーソルがバッファー内のどこにあるかに応じて適切な強調表示とフォント設定を使用できます。完璧ではありませんが、既存の可能性を大幅に改善することがわかりました。実際、これはあなたが望むものかもしれません。やってみよう。

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


aspxモードを試してみました。それはうまくいきました。私がした唯一のことは、javascriptサポートをexpresso-modeからjavascript-modeに変更することでした。
MakeDummy 2011年

7

あまり良い解決策ではありませんが、HTMLにJavaScriptが本当に必要な場合の迅速な解決策は、JavaScriptを含む領域を選択し、コマンドnarrow-to-regionC-x n n)を使用して、希望のJavaScriptモードに切り替えることです。コマンドwidenを使用すると、(C-x n w)に戻ります。


0

nxhtmlを正しく設定していないようです。必要な唯一のセットアップはautostart.elファイルをロードすることであり、それからすべてがある程度まで機能するはずです。nxhtmlは決して完璧ではありませんが、html / css / javascript / makoにnxhtmlを使用した私の経験は、少なくとも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))
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.