読者です 読者をやめる 読者になる 読者になる

今日学んだこと

読書感想文とか、勉強した内容とか

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っぽく書いてみようかと思います。

f:id:nakazye:20140918004606p:plain

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

f:id:nakazye:20140918004719p:plain

閉じタグ自動挿入!(後述の設定が必要です)

f:id:nakazye:20140918005152p:plain

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

f:id:nakazye:20140918010159p:plain

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

f:id:nakazye:20140918010656p:plain

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

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

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

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

f:id:nakazye:20140918011927p:plain

僕の設定

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

;########################################
; 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を上回る盛り上がりを見せる日が来ることを、切に願ってます。