web-dev-qa-db-fra.com

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

J'ai commencé les premières étapes douloureuses de l'utilisation d'emacs pour modifier un fichier HTML avec 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 ne l'aime pas. Lorsque je modifie la partie Javascript du code, les retraits de tabulation ne se comportent pas comme ils le font lors de la modification du code C/C++. Il commence à mettre des tabulations dans la ligne et si vous essayez d'appuyer sur tab dans l'espace blanc précédant une ligne, il insère l'onglet plutôt que de ré-tabifier la ligne.

Un autre aspect que je n'aime pas, c'est qu'il ne fait pas de coloration syntaxique comme le font 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 d'édition des fichiers HTML avec des portions Javascript?

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

Cordialement,

M

javascripthtmlemacslisp
91
MakeDummy

Une autre solution est multi-web-mode:

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

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

Vous venez de configurer vos modes préférés dans votre .emacs fichier comme celui-ci:

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

40
Kai Carver

J'ai écrit le mode principal web-mode.el pour ce type d'utilisation: é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 selon le type du bloc. L'installation est simple:

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

Grande question. Regardez combien de votes positifs vous avez reçus lors de votre premier!

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

Plutôt que de compter sur le mode nhtml qui présentait pour moi le même type d'étrangeté 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 multimode polyvalent. Pour l'utiliser, vous devez spécifier des expressions régulières pour décrire le début et la fin d'un mode. Donc, vous recherchez <script...> pour démarrer un bloc javascript et <style...> pour 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 régulières qui identifient d'autres blocs.

En pratique, lorsque vous parcourez 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 de modifier 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

13
Cheeso

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 le javascript et d'utiliser la commande narrow-to-region (C-x n n), puis passez à votre mode javascript préféré. La commande widen vous ramène, (C-x n w).

6
antonj

Il semble que vous ayez mal configuré votre nxhtml. La seule configuration nécessaire devrait être le chargement du autostart.el fichier, 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 assez bonne, au moins pour tout sauf mako. Mais je suis presque sûr d'avoir foiré 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))
0
monotux