IntelliJ IDEA で JSHint を使う

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

設定方法

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

jshintIdea01

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

jshintIdea02

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

jshintIdea03

jshintIdea04

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

動作確認

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

jshintIdea05

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

jshintIdea06

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

jshintIdea07

注意

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

絞め

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

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

当ブログの類似記事

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