search
LoginSignup
11

More than 5 years have passed since last update.

posted at

Organization

WebStormでGruntの入力補完を可能にするLibraries機能

こんにちは、らこです。今日はWebStormの「JavaScript Libraries」機能についてです。「WebStorm、補完がすごいって聞いてたのに変だなあ」という事案の何割かはこれで解決できるはずです。

requireを例に

Node.js用JavaScriptを書いていると、外部モジュールを読み込むためにrequireすることは多々ありますよね。でもWebStormで書くと定義されていなくて「?」となります。また、モジュール側のmodule.exportsも下線が出て気持ち悪いです。実行すれば動くのに、どうしてWebStormはわかってくれないんでしょうか

image

WebStormはWeb開発IDEです

というのも当然の話で、WebStormは基本的にクライアントサイドのJavaScriptを書くことを想定しています。ブラウザで実行するJavaScriptを書いているのにrequiremoduleが参照出来たら問題ですね。

なのでNode.jsを書くときは「このファイルはNode.jsのライブラリ参照するよ」という設定をしないといけません。

Node.js Globalsを有効にする

Node.jsの標準APIを参照するには、Node.js Globalsというライブラリを有効にします。ライブラリを有効にするにはエディターのコンテキストメニューから「Use JavaScript Libraries」を選び、「Node.js Globals」にチェックを入れます。

image

これでmodulerequireなどのNode.jsのグローバルスコープにアクセスできます。

image

応用篇

Gruntのライブラリを有効にする

WebStormでGruntを使ったことがある方は一度はこの様子を見たことがあるでしょう。もしかしたら今もこの状態で書いている方もいるかもしれません

image

下線ばかりでとても嫌な気分になりますね。先ほどと同じようにNode.js Globalsを有効にしても、最初のmodule以外は変わりません。grunt.initConfiggrunt.fileは補完が効きません。

これを解決するために、TypeScriptの力を借ります。TypeScriptとは行っても型定義ファイルを補完に利用するだけです。

まず設定からLibrariesを開きます。

image

右の「Download」ボタンを押して、ウェブ上から新しいライブラリを入手します。「Official Libraries」ではなく、「TypeScript community stub」を選択して下さい。ここにはたくさんのJavaScriptライブラリの型定義ファイルが集積しています。どこから集めているかというと、DefinitelyTypedです。

image

この中からgruntjsを選んでダウンロード&インストールすると、「Use JavaScript Libraries」の候補の中にgruntjsが追加されます。有効にすればGruntfile.jsが綺麗になるはずです。

image

補完候補もバッチリです

image

まとめ

Gruntにかぎらず多くのライブラリでこの手法が使えます。npmでインストールしたライブラリはたいていWebStormが自動で読み込んで補完候補に入れてくれますが、Gruntのような例外があった場合はLibraries機能を使ってみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
11