Як користуватися режимом шпажки?


19

Наразі я намагаюся використовувати режим шпаклювання в Emacs.

Я завантажив і встановив режим шпаклювання через MELPA, тому всі залежності повинні бути на місці.

Для тестування я навіть завантажив boidsjs демонстрацію .

Я відкрию boids.js, потім введіть M-xrun-skewer(відкриває веб-переглядач з URL-адресою http://127.0.0.1:8080/skewer/demo), а потім, нарешті, запустіть M-xskewer-mode(-> режим перекидання увімкнено).

Але в браузері нічого не відбувається.

Що я роблю неправильно?


Наскільки я розумію, сканер надає інтерфейс для оцінки javascript ... Ви дійсно оцінюєте вміст boids.jsбуфера?
Т. Веррон

Я завантажую поточний буфер за допомогою <kbd> Cx Ck </kbd> ("завантажений boid.js") і намагаюся оцінити за допомогою <kbd> Cx Ce </kbd>. Але це дає мені помилку, що він не міг розібрати знак "$". Це тому, що він не завантажив jQuery з відповідного HTML-файлу (example.html)
JacksGT

2
Вам потрібно оцінити файл html у режимі skewer-html.
Джордон Біондо

Як? C-x C-kне працює вskewer-html-mode
JacksGT

Відповіді:


16

TLDR; Вам потрібно запустити http-сервер ( простий-http ) і завантажити через нього HTML-файли.

Наприклад, скажімо, у вас є ім'я HTML-файлу hello.htmlта файлу сценарію JS, вказаного script.jsв /home/user/Documents/javascriptпапці.

hello.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 (або .emacs ):

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

Настав час запустити сервер: M-x httpd-startі відкрити index.htmlфайл у браузері, відвідавши http://localhost:8080/hello.html. Вам слід отримати сповіщення у веб-переглядачі та зараз зателефонувати skwer-repl.

Ви можете надалі взаємодіяти з браузером за допомогою відбиття. Отже, все, що ви оцінюєте у відповіді, буде передано у браузер. Наприклад, якщо ви введете console.log('hey!')repl, ви отримаєте це повідомлення на консолі браузера.

Якщо ви бажаєте інтерактивно змінювати HTML (наприклад, теги HTML-оновлення в реальному часі від emacs), додайте до свого init.el (або .emacs ):

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

Тепер, коли ви знаходитесь у вашому файлі .html, ви можете оцінити теги за допомогою C-M-x( skewer-html-eval-tag), і вони будуть негайно оновлені у вашому браузері.

Майте на увазі, що навпаки, це стосується і файлів CSS та CSS.


1
Це дійсно чудова відповідь, дякую за публікацію. Напевно, також нічого не варто, якщо ви не хочете жорстко кодувати httpd-rootу своєму конфігурації, ви можете запустити M-x eval-expression (setq httpd-root "/path/to/files")зсередини emacs у будь-який час.
Коді Райхерт

марний '\' у прикладі html <script src="http://localhost:8080/skewer"></script>\ (не вдається редагувати - правки повинні бути> = 6 символів)
kai-dj

8

Замість того, щоб запускати демонстрацію, просто виконайте ці мінімальні кроки, щоб переконатися, що все працює правильно.

  1. Відкрийте новий буфер з ім'ям myskewer.js
  2. Увімкнути режим JS2 (залежність шампура)
  3. Увімкнути режим сканування
  4. M-xrun-skewer (відкриється браузер, поверніться до myskewer.js)
  5. Введіть alert("hello");і натисніть C-xC-eв кінці цього рядка
  6. Поверніться до браузера.

Ви повинні побачити вікно попередження на сторінці.


Спасибі за вашу відповідь! На жаль, мені запропонували помилку "У точці не знайдено жодного збірного елемента"
JacksGT

Вибачте, моя помилка. C-x C-e- це фактичні клавіші для натискання. відредагую мою відповідь
Гамбо

Це спрацювало! Однак: як я можу скажу Skewer також завантажувати HTML? (Як показано на демонстрації)
JacksGT

1
@JacksGT Розмістіть завантажені файли ~/public_htmlта виконайте вказівки "Ручна версія" за цим посиланням. Після цього відвідайте localhost: 8080 у вашому браузері.
Гамбо

1

Якщо порт 8080 вже використовується :

ви можете налаштувати skewer / simple-httpd для використання іншого порту, налаштовуючи httpd-portзмінну. ( M-x customize-variable<ret>httpd-port)

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.