kwsktr's study log

kwsktr のおべんきょログ

Sublime Text 3 で コードチェック :: SublimeLinter を Windows で使う

やったこと

  1. 概要
  2. Node.js 側の準備
  3. Sublime Text の準備
  4. 触ってみる

概要

統合開発環境ではなくエディターでコードを書くときには、書きやすさ、快適さなどを求めているのですが、ちょっとしたコードチェックぐらいはして欲しいときがあります。
例えば JavaScript でいうと、文末の ;(セミコロン) 忘れとかをエディターが任意のタイミング、もしくは自動で確認してくれると便利ですよね。


そこでJavaScript の品質チェックツール JSHint と Sublime Text 3 を合わせて使ってちょっとだけ幸せになろう。といった内容になります。

Node.js 側の準備

JSHint は Node.js で動作しますので Node.js がインストールされていることが前提条件となります。
Windows の Node.js はインストーラーがありますので、導入は非常に楽ですね。


node.js


Node.js のインストールが終わったら、JSHint をインストールします。
こちらも非常に簡単で、コマンドプロンプトに一行書くだけです。


コマンドプロンプトを起動したら、

npm install jshint -g

と入力するだけ。

Sublime Text の準備

Sublime Text では Package Control をインストールしているのが前提となります。


Installation - Package Control


Sublime Text を利用されている方であれば、すでに Package Control は導入済みであると仮定して進めます。

SublimeLinter をインストール

いつもの手順で SublimeLinter をインストールします。

  1. Tools > Command Pallette (Ctrl + Shift + P)
  2. Install Package
  3. SublimeLinter


SublimeLinter - Packages - Package Control

SublimeLinter-jshint をインストール

同様の手順で SublimeLinter-jshint をインストールすれば準備終了です。


SublimeLinter-jshint - Packages - Package Control

触ってみる

念の為に Sublime Text を再起動して。
あとは JS を書くだけで監視してくれるはずです。


f:id:kwsktr:20140425000333p:plain


こんな具合に。
うまく動かない時は Javascript としてファイルを開いているか、<script> 内に書いているか。
あたりを調べていただくとよろしいと思います。


Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ