Sublime Text3 に SublimeLinter-jshint をインストールしてみた

公開日: : 最終更新日:2014/05/05 プログラム , ,

エディタに Eclipse を使って Java のプログラムを書くことが多いんですが、JavaScript でフロント周りの実装もやってます。

Eclipse を使って Java を書いてると、ミスったときに Eclipse が「ここが間違ってるよ」と教えてくれて快適なのですが、JavaScript でも Sublime Text3 で同じようなことができると教えていただいたので、早速やってみました。

icatch-thumbup_3507728739_mini

photo credit: jeroen020 via photopin cc

目次

1. Node.js をインストール

SublimeLinter-jshint を動かすには Node.js が必要になります。
マシンに Node.js をインストールしていない場合は、インストールしておきます。

次の公式サイトにアクセスして、画面中央にある INSTALL ボタンをクリックします。

20140306_02_01

ボクは Windows マシンを使っているので msi ファイルがダウンロードされます。
2014/03/06 現在、Node.js の最新バージョンは v0.10.26 のようで、msi ファイルは次のものでした。

  • node-v0.10.26-x64.msi

この msi ファイルを実行して、マシンにインストールします。

基本的にエンターキーを連打でいいのですが、いちおうキャプチャ撮りましたんで貼り付けておきます。

20140306_02_02

Next ボタンをクリックします。

20140306_02_03

チェックを付けて Next ボタンをクリックします。

20140306_02_04

インストールディレクトリを指定します。

20140306_02_05

インストールするコンポーネントを選択します。
何が必要で何が不要なのかが分からなかったので、そのまま Next ボタンをクリックしちゃいました。

20140306_02_06

最後の確認です。
手順に問題がなければ Install ボタンをクリックします。

20140306_02_07

プログレスバーが表示され、インストール処理が開始されます。

20140306_02_08

インストール処理が正常に終了したようなので、Finish ボタンをクリックして処理を終わらせます。

2. JSHint をインストール

この JSHint は JavaScript の構文をチェックしてくれるツールです。

次は公式サイトのキャプチャですが、シンタックスエラーになっている箇所を指摘してます。

20140306_02_09

SublimeLinter-jshint を有効にするには、この JSHint が必要なのでこれもインストールします。
インストールは先ほどインストールした Node.js を使います。

Node.js をインストールすると npm コマンドが使えるようになっているはずです。
Windows 付属のコマンドプロンプトか、もしくは Cygwin などのターミナルで、次のコマンドを実行してください。

$ npm install -g jshint

3. SublimeLinter をインストール

ここからは Sublime Text3 での操作になります。

SublimeLinter-jshint を使うためには SublimeLinter-jshint を動かすための SublimeLinter というプラグインを先にインストールしておく必要があります。

これは Package Control からインストールできるので、次のように実行します。

  1. Ctrl+Shift+p を同時に押す → 入力ダイアログが表示される
  2. ダイアログに “install” と入力 → 一旦ダイアログが消えるが再び表示される
  3. SublimeLinter と入力

4. SublimeLinter-jshint をインストール

最後に SublimeLinter-jshint をインストールします。
これも Package Control からインストールできます。

  1. Ctrl+Shift+p を同時に押す → 入力ダイアログが表示される
  2. ダイアログに “install” と入力 → 一旦ダイアログが消えるが再び表示される
  3. SublimeLinter-jshint と入力
  4. Sublime Text3 を再起動する

これで SublimeLinter-jshint が使えるようになりました。
ちょっと長かったですが、ツールをインストールしていくだけなので全然手間じゃないと思います。

以下はデフォルトの設定内容です。

  • Preferences → Package Settings → SublimeLinter → Settings – User
{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "jshint": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "php": "html",
            "python django": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

5. まとめ

半日ほど SublimeLinter-jshint を有効にした状態で JavaScript のコーディングをしましたが、デフォルトの設定でも特に煩わしいと感じることはなかったです。

ちなみに、シンタックスエラーで怒られると次のキャプチャのようにオレンジ色で該当箇所を教えてくれます。

20140306_02_10

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-8785445626_587fdac14d_z-resized

検証用の CentOS をインストールした直後に行う初期設定手順

職場でも自宅でも Linux で検証したい作業があったので VMware に 64 ビット版の Ce

記事を読む

icatch-2015-003-1

Vagrantで起動したCentOS上のMySQLにホストOSからログインする設定

マシンを新しくしたこともあり、検証と称してソフトウェアをやみくもにインストールすることに抵抗が出てき

記事を読む

icatch_2385618390-resized

Linuxでmp3をお手軽に結合する

このブログを運用している Linux サーバで radiko.jp から番組を mp3 に録音して個

記事を読む

icatch-9214710040_822a4c3456_z-resized

ロードアベレージを監視するシェルスクリプトを作成してみた

このブログを運用している Linux サーバの負荷が高い状態になってました。 何か被害にあったとかで

記事を読む

no image

VPS に Redmine を設置したときに対処したトラブル

Redmine のインストール自体は Redmine 2.3をCentOS 6.4にインストールする

記事を読む

icatch_5428744075-resized

scp を使ってファイルのコピーを実行したら “command not found” と表示されたときの対処法

CentOS が起動しているサーバに scp を使ってファイルをコピーしようとコマンドを実行したら

記事を読む

icatch-2015-004-1

Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に Octopress をインス

記事を読む

icatch_4365495446-resized

CentOS6.5にGitをソースコードからインストールする

CentOS 6.5 の64ビット版を "Minimal" でインストールした環境で、git sta

記事を読む

icatch-medium_4301351732-resized

mp3splt を実行して “undefined symbol: mp3splt_u_check_if_directory” と出力されたときの対処法

mp3 ファイルを分割してくれる mp3splt というライブラリがあります。 mp3 ファイルを

記事を読む

20140811-00

64ビット版のCentOSをVMwareにインストールできない場合の対処法

Linux で検証したい作業が多かったので VMware に検証環境を作りました。OS は Cent

記事を読む

Googleアドセンス用(PC)

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑