s1hsgw

Design x Engineering x Business

Sublime Text3+nvm+zshでjshintの導入にハマった話

Web開発 環境構築 プログラミング JS

f:id:shunichi_hasegawa:20150611222559j:plain

はじめに

Sublime Textのなんといっても素敵なところは、好みのプラグインをポンポン入れるだけで簡単にエディタをカスタマイズできてしまうことですよね。

使えば使うほど好きになってしまいます。

まぁ、そんな感じで今日も最近知ったSublimeLinterなるプラグインを導入してもっと快適にコーディングするぞーって軽い気持ちで始めたんですけど、思いの外手こずってしまったので自分へのメモとしてやったことを残しておきます。

本題に入る前にプラグインについて少しだけ。 今回導入したSublimeLinterは簡単に言うと、SublimeTextにリアルタイム文法チェック機能を付け加えるかなーり便利なプラグインです。

詳しくはLIGさんの記事をどうぞ

環境

  • Mac
  • Sublime Text3
    • SublimeLinter
    • SublimeLinter-jshint
  • Homebrew
  • zsh by Homebrew
  • oh-my-zsh
  • nvm
    • node (v0.11.16)
    • jshint (v2.8.0)

The jshint doesn't work!　

LIGさんの記事を参考に、基本的に導入は2ステップで

  1. Package ControlでLinterのプラグインをインストールする
  2. linterをターミナルからインストール

とりあえず書いてある通りにやってみた。うん、特に問題なし。

簡単簡単と思い、ターミナルからjshintが使えることを確認したのちSublime Textに戻り試してみる。 しかし適当にjsファイルをいじってみるものの何も起こらず。ぐぬぬ。

解決までの長い道のり

ひとまずググってみたら、同じような状況に陥った人をQiitaで発見。

この記事によると、sublimeにjshintのpathを通せばうまくいったとのことだったので、

jshintのpathを調べて

$ hash -r
$ which jshint
 /Users/Shunichi/.nvm/v0.11.16/bin/jshint

Preferences > Package Settings > SublimeLinter > Settings - Userを次のように書き換えた

{
    "paths": {
        "linux": [],
        "osx": [
            "/Users/Shunichi/.nvm/v0.11.16/bin/jshint"
        ],
        "windows": []
    }
}

これでいける！と思いファイルを保存して

SublimeTextをRestart.

...

動かず。

そこで、今度はSublimeTextのConsoleを開いて確かめてみると、次のようなエラーが出ていた。

SublimeLinter: WARNING: jshint deactivated, cannot locate 'jshint'

jshintが見つからないだと...パスも通したはずなのに何故。

困り果てた僕はここから深い深い闇に堕ちていく。

stackoverflowやSublimeLinter Trouble Shootingなんかを頑張って読んでみるもののなかなか解決できず。

途中からもはや英語と戦っているのかエラーと戦っているのかという感じであった。もっとスラスラと読めるようになりたい...

そんなこんなで途方にくれた僕は結局公式のSublimeLinter-jshintに行きREADMEを注意深く読んでみた。

すると、Linter Installation のステップ3にこんな一文があることに気づく。

If you are using nvm and zsh, ensure that the line to load nvm is in .zshenv and not .zshrc.

どうやらnvmとzshを使用している場合、.zshrcではなく.zshenvにnvmを読み込む記述が必要らしい。

そこで、ターミナルから.zshenvを探してみる。しかし見当たらなかったので、新規作成し次のスクリプトを記述した。

# nvm.shが存在したら、実行(source)する
[ -s ~/.nvm/nvm.sh ] && . ~/.nvm/nvm.sh

保存し、再びSublime TextをRestart.

...

動いた！

f:id:shunichi_hasegawa:20150611222911p:plain

こちらは適当にかっこやセミコロンを消してみたjsファイルの例。

見事、エラーがリアルタイムに出て怒られている。嬉しい〜！ （怒られているのに嬉しいとは不思議な感覚である）

というわけで、「最初から公式ドキュメントしっかり読めよ」というツッコミはさておき一件落着。

おわりに

今回学んだことは、

躓いたときは、英語であっても素直に公式サイトの手順をしっかり読んでインストールしてみるということですね。

インストール手順はブログ記事で見ていたために、公式の方はさらっとしか読まずにいたのが今回のミスでした。自分で問題を難しくしてしまっていたとはお恥ずかしい限りです。

いい勉強になりました。おしまい。