htmlとcssとjavascript編集用のメジャーモード

Emacs

次の3つを導入.

それぞれかなり便利.
javscript.elは, higeponさんのブログで紹介されてたのを思い出して探した.
今は配布元が消えちゃってる.
higeponさんのそのエントリにトラバしてる方(ZIGOROuさん)のページに元ページのWeb archiveへのリンクがあって, そこから頂いた.
感謝感謝.

html-helper-mode


yahtmlから乗り換え. 理由は色付けが綺麗だから.
html-helper-modeは, 3.0.4jollyってのを使ってる.
なんか色々なバージョンが出回ってるみたいで, 探すとき戸惑う.
このバージョンを使ってるのは, jspファイルの編集にも使えるから.


キーバインドがyahtmlと全然違う(当たり前)から, 最初は使いづらく感じた.
(と言ってもまだそんなに使ってるわけじゃないけど.)
なんかこんな感じのルールになってるっぽい.

 C-c ----通常のキー : エンターでbr,  =でhr, スペースで&nbsp;, <で&lt;などを挿入
      |--C-z 通常のキー : html-helper-modeの関数を実行
      |--C-s 通常のキー : phpの<? ?>とか, jpsの<% %>や, Javascriptの<srcipt>...を挿入
      |--C-f 通常のキー : フォーム入力に関するタグを挿入(inputとかformとか)
      |--C-h 通常のキー : <meta ...>とかヘッダに関するタグを挿入
      |--C-t 通常のキー : tableに関するタグを挿入(thとかcaptionとか)
      |--TAB 通常のキー : これに続くのは, aだけみたい. <img src="" >を挿入
      |--C-p 通常のキー : 文字の配置とか形(斜体にするとか)に関するタグを挿入
      |--M-h 通常のキー : 後に続くのは, 1から6の数字. h1, h2, ...を挿入
      |--M-l 通常のキー : preとかstrongとかを挿入
      |--C-l 通常のキー : リストに関するものを挿入(ulとかol)
      ---C-a 通常のキー : アンカーに関するもの

こう考えるとそんなに分かりづらくない.
まあ, 慣れるまでキーバインドをいちいち確認する必要があるけど.

css-mode


Googleで簡単に検索したら出てきたから, そのまま導入.
まだそんなに使いこんでないから何とも言えないんだけど, 良さそう.


そんなに特別なキーは提供してないっぽい.
まずは, brackets.elみたいなのがある([, (, ", { を記入したら, 対応も同時に挿入してくれるってやつ).
他には, C-cC-cでコメントの挿入, C-cC-uでurl()を挿入してくれる.



でも, これらよりも, ESC-TABが一番良いと思う.
ESC-TAB TABってやると, 挿入できるプロパティの一覧がずらっと出る(background-colorとかmarginとか).
入力にはタブ補完も効くし(margまで打ってタブをやるとmarginって補完), 途中のハイフンの入力は, スペースでできる.
問題は, ESC-TABって打ちづらいこと.
まあ, 変えりゃいいんだけどね.

javascript.el

使ってみた感想.
色付けとインデントがすごく綺麗.
それだけ.
というか, それしかない.



まあ, いつものように自動で対応する括弧を挿入するようにした.

;; javascript-mode
(add-to-list 'auto-mode-alist (cons  "\\.\\(js\\|as\\|json\\|jsn\\)\\'" 'javascript-mode))
(autoload 'javascript-mode "javascript" nil t)
(setq js-indent-level 4)

;; blackets.elで対応する括弧を自動的に挿入するようにする．
(add-hook 'javascript-mode-hook
          '(lambda()
             (progn

               ;; camelCase-modeを適用
               (camelCase-mode t)

               ;; { で{}を書く
               (define-key javascript-mode-map "{" 'insert-braces)
               ;; ( で()を書く
               (define-key javascript-mode-map "(" 'insert-parens)
               ;; " で""を書く
               (define-key javascript-mode-map "\'" 'insert-single-quotation)
               ;; " で""を書く
               (define-key javascript-mode-map "\"" 'insert-double-quotation)
               ;; [ で[]を書く
               (define-key javascript-mode-map "[" 'insert-brackets)
               ;; Ctrl+c }でregionを{}で囲む
               (define-key javascript-mode-map "\C-c}" 'insert-braces-region)
               ;; Ctrl+c )でregionを()で囲む
               (define-key javascript-mode-map "\C-c)" 'insert-parens-region)
               ;; Ctrl+c ]でregionを[]で囲む
               (define-key javascript-mode-map "\C-c]" 'insert-brackets-region)
               ;; Ctrl+c "でregionを""で囲む
               (define-key javascript-mode-map "\C-c\"" 'insert-double-quotation-region)
               )))

うーん, 最初だけM-;でのコメント挿入が効いてない気がする.