Emacsで快適Web開発

世界で一番イケてるエディタ、EmacsでWeb開発を効率的に楽しくできるようにしましょうという試みです。具体的に言うと、web-modeの導入です。

 ↓こちらの続き

 

web-modeの導入

Emacsにもパッケージ管理システムがある？僕は基本的には使いません

.emacs.dはgithubで管理するのがオススメです。なぜなら、こういったXXXX-modeなLisp達も、githubで公開されている事が多い。つまり、submoduleとして読み込んであげれば、別のPCに移っても復元がすごく楽！

ということで、submoduleとして取り込みます。

$ git submodule add https://github.com/fxbois/web-mode site-lisp/web-mode
Cloning into 'site-lisp/web-mode'...
remote: Counting objects: 1756, done.
remote: Compressing objects: 100% (21/21), done.
remote: Total 1756 (delta 8), reused 0 (delta 0)
Receiving objects: 100% (1756/1756), 2.46 MiB | 394.00 KiB/s, done.
Resolving deltas: 100% (862/862), done.
Checking connectivity... done.
$ 

 パッケージ管理使いたい！という人は、Emacsから

M-x package-install

して

Install package: web-mode

 でOK!

使ってみる

今電車の中で読んでるのがHTML5の本だったりするので、HTML5っぽく書いてみようかと思います。

ここまで書いてタグを閉じると・・・

閉じタグ自動挿入！（後述の設定が必要です）

自分で調整したインデントは一つもありません！全て綺麗に解釈してくれる！！

なんとJSPですらこの通り！！！インデントが綺麗！JSPだけでなく、PHPはもちろん、Djangoの標準テンプレートであるjinja2にまで対応してます。

JavaScriptもこの通り！もちろんCSSもいけちゃいます。

そして、以下のような便利なショートカットも有り。

• C-c C-n：対応した閉じタグ/開始タグにジャンプ
• C-c C-f：選択されているタグを折りたたむ
• C-c C-;：コメントアウトしたり外したり

公式には他にも便利な諸々が紹介されています

僕の設定

まだ使い始めたばかりなので、ほぼデフォルトです

;########################################
; web-mode setting
;########################################
(require 'web-mode)

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

(defun web-mode-hook ()
  "Hooks for Web mode."

  ;; indent
  (setq web-mode-html-offset   2)
  (setq web-mode-style-padding 2)
  (setq web-mode-css-offset    2)
  (setq web-mode-script-offset 2)
  (setq web-mode-java-offset   2)
  (setq web-mode-asp-offset    2)

  (local-set-key (kbd "C-m") 'newline-and-indent)
  
  ;; auto tag closing
  ;0=no auto-closing
  ;1=auto-close with </
  ;2=auto-close with > and </
  (setq web-mode-tag-auto-close-style 2)
)
(add-hook 'web-mode-hook 'web-mode-hook)
  

 いかがでしょうか？これを機に、Emacsを使ってみませんか？

いつかEmacsがviを上回る盛り上がりを見せる日が来ることを、切に願ってます。