Làm thế nào để sử dụng chế độ xiên?


19

Tôi hiện đang vật lộn để sử dụng chế độ xiên trong Emacs.

Tôi đã tải xuống và cài đặt chế độ xiên qua MELPA, vì vậy tất cả các phụ thuộc phải được đưa vào.

Đối với mục đích thử nghiệm, tôi thậm chí đã tải về boidsjs bản demo .

Tôi sẽ mở ra boids.js, sau đó gõ M-xrun-skewer(mở trình duyệt bằng URL http://127.0.0.1:8080/skewer/demo) và sau đó chạy M-xskewer-mode(-> bật chế độ xiên).

Nhưng trong trình duyệt không có gì xảy ra.

Tôi đang làm gì sai?


Theo tôi hiểu, xiên cung cấp một giao diện để đánh giá javascript ... Bạn có thực sự đánh giá nội dung của boids.jsbộ đệm không?
T. Verron

Tôi đang tải bộ đệm hiện tại với <kbd> Cx Ck </ kbd> ("boid.js đã tải") và cố gắng đánh giá với <kbd> Cx Ce </ kbd>. Nhưng nó mang lại cho tôi một lỗi mà nó không thể phân tích được dấu "$" -. Đó là bởi vì nó không tải jQuery từ tệp HTML tương ứng (example.html)
JacksGT

2
Bạn cần đánh giá tệp html ở chế độ xiên-html.
Jordon Biondo

Làm sao? C-x C-kkhông hoạt động trongskewer-html-mode
JacksGT

Câu trả lời:


16

TLDR; Bạn phải khởi động máy chủ http ( đơn giản-http ) và tải các tệp HTML của bạn thông qua nó.

Ví dụ: giả sử bạn có một tệp HTML có tên hello.htmlvà tệp tập lệnh JS có tên script.jstrong /home/user/Documents/javascriptthư mục.

xin chào.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 (hoặc .emacs ):

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

Đã đến lúc khởi động máy chủ : M-x httpd-start, và mở index.htmltệp trong trình duyệt, bằng cách truy cập http://localhost:8080/hello.html. Bạn sẽ nhận được cảnh báo trong trình duyệt và bây giờ gọi skwer-repl.

Bạn có thể tương tác thêm với trình duyệt thông qua thay thế. Vì vậy, mọi thứ bạn đánh giá trong bản thay thế sẽ được truyền tới trình duyệt. Ví dụ: nếu bạn nhập thay console.log('hey!')thế, bạn sẽ nhận được thông báo này trong bảng điều khiển của trình duyệt.

Nếu bạn muốn sửa đổi tương tác HTML (ví dụ: thẻ HTML cập nhật trực tiếp từ emacs), hãy thêm vào init.el (hoặc .emacs ) của bạn:

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

Bây giờ khi bạn ở trong tệp .html của mình, bạn có thể đánh giá các thẻ bằng C-M-x( skewer-html-eval-tag) và những thẻ này sẽ được cập nhật ngay lập tức trong trình duyệt của bạn.

Hãy nhớ rằng ngược lại, điều này cũng áp dụng cho các tệp CSS và CSS.


1
Đây thực sự là câu trả lời tuyệt vời, cảm ơn vì đã đăng nó. Có lẽ cũng không có giá trị gì nếu bạn không muốn mã hóa cứng httpd-roottrong cấu hình của mình, bạn có thể chạy M-x eval-expression (setq httpd-root "/path/to/files")từ bên trong emacs bất cứ lúc nào.
Cody Re Richt

vô dụng '\' trong ví dụ html <script src="http://localhost:8080/skewer"></script>\ (không thể chỉnh sửa - chỉnh sửa phải> = 6 ký tự)
kai-dj

8

Thay vì chạy bản demo, chỉ cần thực hiện các bước tối thiểu này để đảm bảo rằng mọi thứ đều hoạt động chính xác.

  1. Mở một bộ đệm mới với tên myskewer.js
  2. Kích hoạt chế độ JS2 (phụ thuộc của xiên)
  3. Bật chế độ xiên
  4. M-xrun-skewer (một trình duyệt mở ra, quay lại myskewer.js)
  5. Nhập alert("hello");và đánh C-xC-eở cuối dòng đó
  6. Quay trở lại trình duyệt.

Bạn sẽ thấy một hộp cảnh báo trên trang.


Cảm ơn bạn vì câu trả lời! Thật không may, tôi đã nhắc lỗi "Không tìm thấy phần tử có thể
thu gọn

Xin lỗi, là lỗi của tôi. C-x C-elà các phím thực tế để đẩy. sẽ chỉnh sửa câu trả lời của tôi
Gambo

Điều đó đã làm việc! Tuy nhiên: Làm cách nào để tôi bảo Skewer tải HTML? (Như được hiển thị trong bản demo)
JacksGT

1
@JacksGT Đặt các tệp đã tải xuống của bạn vào ~/public_htmlsau đó làm theo hướng dẫn cho "Phiên bản thủ công" tại liên kết này . Khi đã xong, hãy truy cập localhost: 8080 trong trình duyệt của bạn.
Gambo

1

Trong trường hợp cổng 8080 đã được sử dụng :

bạn có thể định cấu hình xiên / đơn giản-httpd để sử dụng cổng khác bằng cách tùy chỉnh httpd-portbiến. ( M-x customize-variable<ret>httpd-port)

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.