Bagaimana cara mengkonfigurasi emacs untuk mengedit file HTML yang berisi Javascript?

94

Saya telah memulai langkah pertama yang menyakitkan dalam menggunakan emacs untuk mengedit file HTML dengan tag HTML dan konten javascript. Saya telah menginstal nxhtml dan mencoba menggunakannya - yaitu mengatur untuk menggunakan nxhtml-mumamo-mode untuk file .html. Tapi saya tidak menyukainya. Saat saya mengedit bagian Javascript dari kode, indentasi tab tidak berfungsi seperti saat mengedit kode C / C ++. Itu mulai meletakkan tab di dalam baris dan jika Anda mencoba dan menekan tab di ruang putih sebelum baris itu menyisipkan tab daripada men-tabifikasi ulang baris.

Aspek lain yang saya tidak suka adalah tidak melakukan pewarnaan sintaks seperti mode C / C ++ biasa. Saya lebih suka perilaku mode java default saat mengedit file HTML tetapi itu tidak berfungsi dengan baik dengan kode HTML. :-(

1) Apakah ada mode yang lebih baik untuk mengedit file HTML dengan porsi Javascript?

2) Apakah ada cara agar nxhtml menggunakan mode java default untuk bagian javascript?

Salam,

M

javascript  html  emacs  lisp 
— MakeDummy
sumber
Saya menggunakan mode MMM, yang secara teori melakukan ini tetapi agak menyebalkan, saya tidak terlalu senang dengan itu. Saya telah menempelkan banyak cadel ke konfigurasi saya dari emacswiki tetapi tidak benar-benar menghabiskan waktu berminggu-minggu untuk itu. Saya berharap ini lebih sederhana bagi kita yang lebih tertarik menggunakan emacs daripada mengkonfigurasinya.
— Nathan
1
Saya kira solusinya adalah membuat dua file dan mereferensikan file javascript dengan file <script src>. Anda dapat menonton keduanya dengan sedikit C-x 2atau C-x 3dan memiliki mode untuk masing-masing. : - /
— Patrick
— phunehehe

Jawaban:

41

Solusi lainnya adalah multi-web-mode:

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

yang mungkin lebih mudah dikonfigurasi daripada yang telah disebutkan multi-mode.

Anda cukup mengkonfigurasi mode pilihan Anda dalam .emacsfile Anda seperti ini:

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

Lebih lanjut tentang beberapa mode Emacs (menghela napas) di sini:

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

UPDATE: regexps yang disederhanakan untuk mendeteksi area JavaScript atau CSS untuk membuatnya berfungsi dengan HTML5 - tidak perlu ekspresi reguler yang sangat presisi dan rapuh.

— Kai Carver
sumber
Saya mengalami masalah saat menggabungkannya dengan flymake
— juanmirocks
untuk menangani lebih banyak kasus, seperti html5, saya sekarang menggunakan deskripsi tag yang lebih sederhana dan lebih memaafkan untuk JavaScript dan CSS:(js-mode "<script[^>]*>" "</script>") (css-mode "<style[^>]*>" "</style>")
— Kai Carver
32

Saya telah menulis mode utama web-mode.el untuk penggunaan semacam ini: mengedit template HTML yang menyertakan JS, CSS, Java (JSP), PHP. Anda dapat mengunduhnya di http://web-mode.org Web-mode.el melakukan penyorotan sintaks dan indentasi sesuai dengan jenis blok. Pemasangannya sederhana:

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))
— fxbois.dll
sumber
1
mode web juga tersedia sebagai paket. Setidaknya dari MELPA.
— mcginniwa
Memiliki dukungan mesin play / razor!
— juanmirocks
Hai fxbois, mengapa ini tidak berhasil untuk saya? Saya menyalin web-mode.el ke / use / local / share / emacs / site-lisp / (dan menghapus semua file .el lainnya), dan mengikuti bagian "Instal" di web-mode.org (dan file .emacs saja memiliki beberapa baris). Bisakah Anda membantu? Terima kasih.
— Tony Xu
1
Bisakah Anda memuat file we-mode.el file di dalam emacs dan setelah Mx web-mode
— fxbois
14

Pertanyaan bagus. Lihat berapa banyak suara positif yang Anda dapatkan untuk yang pertama!

Setiap orang memiliki pengalaman yang sama dengan Anda. Saya juga.

Daripada mengandalkan nhtml-mode yang menunjukkan keanehan yang sama untuk saya seperti yang Anda jelaskan, saya mencari opsi lain dan menemukan multi-mode.el . Ini semacam kerangka multi-mode untuk keperluan umum. Untuk menggunakannya, Anda perlu menentukan ekspresi reguler untuk menjelaskan di mana satu mode dimulai dan mode lainnya berakhir. Jadi, Anda mencari untuk <script...>memulai blok javascript, dan <style...>untuk memulai blok css. Kemudian Anda memasukkan mode Anda sendiri untuk setiap blok - jika Anda suka espresso untuk javascript, gunakanlah. Dan seterusnya untuk regex lain yang mengidentifikasi blok lain.

Dalam praktiknya, saat Anda menavigasi dokumen, mode berbeda diaktifkan untuk setiap blok.

Saya menggunakan multi-mode untuk menghasilkan ASP.NET, yang memungkinkan saya mengedit C #, HTML, CSS, dan Javascript dalam satu file, dengan penyorotan dan fontifikasi yang tepat tergantung di mana kursor berada di buffer. Itu tidak sempurna tetapi saya menemukan itu merupakan peningkatan yang nyata pada kemungkinan yang ada. Sebenarnya ini mungkin yang Anda inginkan. Cobalah.

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

— Cheeso
sumber
Saya baru saja mencoba mode aspx. Ini bekerja dengan baik. Satu-satunya hal yang saya lakukan adalah mengubah dukungan javascript dari mode-ekspres ke mode-javascript.
— MakeDummy
7

Bukan solusi yang baik tetapi perbaikan cepat jika Anda benar-benar perlu memiliki javascript di html Anda adalah memilih wilayah yang berisi javascript dan menggunakan perintah narrow-to-region( C-x n n) dan kemudian beralih ke mode javascript pilihan Anda. Perintah tersebut widenmembawa Anda kembali, ( C-x n w).

— antonj
sumber
0

Sepertinya Anda salah mengatur nxhtml. Satu-satunya pengaturan yang diperlukan harus memuat autostart.elfile, dan kemudian semuanya harus bekerja ke tingkat tertentu. nxhtml tidak sempurna dalam hal apapun, tapi pengalaman saya menggunakannya untuk html / css / javascript / mako cukup bagus, setidaknya untuk semuanya kecuali mako. Tapi aku cukup yakin aku telah mengacaukan bagian mako.

Beginilah cara saya menginisialisasi nxhtml saya:

(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))
— monotux
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.