Come usare la modalità spiedino?


19

Attualmente sto lottando per utilizzare la modalità spiedino in Emacs.

Ho scaricato e installato la modalità spiedino tramite MELPA, quindi tutte le dipendenze dovrebbero essere presenti.

A scopo di test ho persino scaricato la boidsjs demo .

Aprirò boids.js, quindi scrivo M-xrun-skewer(apre il browser con URL http://127.0.0.1:8080/skewer/demo) e infine eseguo M-xskewer-mode(-> modalità spiedino abilitata).

Ma nel browser non succede nulla .

Che cosa sto facendo di sbagliato?


Da quanto ho capito, spiedino fornisce un'interfaccia per la valutazione di javascript ... si fa effettivamente valutare il contenuto del boids.jsbuffer?
T. Verron,

Sto caricando il buffer corrente con <kbd> Cx Ck </kbd> ("boid.js caricato") e sto provando a valutare con <kbd> Cx Ce </kbd>. Ma mi dà un errore che non è riuscito ad analizzare il segno "$". Questo perché non ha caricato jQuery dal corrispondente file HTML (esempio.html)
JacksGT

2
È necessario valutare il file html in modalità skewer-html.
Jordon Biondo,

Come? C-x C-knon funziona inskewer-html-mode
JacksGT

Risposte:


16

TLDR; Devi avviare il server http ( simple-http ) e caricare i tuoi file HTML attraverso di esso.

Ad esempio, supponiamo che tu abbia un file HTML denominato hello.htmle un file di script JS denominato script.jsnella /home/user/Documents/javascriptcartella.

ciao.html :

<!doctype html>
<html>
<head>
    <!-- Include skewer.js as a script -->
    <script src="http://localhost:8080/skewer"></script>
    <!-- Include my script.js file -->
    <script src="script.js"></script>
</head>
<body>
    <p>Hello world</p>
</body>
</html>

script.js :

alert('hey!');

init.el (o .emacs ):

(require 'simple-httpd)
;; set root folder for httpd server
(setq httpd-root "/home/user/Documents/javascript")

È tempo di avviare il server: M-x httpd-starte aprire il index.htmlfile nel browser, visitando http://localhost:8080/hello.html. Dovresti ricevere l'avviso nel browser e ora chiamare skwer-repl.

È possibile interagire ulteriormente con il browser tramite il sost. Quindi, tutto ciò che valuti nella sostituzione verrà trasmesso al browser. Ad esempio, se si digita console.log('hey!')il sostituto, questo messaggio verrà visualizzato nella console del browser.

Se si desidera modificare in modo interattivo HTML (ad es. Tag HTML di aggiornamento live da emacs), aggiungere a init.el (o .emacs ):

(add-hook 'html-mode-hook 'skewer-html-mode)

Ora quando sei nel tuo file .html puoi valutare i tag con C-M-x( skewer-html-eval-tag) e questi verranno immediatamente aggiornati nel tuo browser.

Tieni presente che al contrario, questo vale anche per i file CSS e CSS.


1
Questa è davvero un'ottima risposta, grazie per averla pubblicata. Probabilmente non vale nulla che se non vuoi hardcodificare httpd-rootnella tua configurazione, puoi correre M-x eval-expression (setq httpd-root "/path/to/files")da emacs in qualsiasi momento.
Cody Reichert,

inutile "\" nell'esempio html <script src="http://localhost:8080/skewer"></script>\ (impossibile modificare - le modifiche devono essere> = 6 caratteri)
kai-dj

8

Invece di eseguire la demo, esegui questi passaggi minimi per assicurarti che tutto funzioni correttamente.

  1. Apri un nuovo buffer con il nome myskewer.js
  2. Abilita modalità JS2 (una dipendenza di spiedino)
  3. Abilita la modalità spiedino
  4. M-xrun-skewer (si apre un browser, torna a myskewer.js)
  5. Digita alert("hello");e premi C-xC-ealla fine di quella riga
  6. Torna al browser.

Dovresti vedere una finestra di avviso sulla pagina.


La ringrazio per la risposta! Sfortunatamente, mi viene richiesto l'errore "Nessun elemento
comprimibile

Scusa, errore mio. C-x C-esono le chiavi effettive da premere. modificherò la mia risposta
Gambo,

Ha funzionato! Tuttavia: come faccio a dire a Skewer di caricare anche l'HTML? (Come mostrato nella demo)
JacksGT

1
@JacksGT Posiziona i file scaricati, ~/public_htmlquindi segui le istruzioni per "Versione manuale" a questo link. Fatto ciò, visita localhost: 8080 nel tuo browser.
Gambo,

1

Nel caso in cui la porta 8080 sia già in uso :

puoi configurare skewer / simple-httpd per usare un'altra porta personalizzando la httpd-portvariabile. ( M-x customize-variable<ret>httpd-port)

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.