¿Cómo configuro emacs para editar archivos HTML que contienen Javascript?

94

Comencé los dolorosos primeros pasos de usar emacs para editar un archivo HTML con etiquetas HTML y contenido javascript. Instalé nxhtml e intenté usarlo, es decir, lo configuré para usar nxhtml-mumamo-mode para archivos .html. Pero no me encanta. Cuando estoy editando la parte de Javascript del código, las sangrías de tabulación no se comportan como lo hacen cuando edito código C / C ++. Comienza a colocar pestañas dentro de la línea y si intenta presionar la pestaña en el espacio en blanco que precede a una línea, inserta la pestaña en lugar de volver a tabular la línea.

Otro aspecto que no me gusta es que no se colorea la sintaxis como lo hacen los modos habituales de C / C ++. Prefiero el comportamiento del modo java predeterminado al editar archivos HTML, pero eso no funciona bien con el código HTML. :-(

1) ¿Existe un modo mejor para editar archivos HTML con partes de Javascript?

2) ¿Hay alguna manera de hacer que nxhtml use el modo java predeterminado para las partes de javascript?

Saludos,

METRO

— MakeDummy
fuente

Utilizo el modo MMM, que en teoría hace esto, pero es un poco asqueroso, no estoy tan contento con él. He pegado un montón de lisp en mi configuración de emacswiki pero realmente no pasé semanas en ello. Ojalá fuera más simple para aquellos de nosotros más interesados en usar emacs que en configurarlo.

— Nathan

1

Supongo que una solución alternativa es crear dos archivos y hacer referencia al archivo javascript con una extensión <script src>. Puedes verlos a ambos con un poco de C-x 2o C-x 3y tener un modo para cada uno. : - /

— Patrick

Posible duplicado de ¿Qué modo usa la gente cuando usa Emacs para editar páginas web que contienen CSS, javascript y HTML?

— phunehehe

41

Otra solucion es multi-web-mode:

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

que puede ser más fácilmente configurable que el ya mencionado multi-mode.

Simplemente configure sus modos preferidos en su .emacsarchivo de esta manera:

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

Más sobre los múltiples modos múltiples de Emacs (suspiro) aquí:

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

ACTUALIZACIÓN: simplificó las expresiones regulares para detectar áreas de JavaScript o CSS para que funcionen con HTML5, sin necesidad de expresiones regulares frágiles y súper precisas.

— Kai Carver
fuente

Tuve problemas para combinarlo con flymake

— juanmirocks

para manejar más casos, como html5, ahora uso descripciones de etiquetas más simples y más indulgentes para JavaScript y CSS:(js-mode "<script[^>]*>" "</script>") (css-mode "<style[^>]*>" "</style>")

— Kai Carver

32

He escrito el modo principal web-mode.el para este tipo de uso: editar plantillas HTML que incorporan JS, CSS, Java (JSP), PHP. Puede descargarlo en http://web-mode.org. Web-mode.el resalta la sintaxis y la sangría según el tipo de bloque. La instalación es sencilla:

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))

— fxbois
fuente

1

El modo web también está disponible como paquete. Al menos de MELPA.

— mcginniwa

Tiene soporte para motor play / razor!

— juanmirocks

Hola fxbois, ¿por qué no me funciona esto? Copié web-mode.el en / use / local / share / emacs / site-lisp / (y eliminé todos los demás archivos .el) y seguí la sección "Instalar" en web-mode.org (y solo el archivo .emacs tiene esas pocas líneas). ¿Puedes ayudarme? Gracias.

— Tony Xu

1

¿Podría cargar el archivo we-mode.el dentro de emacs y después del modo web Mx?

— fxbois

14

Gran pregunta. ¡Mira cuántos votos a favor obtuviste en tu primero!

Todos tienen la misma experiencia que tú. Yo también.

En lugar de confiar en nhtml-mode, que exhibió el mismo tipo de extrañeza para mí como lo describiste, busqué otra opción y encontré multi-mode.el . Es una especie de esqueleto multimodo de propósito general. Para usarlo, debe especificar expresiones regulares para describir dónde comienza un modo y dónde termina otro. Entonces, busca <script...>iniciar un bloque de javascript y <style...>comenzar un bloque de CSS. Luego, conecta sus propios modos para cada bloque; si le gusta espresso para javascript, úselo. Y así sucesivamente para las otras expresiones regulares que identifican otros bloques.

En la práctica, mientras navega por el documento, se habilita un modo diferente para cada bloque.

Usé multimodo para producir un ASP.NET, que me permite editar C #, HTML, CSS y Javascript en un solo archivo, con el resaltado y la fuente adecuados dependiendo de dónde esté el cursor en el búfer. No es perfecto, pero encontré que es una mejora notable en las posibilidades existentes. De hecho, esto puede ser lo que quieras. Pruébalo.

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

— Cheeso
fuente

Acabo de empezar a probar el modo aspx. Funcionó muy bien. Lo único que hice fue cambiar el soporte de javascript de expresso-mode a javascript-mode.

— MakeDummy

7

No es realmente una buena solución, pero una solución rápida si realmente necesita tener javascript en su html es seleccionar la región que contiene javascript y usar el comando narrow-to-region( C-x n n) y luego cambiar a su modo de javascript preferido. El comando widente trae de vuelta, ( C-x n w).

— antonj
fuente

0

Parece que ha configurado su nxhtml incorrectamente. La única configuración necesaria debería ser cargar el autostart.elarchivo, y luego todo debería funcionar a algún nivel. nxhtml no es perfecto de ninguna manera, pero mi experiencia al usarlo para html / css / javascript / mako es bastante buena, al menos para todo menos para mako. Pero estoy bastante seguro de que me equivoqué con la parte del mako.

Así es como inicializo mi 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))

— monotux
fuente