Web開発周りのVimの設定

HTMLファイルを:makeで文法チェック

tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。

autocmd FileType html :compiler tidy
autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\"

tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。

HTMLファイルのインデントをやり直す

gg=G

ノーマルモードではggでファイルの先頭に移動して=Gでファイル全体をインデントし直すことができる。選択範囲のみをインデントし直す場合は、適当にビジュアルモードで選択した状態で=を押すだけ。1000行とかあるHTMLファイルだと結構時間がかかる。デフォルトではJavaScriptファイルでやると残念な結果に……。

HTMLファイルをブラウザで開く(Windows)

FirefoxやSafari、Chromeは普通にインストールするとApp Pathsに登録されるので、

:! start chrome.exe %
:! start firefox.exe %
:! start IEXPLORE.EXE %
:! start Safari.exe %

でブラウザで開くことができる。! startと間に半角スペースがあることに注意。

OperaのインストーラはApp Pathsに登録しないので、

REGEDIT4

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths\opera.exe]
@="C:\\Program Files\\Opera\\opera.exe"
"Path"="C:\\Program Files\\Opera"

といったレジストリファイルをインポートして登録してやると:! start opera.exe %で開くことができるようになる。

選択範囲を文字参照に変換

以下のPerlスクリプトをパスの通った場所に置いておく。

#!/usr/bin/perl

use strict;
use warnings;

use HTML::Entities;

print encode_entities(join('', <STDIN>), '&<>"\'');

その上でコマンドを作成。

command! -range EncodeEntities :'<,'>!perl -S encode-entities.pl

W3CDTFで日付と時刻の挿入

command! InsertDateTime :execute "normal! i".strftime("%Y-%m-%dT%H:%M:%S+09:00")

必要な人は少ないだろうけど。

CSSファイルを:makeで文法チェック

css.vimをダウンロードしてインストールする。

autocmd FileType css :compiler css

同梱のPerlスクリプト(validate_css)はパスの通ったディレクトリにコピーする必要がある。

JavaScriptファイルを:makeで文法チェック

JavaScript Lintをインストールし、javascriptlint.vimとして以下のファイルを$HOME/.vim/compiler(Windowsでは$HOME/vimfiles/compiler)以下に作成する。

if exists("current_compiler")
  finish
endif

let current_compiler = "javascriptlint"

if exists(":CompilerSet") != 2
  command -nargs=* CompilerSet setlocal <args>
endif

let s:cpo_save = &cpo
set cpo-=C

CompilerSet makeprg=jsl\ -nologo\ -nofilelisting\ -nosummary\ -nocontext\ -process\ %

CompilerSet errorformat=%f(%l):\ %m

let &cpo = s:cpo_save
unlet s:cpo_save

そして.vimrcに以下のように書く。

autocmd FileType javascript :compiler javascriptlint

JavaScriptファイルのインデントの改善

デフォルトのインデント・スクリプトはjQueryを利用してJavaScriptを書いているとかなり酷いことになる。

• foo(function () {の次の行のインデント
• foo({の次の行のインデント
• })でのアンインデント

あたりがメジャーなインデントがおかしくなる箇所で、「コード書くよりインデントの修正の方が大変！」というくらい(おおげさ)。

あれやこれやJavaScriptのインデント・スクリプトは見つかるが、Better Javascript Indentationが一番良かった。普通にインストールするだけで特に設定等は必要ない。

インストールすると以下のような典型的なPowered by jQueryのJavaScriptファイルがすんなりインデントされるようになる。気持ち良い！

$(function () {
  var num = 32;

  $("#monthly_archives > li").each(function (i, li) {
    if (i === num) {
      $(li).before($("<li/>").append($("<a/>").attr({
        href: "#archives-by-month"
      }).append("» more").click(function () {
        $(this).hide();
        $("#monthly_archives .folded").show();
      }))).addClass("folded").hide();
    } else if (i > num) {
      $(li).addClass("folded").hide();
    }
  });
});

気付いた範囲では、

var foo = {
  bar:
    function () {

と書いた時に、

• 次の行がインデントされない
• その後}で2段階アンインデントされてしまう

といったラベル絡みでの不具合があった。functionの前で改行しない場合は問題ないと思う(そう書けという意味ではない)。

また、これをインストールするとgg=Gによるインデントのやり直しも改善される(当たり前だけど)。ただし複数行コメント内の行頭の空白が消えてしまうので、

/*!
 * foobar
 * hogehoge
 */

といったYUI Compressor向けなコメントなどは、

/*!
* foobar
* hogehoge
*/

となってしまうので注意が必要。