京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

Sublime Text2を使ってJavascriptの構文チェックを行うためには、少し下準備をする必要があります。
今回はWindows上での導入方法について書きます。

・SublimeLinterプラグインのインストール
・Javascriptの実行環境　node.jsのインストール
・nodeのパッケージ管理システム npmのインストール
・JSHintのインストール

こうして並べてみると手間が掛かりそうです。
しかし、node.js＋npmはWindows用にインストーラーが用意されているため10分もあれば終わります。

環境

• Windows 7 SP1
• Sublime Text 2

導入手順

１．SublimeLinterプラグインのインストール

Package Controlを導入していればプラグインのインストールは楽ちんですね。Sublime Textを導入したばかりの方はひとまず入れておきましょう。
※Sublime Textの入門記事は大量にあるので割愛します。

２．node.jsとnpmのインストール

node.js公式サイトトップにある[INSTALL]ボタンをクリックします。
ダウンロードされた.msiファイルを実行してそのまま指示に従ってインストール。

インストール後はコマンドプロンプトでバージョンを表示してみて、インストールが無事済んだことを確認しておきます。

$ node -v
v0.10.18

$ npm -v
1.3.8

３．npmでJSHintをインストール

コマンドプロンプトを開き、npmでグローバルオプションを付けてJSHintをインストールします。

$ npm install jshint -g

はいこれで必要なソフトのインストールは完了です。
Sublime Text 2でJavascriptファイルを編集し、保存するした際に文法チェックが行われるようになります。
必要であれば、JSHintの設定を好きなように変えておきましょう。

４．SettingsファイルにJSHintの設定を書く

[Preferences]>[Package Settings]>[SublimeLinter]>[Settings - User]（もしくは[Settings - Default]]）に

    "jshint_options":
    {
        "evil": true,
        "regexdash": true,
        "browser": true,
        "wsh": true,
        "trailing": true,
        "sub": true
    },

以下はJavascriptだけの設定ではありませんが、好みに応じてこの辺をtrueにしておくと良いかもしれません。

    // If true, the find next/previous error commands will wrap.
    "sublimelinter_wrap_find": true,

    // If true, lines with errors or warnings will have a gutter mark.
    "sublimelinter_gutter_marks": true,

JSHintの設定参考

Documentation―JSHint

 

補足

※この記事の手順を追って導入した場合は特に何もしなくても大丈夫なはずですが、node.jsを手動でインストールしてパスが通っていない、もしくは複数のバージョンのnode.jsを使っているなどの状態であれば、SublimeLinterの設定に

    "sublimelinter_executable_map":
    {
        "javascript": "C:\Program Files\nodejs\node.exe"
    },

とnode.jsの実行ファイルを登録する必要がある場合もあります。