¿Cómo configurar emacs para editar archivos HTML que contienen JavaScript?

Hay dos formas mejores y más fáciles de configurar emacs para editar archivos HTML que contienen JavaScript.

  1. Uso del modo web múltiple
  2. Usando web-mode-el

Ambos métodos son los más adecuados para configurar emacs para editar archivos HTML que no solo contienen JavaScript, sino que también se pueden usar para archivos HTML que contienen CSS, PHP, JSP. Uno solo necesita pegar algunos fragmentos de código en el archivo principal y el trabajo estará hecho.

Usando multi-web-mode: Es una forma muy fácil y sencilla de configurar emacs. Uno solo necesita configurar sus modos preferidos en sus archivos .emac de esta manera:

(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags 
  '((js-mode  "<script[^>]*>" "</script>")
    (css-mode "<style[^>]*>" "</style>")))
(setq mweb-filename-extensions '("htm" "html" "phtml"))
(multi-web-global-mode 1)

Nota: Además, si desea configurar emacs para editar archivos HTML que contengan otros idiomas como PHP, simplemente puede incluir la descripción de la etiqueta PHP también en las «etiquetas setq mweb». 

Modo web múltiple: a continuación se muestra un paso simple para instalar. Abra su archivo .emacs y agregue el siguiente código allí.

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

Además, si hablamos del uso del modo web múltiple, básicamente vincula las siguientes pulsaciones de teclas:

  1. M-<f11>: este trazo solicita al usuario que anule el modo principal predeterminado.
  2. M-<f12>: este trazo solicita al usuario que anule la sangría adicional calculada.  

Así es como podemos configurar Emacs para editar archivos HTML que contienen JavaScript.

Usando web-mode-el: Esta forma de configurar emacs es la más simple y fácil. Podemos usar el modo mayor “web-mode.el” para este tipo de uso donde queremos editar archivos HTML que tienen JavaScript, CSS, JAVA(JSP), PHP. “Web-mode.el” resalta la sintaxis y también hace sangrado según el tipo de bloque.

Web-mode-el: Uno puede usar esto por:

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

Ejemplo: El siguiente ejemplo muestra el uso de web-model-el. En este código, hemos utilizado HTML, JavaScript, CSS, PHP.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      H1 {
      }
      color: #0a @;
    </style>
    <script type="text/html">
      <span></span>
    </script>
    <?php
        // TODO
        $s = "a $var in a string":
    ?>
  </head>
  <body
    readonly
    class="wrapper"
    style="width: 100%"
    data-value="l"
    ng-init="count=8"
  >
    <h1>Hello Geeks!</h1>
    <core-icon></core-icon>
    <?php if ($x): ?>
    <span></span>
    <?php endif; ?>
  </body>
</html>

Salida: A continuación se muestra la salida para el mismo.

Página web de salida simple.

Entonces podemos ver que nuestro código ha sido sangrado inteligentemente y también es compatible con muchos idiomas. Entonces, estas fueron las dos mejores y más fáciles formas de configurar emacs para editar archivos HTML que contienen JavaScript.

Referencia: https://web-mode.org/

Publicación traducida automáticamente

Artículo escrito por viditawasthi2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *