IntelliJ IDEA で JSHint を使う

IntelliJ IDEA には JSHint が統合されている

JSHint は、Node.js で実装されている JavaScript 用コード検査ツールです。
IntelliJ IDEA (WebStorm など ) には JSLint/JSHint が統合されており、コーディング中に構文チェックすることができるので、設定方法を紹介します。( デフォルトでは無効化されているため、設定する必要があります )

設定方法

[Settings] ダイアログにて [[JavaScript]] -> [Code Quality Tools] -> [JSHint] を選択します。

[Enable] チェックボックスにチェックを入れることによって、JSHint が有効になり、コード検査をするときのルールオプションを細かく設定することができます。

さらに [Use config files] チェックボックスにチェックを入れることによって、手持ちの設定ファイル (.jshintrc) に則ったコード検査を実行することができます。また、[Version] コンボボックスでは、JSHint のバージョンを切り替えることができます。チーム開発時には、どのバージョンを使用するか決めておくと良いでしょう。

以上で設定は終了です。簡単ですね。

動作確認

実際 JSHint が動作しているか確認します。
簡単なコードを書きましたがお怒りのご様子…エディタの右端が赤く表示されています。

定義している引数が一度も使われていないために怒られましたので、引数を使ってあげましょう。
先ほどではありませんが軽く怒られます。エディタの右端が黄色く表示されています。

もう少しまともに使ってあげることによって合格印をもらえました。エディタの右端が緑色に表示されます。

注意

コード編集中、割と頻繁にチェックが走るので、開発環境によっては動作が重くなる可能性があります。大量にコードを編集する場合には、コード検索の設定をオフにするのもひとつの手段となります。

絞め

私が JSHint を使い始めたきっかけは、Angular Generator のテンプレートに .jshintrc が含まれていたので利用してみよう…という些細なことだったのですが、使ってみるとなかなか良いものです。

IntelliJ IDEA を使えばコード検査は簡単に始めらるので、同製品のユーザーさんは、お行儀のよいコードを書くよう心がけると良いのではないでしょうか。

当ブログの類似記事

JSHint で JavaScript の構文チェック & Sublime Text2 でのチェック
https://dev.classmethod.jp/tool/jshint-javascript-sublime-text2/