on何かJavaScriptとかVimとかMacとかに関係してそうな深淵から覗かれる者この広告は、90日以上更新していないブログに表示しています。2012の52日目の記事です。前回の記事はasion_mさんのフロントエンジニアがちょっと幸せになるかもしれないプラグイン作ってます。良い具合に、フロントエンドのお話続きになっており「流れがキタ!」などと浮かれていたところ、はてなブログが0時から8時まで長時間のメンテに入っており泣きたい気分で一杯になっています。気を取り直して、エントリを書いていきたいと思います。自分は一応JavaScriptを書くことで(または書かない事で)オマンマを食べさせていただいてる訳ですが、そういえばあんまりJavaScript書く環境についてブログに書いてないなーと思い、自分が使ってるJavaScript関連のプラギンと設定なんかを紹介していこうと思います。「これは常識でしょpgr」などというものが多数含まれていることは予想されますが、気にしないでください。いうことで早速始めていきたいと思います。何だかんだと1年くらいはメインの環境が変わっていないようにも思えるので、ブコメやコメントでおすすめなどありましたら、教えてください。プラギンのURLはあんまり更新されていないものはVim公式、結構な頻度で更新されているものはGitHubの方で書いてる...つもり。あ、インストール自体は、VundleとかNeoBundleとかPathgenとか好きなのでどうぞ。(投げっぱ)Simple-Javascript-IndenterVimのJavaScriptのインデントはデフォルトでもそこそこ優秀な部類だと思うのですが、やっぱり複雑なオブジェクトやjQueryなんかでの書き方のときに「いや、このインデントはちょっとねーわ...」みたいな事があると思います。そんな時はこのプラギンを導入してください。劇的にストレスフリーなインデントがお楽しみいただけると思います。1点だけ、作者も注意書きしてるんですが、switch文は上手くインデントができないようで、こんな感じになってしまうのはご愛嬌です。許してあげてください。ここに目をつぶれば大変に満足がいくインデントになるかと思います。jQueryjQueryのシンタックスです。これの良いところはjQueryのメソッドやjQueryオブジェクトのIDとクラスを色分けしてくれるところです。そんな時はこのシンタックスがあると色分けされるので間違えにくくなる気がします。syntax=jqueryとかにすると普通のJavaScriptファイルでも色分けしてくれます。残念なことにjQueryのv1.5.1以降更新がされていないんですよね...。実用上はあんまり問題ないんですが、forkしてあるんで時間あるときに更新しようかと考えています。いつになるんだろうか。syntax=jqueryvim-javascript-syntaxVimのJavaScriptのシンタックスはデフォルトでもそこそこ優秀な部類だと思うのですが、やっぱり複雑なオブジェクトなんかや細かい部分の色もつけてみたいところです。このシンタックス入れると例えばfunctionの後の関数名や無名関数や、等価演算子やら細かいところまで行き届いたシンタックスカラーが堪能できることでしょう。詳しくは、GitHubレポジトリのスクショ見てください。ここまでは、まあ基本の基本っすよね。ここだけでもデフォルトのVimよりも使いやすくなっていると思いますが、以下のプラギンを目的に応じて入れるともっとステキング。neocomplcache説明不要でしょうが、necoです。これを入れるとまあ補完が捗る捗る。自分はJavaScriptのスニペット用としてhonza/snipmate-snippetsを入れてたりします。本当はnecoのバージョンアップに合わせて、こちらのスニペットもneco仕様にしたいんですが、面倒なんでやってないっす...。設定例は長いので省略。jscomplete-vimJavaScriptのメソッド補完を可能にしてくれるプラギンです。ES.nextとかVimperatorで有名なteramakoさん作のステキプラギンです。これは自動で上で紹介してるneocomplcacheと連動してくれます。これがあるのと無いとでは、補完自体の賢さが違ってきます。メソッドを書くのに.なんかを入れただけで、空気を読んだ補完候補を出してくれます。'es6th']syntasticこれもnecoと同じで特にJavaScript専用ということはないですが、Vimのもはやデファクトなシンタックスチェッカーになった感のあるプラギンです。Compilerなど環境に入ってさえいれば勝手にそれを使ってシンタックスチェックしてくれるというところです。大体JavaScript書く人でVimとか使ってる人の環境にはどれかは入ってると見越してるんでしょうか。自分は保存のタイミングでチェック走らせてますが、任意のタイミングでチェックもできるし、エラー内容はquickfixに出たりするので大変に修正がしやすいです。"jshint"ここまで揃えるともはや、JavaScript書くのには完成系だと思います。こっからはさらに目的を絞ったプラギンを導入していくと、毎回使うことはなくても「かゆい所に手が届く」環境になっていきます。tagbarctagsなどで生成したタグファイルを表示してくれるプラギンです。これを入れるとctagsなどのパスさえ設定しておけば、ファイル内の関数や変数なんかが一覧で見られて定義場所に簡単にジャンプできるようになります。規模が大きいソースになると「これどこで定義してるんだよ...」ということが起こりがちですが、このプラギンのおかげでIDEのように簡単に目的の関数なんかが探せるようになります。自分は以前に紹介したDoctor.jsと組み合わせてJavaScript用のタグを表示しています。今回紹介してませんが、CoffeeScriptのタグ生成の設定なんかもしてます。}vim-buster知ってる人は知ってると思いますが、Buster.jsというテスティングフレームワークがあります。個人的にはJasminとかよりも好きなので、個人のプロジェクトに使ったりしてますが、その導入を助けてくれる、Vimプラギンです。testが走ったりしてくれます。あとassertなんかもnecoを導入してると補完してくれるように(なぜか)なります。実は以前にJasminも使わなければならなくなってjasmin.vimという同じようなプラギンを入れたら、ばっちりとバッティングしてしまい、「まあbusterの方入れててもBDDっぽい補完してくれるし」という理由で、jasmin.vimの方は外してしまいました。好みに応じて、テスティングフレームワークも、Vimプラギンも使い分けが必要なようです。設定はしていなくても使えると思います。vim-handlebars知ってる人は知ってると思いますが、Handlebars.jsというJavaScriptテンプレートエンジンがあります。個人的にはejsとかよりも好きなので、業務でも使ったりしてましたが、そのシンタックスハイライトしてくれる、Vimプラギンです。拡張子が.hbや.handlebarsなんかのものは勝手にシンタックスハイライトしてくれます。自分はしてませんが、普通のHTMLにscriptタグとしてテンプレート書いてる場合なんかは、ファイルタイプをもごもごすると良いんじゃないでしょうか。(やったことない)これも設定は特にしていなくても使えると思います。JavaScriptの環境はこんな感じになっております。他にもVim自体を便利にするプラギンなどはもちろん多数ありますが、JavaScriptに焦点を絞ると上記のような環境です。この環境で満足度が非常に高いために、あまりJavaScript関連で他のプラギンなんかを積極的に探すという機会が減っているのですが、もちろん良いプラギンがあれば使っていきたいと思います。何だかデジャブのように似たような文章を繰り返してしまいましたが、これで今回のエントリは終了としたいと思います。Calendarはaespinosaさんのエントリーになります。新年明けましておめでとうございました。今年もゆるくお願いし...2012-08-13Omni補完の複数のomnifuncを同じfiletypeに複数設定できたかもVimでomni補完で使用するomnifuncを同じfiletypeで複数設定した...2012-08-09Vimでomni補完で使用するomnifuncを同じfiletypeで複数設定したいま、表題の通りなんですけども。(7)はてなブログをはじめよう!Layzieさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。