UP | HOME

emacs 24 で Web 開発の環境を作る

目次

1 環境

  • Windows 7 64bit
  • gnupack _ devel-13.06-2015.11.08
    • xmllint: /usr/bin/xmllint: using libxml version 20902 compiled with: Threads Tree Output Push Reader Patterns Writer SAXv1 FTP HTTP DTDValid HTML Legacy C14N Catalog XPath XPointer XInclude Iconv ISO8859X Unicode Regexps Automata Expr Schemas Schematron Modules Debug Zlib Lzma
  • GNU Emacs 24.5.1 (i686-pc-cygwin) of 2015-11-08 on gnupack
    • emmet-mode-20151213.738
    • web-mode-20160323.1550
    • js2-mode-20160326.1758
    • moz-20150805.1006
    • moz-controller-20141001.2347
  • Waterfox 44.03
  • Node.js v5.9.1

2 emmet-mode

HTML や CSS を簡単に記述できる emmet 記法を emacs 上で使用するもの 1。 

M-x package-install emmet-mode

init.el は以下のような感じ。 

(require 'emmet-mode)
(add-hook 'web-mode-hook 'emmet-mode)
;; (eval-after-load "emmet-mode"
;;   '(define-key emmet-mode-keymap (kbd "C-j") nil)) ;; C-j は newline のままにしておく
(add-hook 'emmet-mode-hook (lambda () (setq emmet-indentation 2)))
(define-key emmet-mode-keymap (kbd "C-<return>") 'emmet-expand-line)

使い方は、例えば、html ファイルを開いて 

a+b

として、C-<return> すると 

<a href=""></a>
<b></b>

と展開されるような感じ。より詳しく学ぶためには Emmet/Zen-coding 入門 (全 10 回) - プログラミングならドットインストールをやるといいかも。

3 web-mode

HTML、JavaScript、CSS、PHP、JSP、Twig、Jinja2、ASPX、ERB、FreeMarker 包括的にサポートする環境。 

M-x package-install web-mode

init.el は以下のような感じ。 

(require 'web-mode)
;; *.phtml, *.html, *.htm, *.tpl.php, *.jsp, *.ascx, *.aspx, *.erb
(add-to-list 'auto-mode-alist '("\\.p?html?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.jsp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
;; なぜか C-;に C-c C-;と同じ機能が割り当てられてるので削除する
(define-key web-mode-map (kbd "C-;") nil)
;;; 
(add-hook 'web-mode-hook 'rainbow-mode)

さらに、org-mode と合わせるよう、以下のように設定している。 

M-x package-install smartrep

init.el は以下のように。 

(require 'smartrep)
(smartrep-define-key web-mode-map "C-c"
  '(("C-p" . web-mode-parent-element)
    ("C-n" . web-mode-match-tag)
    ("C-l" . web-mode-previous-element)
    ("C-m" . web-mode-mark-and-expand)))

使い方は、例えば、タグ内で C-c C-p とすれば開始タグに移動するといったもの。

4 js2-mode

超強力な JavaScript のモード。 

M-x package-install js2-mode

init.el は以下のような感じ。 

(require 'js2-mode)
(add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))
(add-to-list 'auto-mode-alist '("\\.jsx\\'" . js2-jsx-mode))

使い方は javascript を書きまくっていけば分かるはず。。。

5 MozRepl + moz.el

MozRepl は telnet 経由で Mozilla ベースのブラウザ(firefox や waterfox など)を操作するアドオン。

  1. mozrepl を インストール
  2. ブラウザを再起動
  3. [F10] を押す
  4. [Tools] > [MozRepl] > [Activate on startup]
  5. ブラウザを再起動

moz.el は MozRepl と連携をとるもの。 

M-x package-install moz.el

init.el は以下のような感じ。 

(require 'moz)
(add-hook 'js2-mode-hook 'moz-minor-mode)

;;; リロードの設定
(defun reload-firefox-if-local ()
  (interactive)
  (comint-send-string
    (inferior-moz-process)
    "if (content.location.host == \"localhost\" || content.location.host == \"\") { BrowserReload(); }"))

使い方は例えば、jstest.html として以下のものを用意しておいて、MozRepl を入れたブラウザで開き、 

<html>
    <head>
    <title>sample</title>
    </head>
    <body>
    <script src="./jstest.js" type="text/javascript"></script>
    </body>
</html>

test.js として、同じ場所に、以下のような内容で用意しておいて、 

document.write("Hello, World!");

Hello, World! の文字列を適当に変えた後、M-x reload-firefox-if-local とすると自動でブラウザ表示が更新される2。

6 flycheck

構文チェックツール。 

M-x package-install flycheck

7 nxml-mode

nxml-mode はデフォルトで入っている。構文チェックツールとして cygwin の xmllint を使う。 

$ apt-cyg install libxml2
$ xmllint --version
/usr/bin/xmllint: using libxml version 20902
   compiled with: Threads Tree Output Push Reader Patterns Writer SAXv1 FTP HTTP DTDValid HTML Legacy C14N Catalog XPath XPointer XInclude Iconv ISO8859X Unicode Regexps Automata Expr Schemas Schematron Modules Debug Zlib Lzma

init.el は以下のような感じ。smartrep は web-mode と同じ感じに。 

(require 'nxml-mode)
(add-to-list 'auto-mode-alist '("\\.xml$" . nxml-mode))
(add-hook 'nxlm-mode-hook #'flycheck-mode)
(add-hook 'nxlm-mode-hook 'emmet-mode)
(require 'smartrep)
(smartrep-define-key nxml-mode-map "C-c"
  '(("C-p" . nxml-backward-element)
    ("C-n" . nxml-forward-element)  ; デフォルトは rng-next-error
    ("C-u" . nxml-up-element)
    ("C-d" . nxml-down-element)
    ))

8 json-mode

json-mode を入れる。 

M-x package-install json-mode

init.el は以下のような感じ。 

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

構文チェックツールとして、Windows の node.js に入っている jsonlint を使うため Node.js からダウンロードしてインストール。 その後、PATH を設定して動作確認する。 

$ export PATH=$PATH:/home/clothoid/node_modules/.bin/jsonlint
$ which jsonlint
/home/clothoid/node_modules/.bin/jsonlint
$ jsonlint --version
1.6.2

使い方は以下のような感じ3。 

$ cat 2016-03-31-191947.json
[{ "name":"clothoid", "favarite":["kashima antlers" "emacs"]},]
$ jsonlint 2016-03-31-191947.json
[Error: Parse error on line 1:
...:["kashima antlers" "emacs"]},]
-----------------------^
Expecting 'EOF', '}', ':', ',', ']', got 'STRING']

9 参考

<a href="https://twitter.com/share" class="twitter-share-button" data-via="clothoid" data-size="large">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!– responsive –> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6390292679676181" data-ad-slot="9831612556" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

脚注:

1

これの古いものに zencoding-mode というものがある。

2

after-save-hook に reload-firefox-if-local を add-hook するような設定もよくある。昔、これをやって、org-html-export-to-html や org-html-export-as-html で以下のようなエラーが出てハマッたことがあったから、使ってない。reload-firefox-if-local をどこかのキーバインドに割り当てて使うのがいいと思う。 

Can't start MozRepl, the error message was:

     make client process failed: connection refused, :name, MozRepl, :buffer, *MozRepl*, :host, localhost, :service, 4242, :nowait, nil

A possible reason is that you have not installed
the MozRepl add-on to Firefox or that you have not
started it.  You start it from the menus in Firefox:

     Tools / MozRepl / Start

See MozRepl home page for more information.

MozRepl is also available directly from Firefox add-on
pages, but is updated less frequently there.
3

(add-hook 'json-mode-hook #'flycheck-mode) としたいところだけど、以下のエラーが出る。この理由はコレ→ Cygwin 版 Emacs の flycheck (JSHint) で JavaScript のシンタックスチェックをする - nkenbou のはまり日記 

Error: ENOENT: no such file or directory, open 'E:\c\temp\gnupack\flycheck7352doC\2016-03-31-191947.json'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:431:33)
    at main (E:\home\clothoid\node_modules\jsonlint\lib\cli.js:135:23)
    at Object.<anonymous> (E:\home\clothoid\node_modules\jsonlint\lib\cli.js:179:1)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)

著者: clothoid

Created: 2022-08-27 Sat 17:03

Validate