Comment configurer emacs pour éditer des fichiers HTML contenant du Javascript?

94

J'ai commencé les douloureuses premières étapes de l'utilisation d'emacs pour éditer un fichier HTML avec à la fois des balises HTML et du contenu javascript. J'ai installé nxhtml et essayé de l'utiliser - c'est-à-dire configuré pour utiliser nxhtml-mumamo-mode pour les fichiers .html. Mais je n'aime pas ça. Lorsque j'édite la partie Javascript du code, les retraits de tabulation ne se comportent pas comme ils le font lors de l'édition de code C / C ++. Il commence à mettre des onglets dans la ligne et si vous essayez d'appuyer sur l'onglet dans l'espace blanc précédant une ligne, il insère l'onglet plutôt que de re-tabifier la ligne.

Un autre aspect que je n'aime pas est qu'il ne fait pas de coloration syntaxique comme les modes C / C ++ habituels. Je préfère de loin le comportement du mode java par défaut lors de l'édition de fichiers HTML, mais cela ne fonctionne pas bien avec le code HTML. :-(

1) Existe-t-il un meilleur mode pour éditer des fichiers HTML avec des parties Javascript?

2) Existe-t-il un moyen pour que nxhtml utilise le mode java par défaut pour les parties javascript?

Cordialement,

M

MakeDummy
la source
J'utilise le mode MMM, ce qui en théorie fait ça mais c'est un peu nul, je ne suis pas vraiment content. J'ai collé beaucoup de lisp dans ma configuration depuis emacswiki mais je n'y ai pas vraiment passé des semaines. J'aurais aimé que ce soit plus simple pour ceux d'entre nous qui sont plus intéressés à utiliser emacs qu'à le configurer.
Nathan
1
Je suppose qu'une solution de contournement consiste à créer deux fichiers et à référencer le fichier javascript avec un <script src>. Vous pouvez les regarder tous les deux avec un peu de C-x 2ou C-x 3et avoir un mode pour chacun. : - /
Patrick

Réponses:

41

Une autre solution est multi-web-mode:

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

qui peut être plus facilement configurable que celui déjà mentionné multi-mode.

Vous configurez simplement vos modes préférés dans votre .emacsfichier comme ceci:

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

Plus d'informations sur les multiples modes multiples d'Emacs (soupir) ici:

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

MISE À JOUR: simplification des expressions rationnelles pour détecter les zones JavaScript ou CSS pour les faire fonctionner avec HTML5 - pas besoin d'expressions régulières super précises et fragiles.

Kai Carver
la source
J'ai eu du mal à le combiner avec flymake
juanmirocks
pour gérer plus de cas, comme html5, j'utilise maintenant des descriptions de balises plus simples et plus indulgentes pour JavaScript et CSS:(js-mode "<script[^>]*>" "</script>") (css-mode "<style[^>]*>" "</style>")
Kai Carver
32

J'ai écrit le mode majeur web-mode.el pour ce type d'utilisation: l'édition de modèles HTML qui intègrent JS, CSS, Java (JSP), PHP. Vous pouvez le télécharger sur http://web-mode.org Web-mode.el fait la coloration syntaxique et l'indentation en fonction du type de bloc. L'installation est simple:

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))
fxbois
la source
1
Web-mode est également disponible sous forme de package. Au moins de MELPA.
mcginniwa
Supporte le moteur de lecture / rasoir!
juanmirocks
Salut fxbois, pourquoi ça ne marche pas pour moi? J'ai copié web-mode.el dans / use / local / share / emacs / site-lisp / (et supprimé tous les autres fichiers .el), et suivi la section "Installer" sur web-mode.org (et le fichier .emacs uniquement a ces quelques lignes). Peux-tu aider s'il te plait? Merci.
Tony Xu
1
Pourriez-vous charger le fichier we-mode.el dans emacs et après Mx web-mode
fxbois
14

Excellente question. Regardez combien de votes positifs vous avez obtenus sur votre premier!

Tout le monde a la même expérience que vous. Moi aussi.

Plutôt que de me fier au mode nhtml qui présentait le même genre d'étrangeté pour moi que vous l'avez décrit, j'ai cherché une autre option et j'ai trouvé multi-mode.el . C'est une sorte de squelette multi-mode à usage général. Pour l'utiliser, vous devez spécifier des expressions régulières pour décrire où un mode commence et un autre se termine. Donc, vous cherchez <script...>à démarrer un bloc javascript et <style...>à démarrer un bloc css. Ensuite, vous branchez vos propres modes pour chaque bloc - si vous aimez l'espresso pour javascript, utilisez-le. Et ainsi de suite pour les autres expressions rationnelles qui identifient d'autres blocs.

En pratique, lorsque vous naviguez dans le document, un mode différent est activé pour chaque bloc.

J'ai utilisé le multi-mode pour produire un ASP.NET, qui me permet d'éditer C #, HTML, CSS et Javascript dans un seul fichier, avec la mise en évidence et la police appropriées en fonction de l'emplacement du curseur dans le tampon. Ce n'est pas parfait mais j'ai trouvé que c'était une nette amélioration par rapport aux possibilités existantes. En fait, c'est peut-être ce que vous voulez. Essaye le.

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

Cheeso
la source
Je viens juste d'essayer le mode aspx. Cela a très bien fonctionné. La seule chose que j'ai faite a été de changer le support javascript du mode expresso au mode javascript.
MakeDummy
7

Ce n'est pas vraiment une bonne solution mais une solution rapide si vous avez vraiment besoin d'avoir du javascript dans votre html est de sélectionner la région contenant du javascript et d'utiliser la commande narrow-to-region( C-x n n) puis de passer à votre mode javascript préféré. La commande widenvous ramène, ( C-x n w).

Antonj
la source
0

Il semble que vous ayez mal configuré votre nxhtml. La seule configuration nécessaire devrait être le chargement du autostart.elfichier, puis tout devrait fonctionner à un certain niveau. nxhtml n'est en aucun cas parfait, mais mon expérience de son utilisation pour html / css / javascript / mako est plutôt bonne, du moins pour tout sauf mako. Mais je suis presque sûr que j'ai foiré avec la partie mako.

Voici comment j'initialise mon 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
la source