tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

【SublimeText】jsHintとSublimeLinter-jshintを入れるメモ for mac

はじめに

久しぶりにsublimeが使いたい用途があり
今さらですがSublimeLinter-jshintを入れたので簡易手順メモ。

ちなみにES6などはESlintのほうが良いです。

アジェンダ

  1. jsHintをインストー
  2. jsHint/SublimeLinter/SublimeLinter-jshintについて
  3. SublimeLinterのインストー
  4. SublimeLinter-jshintのインストー
  5. 使ってみる

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を選択します。
f:id:tweeeety:20170725221240p:plain

ダイアログが開いたらSublimeLinterを選択してインストール完了です。 f:id:tweeeety:20170725221300p:plain

4. SublimeLinter-jshintのインストー

SublimeLinterと手順は同様です。

Ctrl + Shift + pでPackage Control開いてinstallと入力します。
Package Control: Install Packageを選択します。
ダイアログが開いたらSublimeLinter-jshintを選択してインストール完了です。

5. 使ってみる

使う前に、SublimeTextを再起動しておきます。
これをしないと動かないなーなんてことも。

適当なファイルを保存して開いてみると
先ほど書いたファイルを開いてみるとエラーの行数にオレンジのマークをしてくれます。 f:id:tweeeety:20170725221703p:plain

また、画面下部ににエラー内容も表示してくれます。

UTF-8, Error: Missing semicolon, Line2, Column11

おわり

久しぶりにsublime使いましたがパッケージのインストールもお手軽 \(^o^)/