Sublime Text2でコードのチェックできるSublimelinterの導入


「それが普通に出来る事とはどれだけすばらしい事か」と言う事で、Sublime Text2のデフォルトではCSSやJSに対してチェック出来る機能は存在しないので、Sublimelinterなるパッケージをインストールしたのだけど、これもまたそのままでは使う事ができず、色々設定が必要となる。しかも結構面倒って言う。今まで普通だと思っていた事が普通では無くなった時、何としてでも普通の状態にまで無理やり持って行きたくなるのは僕だけだろうか。

Sublimelinterパッケージのインストール

Shift+Ctrl+PでPackage Controlを開いてinstと入力してEnter、Sublimelinterと入力して出た候補をクリック、インストールが完了したら、一応再起動して完了。この状態ではCSSくらいしかチェックできないので、とりあえず基本設定、JavaScriptとPHPの設定と、CSSに関する設定をしてみようと思う。

基本設定

とりあえず最低限な感じで設定のリスト、チェックを実行するタイミングと、エラーをどうやって表示するかとかその辺り。
sublimelinterBooleanSublimelinterを使用するか否か
sublimelinter_executable_mapArray各コードチェックの為のファイル場所(後に記載)
sublimelinter_syntax_mapBooleanチェックするSyntaxの設定
sublimelinter_delayIntチェックを実行する遅延秒、余り早過ぎても不可がかかる
sublimelinter_mark_styleoutline | fill | noneエラー行を枠線か、塗りか、無しか
sublimelinter_gutter_marksBooleanエラー行の横にアイコンを表示
sublimelinter_gutter_marks_themealpha | bright | dark | hard | simpleアイコンの色、カラースキームに合わせると良い
sublimelinter_popup_errors_on_saveBoolean保存時にチェック
jshint_optionsArrayJSHintのオプション(後に記載)
csslint_optionsArrayCSSのオプション(後に記載)

JavaScriptをチェックする

node.jsをインストール

下記URLよりnode.jsのインストーラーをDLし、普ッ通にインストール。完了したらプロンプトを起動し、 node -v と入力してバージョンを表示させ、インストールされたかを確認しておく。
URL:http://nodejs.org/

jSHintのnpm(モジュール)をインストール

プロンプトから、npm install jshint -g と入力してJSHintをインストール。
もしアレならnpm update -g でアップデートをチェックしても良し。

Sublimelinterの設定

まずはsublimelinter_executable_map の値にインストールしたnodejs/node.exeを設定する。
僕の環境では "javascript":"C:/Program Files/nodejs/node.exe" の様な感じ。
これで一応はチェックできる状態になる、後はチェック方法をJSHintのオプションを設定する訳だが、これに関しては参考にさせて頂いたサイトをメモしておきます。

JSHint の公式(英語):http://www.jshint.com/docs/options/
JSHintで気軽なコーディングを:http://blog.craftgear.net/50832ff38cdc8fb415000001/title
JSHintのoption一覧:http://qiita.com/HieroglypH/items/3cb16ecff43b8e5f62e1

PHPをチェックする

僕の環境ではXAMPPを入れているので、XAMPP内にあるphp.exeに設定するだけだった。
sublimelinter_executable_map の値に以下を追加した(環境によってphp.exeの場所は異なる)。
"php":"C:/xampp/php/php.exe"

CSSをチェックする

設定は主にDefaultに記載されているcsslint_optionsをコピーして使う。項目事に("error" | "warning" | true | false)いずれかを記載する訳で、設定にも書いてあるがtrueはエラー、falseは無視である。設定項目で特に参考になる様なサイトは無が、一個一個試してみると以外と簡単な物かと。もしくはいったん全部無効化(false)してから一つずつtrueにしていき、errorかwarningを記載していくって方法でも良い。

Related Posts Plugin for WordPress, Blogger...