Hack #160: JavaScript開発環境

問題

Vimのデフォルトの状態でJavaScriptのコードを書くと、以下のような問題が発生します。

1. インデントがおかしい

   var a = {
     a_
   

   この状態で:を打鍵しますと、

   var a = {
   a:_
   

   のようにインデントが一つもどってしまいます。

2. キーワードがおかしい

   jQuery時代、$ではじまる変数名を使う機会が増えています。

   var $a = 1;
   

   このaの位置から*を打鍵しますと、$aではなくaという単語だけを検索対象にしてしまいます。

3. 予約語functionが長い

   JavaScriptでは関数定義時だけでなく無名関数を用いるときにもfunctionという長い予約語を打鍵する必要があります。

解決法

いつくかのプラグインを導入します。

1. JavaScript syntax プラグインの導入

   http://www.vim.org/scripts/script.php?script_id=1491

2. Javascript Indentation プラグインの導入

   http://www.vim.org/scripts/script.php?script_id=1840

   var a = {
     a_
   

   この状態で:を打鍵しますと、

   var a = {
     a:
   

   のようになります。

   このプラグインはIndentAnythingというライブラリを使用しているため、こちらのライブラリも導入する必要があります。

   http://www.vim.org/scripts/script.php?script_id=1839

3. smartchr.vimプラグインの導入

   たとえばプログラミング言語Haskellでは、無名関数を作成するにあたってバックスラッシュを使用します。

   map (\x -> f (x * 2)) [1, 2, 3]
   

   これはJavaScriptでは, jQueryを用いると

   $.map([1, 2, 3], function(x) { return f(x * 2); });
   

   となります。このことから類推すると、\と打鍵することでfunction(と入力されることが望ましいことが分かるのですが、 文字列リテラル内で\を入力するときにfunction(と展開されてしまうと開発に大きな支障をきたしてしまいます。

   文脈に応じて\キーの意味を動的に変更させるという解決方法もありますが、もっと単純にsmartchr.vimを用いて、\一回打鍵するとfunction(に展開し、その状態でもう一度\を打鍵すると\になるという挙動をとるようにすれば、シンプルにして必要十分な解決策となりうるのでないかと筆者は思っています。

   smartchr.vimについて詳しくはHack #131: Rubyで#{をラクに入力するをご覧ください。

   smartchr.vim導入後、以下の設定を~/.vimrcに記述しましょう。

   augroup Ujihisa " {{{
     autocmd!
     autocmd FileType javascript inoremap <buffer> <expr> \  smartchr#one_of('function(', '\')
   augroup END
   

   あるいは、以下の設定を~/.vim/ftplugin/javascript/ujihisa.vimに記述しましょう。

   inoremap <buffer> <expr> \  smartchr#one_of('function(', '\')
   

補足

そもそもJavaScriptを直接記述するのを避け、CoffeeScriptで代用するという手もあります。

ujihisa