はじめに
久しぶりにsublimeが使いたい用途があり
今さらですがSublimeLinter-jshintを入れたので簡易手順メモ。
ちなみにES6などはESlintのほうが良いです。
アジェンダ
1. jsHintをインストール
jsHintのインストールはterminalコマンドで行います。
また、npmでインストールするのでnodeは必要ですが今回は省きます。
nodeとnpmが入っていれば以下のコマンドでjsHintインストールは終わりです。
# インストール $ npm install -g jshint # 確認 $ jshint -v jshint v2.9.5
2. jsHint/SublimeLinter/SublimeLinter-jshintについて
休憩がてら自分用メモです。
jshintについて
jshintはコマンドで入れたように、SublimeLinter-jshint がなくても単体でjsHintとして動きます。
例えば以下コードを保存してjshintをコマンド実行する事もできます。
- sample.js
(function(){ "strict" })();
- 実行
# jsが入ってるディレクトリに対してjshint $ jshint js_dir js_dir/sample.js: line 2, col 11, Missing semicolon. 1 error
vimでも使えるので便利です。
SublimeTextについて
ここからはsublimeText上で行います。
SublimeTextでのパッケージインストールはPackage Controlが必要ですが、これも今回は省きます。
たまにしかSublimeを開かない自分用に
よく忘れるPackage Controlのショートカットも書いておきます。
Ctrl + Shift + p
SublimeLinterとSublimeLinter-jshintについて
SublimeLinterはリアルタイムにコードのエラーをチェックできるフレームワークのようなものです。
jsに限らず様々な言語のlinterとして動作しますが、言語ごとの設定を持っていません。
そこで、SublimeLinter-jshintというjavascript用のプラグインを追加で入れる事で
linter + javascriptな環境になります。
3. SublimeLinterのインストール
Package Controlから入れるだけです。
Ctrl + Shift + pでPackage Control開いてinstallと入力します。
Package Control: Install Packageを選択します。
ダイアログが開いたらSublimeLinterを選択してインストール完了です。
4. SublimeLinter-jshintのインストール
SublimeLinterと手順は同様です。
Ctrl + Shift + pでPackage Control開いてinstallと入力します。
Package Control: Install Packageを選択します。
ダイアログが開いたらSublimeLinter-jshintを選択してインストール完了です。
5. 使ってみる
使う前に、SublimeTextを再起動しておきます。
これをしないと動かないなーなんてことも。
適当なファイルを保存して開いてみると
先ほど書いたファイルを開いてみるとエラーの行数にオレンジのマークをしてくれます。
また、画面下部ににエラー内容も表示してくれます。
UTF-8, Error: Missing semicolon, Line2, Column11
