Jak skonfigurować emacsa do edycji plików HTML, które zawierają Javascript?


94

Zacząłem bolesne pierwsze kroki używania emacsa do edycji pliku HTML zawierającego zarówno tagi HTML, jak i zawartość javascript. Zainstalowałem nxhtml i próbowałem go używać - tj. Skonfigurowałem do używania trybu nxhtml-mumamo-mode dla plików .html. Ale ja tego nie kocham. Kiedy edytuję część kodu JavaScript, wcięcia tabulatorów nie zachowują się tak, jak podczas edycji kodu C / C ++. Zaczyna umieszczać tabulatory w linii, a jeśli spróbujesz uderzyć tabulator w białą przestrzeń poprzedzającą linię, wstawia tabulator zamiast ponownie tabulować linię.

Innym aspektem, który mi się nie podoba, jest to, że nie wykonuje kolorowania składni, tak jak robią to zwykłe tryby C / C ++. O wiele bardziej wolę zachowanie domyślnego trybu java podczas edycji plików HTML, ale to nie działa dobrze z kodem HTML. :-(

1) Czy istnieje lepszy tryb edycji plików HTML z częściami JavaScript?

2) Czy istnieje sposób, aby nxhtml używał domyślnego trybu java dla fragmentów javascript?

Pozdrowienia,

M


Używam trybu MMM, który teoretycznie to robi, ale jest trochę kiepski, nie jestem z tego zbyt zadowolony. Wkleiłem dużo seplenienia do mojej konfiguracji z emacswiki, ale tak naprawdę nie spędziłem nad tym tygodni. Chciałbym, żeby było to prostsze dla tych z nas, którzy są bardziej zainteresowani używaniem emacsa niż jego konfiguracją.
Nathan

1
Myślę, że obejściem jest utworzenie dwóch plików i odwołanie się do pliku javascript z rozszerzeniem <script src>. Możesz oglądać je oba z odrobiną C-x 2lub C-x 3i mieć tryb dla każdego. : - /
Patrick,

Odpowiedzi:


41

Innym rozwiązaniem jest multi-web-mode:

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

które mogą być łatwiej konfigurowalne niż już wspomniane multi-mode .

Po prostu skonfiguruj preferowane tryby w swoim .emacspliku w następujący sposób:

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

Więcej o wielu trybach Emacsa (westchnienie) tutaj:

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

AKTUALIZACJA: uproszczono wyrażenia regularne, aby wykryć obszary JavaScript lub CSS, aby działały z HTML5 - nie ma potrzeby stosowania bardzo precyzyjnych i delikatnych wyrażeń regularnych.


Miałem kłopoty z połączeniem go z flymake
juanmirocks

aby obsłużyć więcej przypadków, takich jak html5, używam teraz prostszych i bardziej wybaczających opisów tagów dla JavaScript i CSS:(js-mode "<script[^>]*>" "</script>") (css-mode "<style[^>]*>" "</style>")
Kai Carver

32

Napisałem główny tryb web-mode.el do tego rodzaju zastosowań: edytowanie szablonów HTML, które osadzają JS, CSS, Java (JSP), PHP. Możesz go pobrać ze strony http://web-mode.org Web-mode.el dokonuje podświetlania składni i wcięć w zależności od typu bloku. Instalacja jest prosta:

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

1
tryb sieciowy jest również dostępny jako pakiet. Przynajmniej z MELPA.
mcginniwa

Obsługuje silnik Play / Razor!
juanmirocks

Cześć fxbois, dlaczego to nie działa dla mnie? Skopiowałem web-mode.el do / use / local / share / emacs / site-lisp / (i usunąłem wszystkie inne pliki .el) i postępowałem zgodnie z sekcją „Install” na web-mode.org (i tylko plik .emacs ma te kilka wierszy). Czy możesz mi pomóc? Dzięki.
Tony Xu

1
Czy mógłbyś załadować plik we-mode.el wewnątrz emacsa i po Mx w trybie
sieciowym

14

Świetne pytanie. Zobacz, ile pozytywnych głosów dostałeś w swoim pierwszym!

Każdy ma takie same doświadczenia jak Ty. Ja też.

Zamiast polegać na trybie nhtml, który okazał się dla mnie taki sam, jak opisałeś, szukałem innej opcji i znalazłem multi-mode.el . To rodzaj uniwersalnego szkieletu wielomodowego. Aby z niego skorzystać, musisz określić wyrażenia regularne opisujące, gdzie zaczyna się jeden tryb, a gdzie kończy inny. Więc szukasz, <script...>aby rozpocząć blok javascript i <style...>rozpocząć blok css. Następnie podłączasz własne tryby dla każdego bloku - jeśli lubisz espresso dla javascript, użyj go. I tak dalej w przypadku innych wyrażeń regularnych, które identyfikują inne bloki.

W praktyce podczas poruszania się po dokumencie dla każdego bloku włączany jest inny tryb.

Użyłem wielu trybów do stworzenia ASP.NET, który pozwala mi edytować C #, HTML, CSS i Javascript w jednym pliku, z odpowiednim podświetleniem i czcionką w zależności od tego, gdzie znajduje się kursor w buforze. Nie jest doskonały, ale stwierdziłem, że jest to wyraźna poprawa istniejących możliwości. W rzeczywistości może to być to, czego chcesz. Wypróbuj to.

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


Właśnie zabrałem się za wypróbowanie trybu aspx. Działało świetnie. Jedyne, co zrobiłem, to zmiana obsługi javascript z trybu expresso na tryb javascript.
MakeDummy

7

Niezbyt dobre rozwiązanie, ale szybka naprawa, jeśli naprawdę potrzebujesz mieć JavaScript w swoim html, wybierz region zawierający javascript i użyj polecenia narrow-to-region( C-x n n), a następnie przełącz się na preferowany tryb javascript. Polecenie widenprzenosi cię z powrotem, ( C-x n w).


0

Wygląda na to, że nieprawidłowo skonfigurowałeś swój nxhtml. Jedyną niezbędną konfiguracją powinno być załadowanie plikuautostart.el pliku, a następnie wszystko powinno działać do pewnego poziomu. nxhtml nie jest w żaden sposób doskonały, ale moje doświadczenia z używania go do html / css / javascript / mako są całkiem dobre, przynajmniej do wszystkiego oprócz mako. Ale jestem prawie pewien, że schrzaniłem część mako.

Oto jak inicjalizuję mój 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))
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.