ブログの記事書き用エディタとして導入したSublimeText。最近は、HTMLやCSSだけでなく、かんたんなJavascriptやPHPも少し弄るようになってきました。
JavascriptやPHPは学習し始めたばかりなので、デバッグに苦労しています。
ということで、SublimeTextの本来の使い方であるコードエディタとして、構文エラーのチェックができるように設定しました。
もくじ
SublimeLinterとは
各種言語の構文エラーをリアルタイムにチェックしてくれる機能を付け加えてくれるプラグインです。
統合開発環境のIDEなどを使っていれば搭載されている機能ですが、自分好みにカスタマイズできる使い勝手の良いエディタSublimeTextで構文エラーのチェックができると助かります。
Package ControlからインストールできるSublimeLinterは、フレームワークとして機能し、各言語のLinterをそれぞれインストールして使います。
各言語のLinterをインストールする方法が、SublimeTextのPackage Control以外から行う必要があるものも多いので、少し難しく感じるかもしれませんが、MacであればHomebrewやNode.jsのパッケージ管理機能を利用して、割と簡単にインストールできます。
SublimeLinterのインストール
SublimeLinter
の本体は、SublimeTextのPackage Controlからインストールします。
Package Controlのインストール方法はこちらを参考にしてください。
名前は知っていましたが、難しそうなイメージで使わずにいたSublimeTextに手を出してみました。
パッケージマネージャーのインストール
Package Control以外から各言語用のLinterをインストールするために、Mac専用のパッケージマネージャーHomebrewとNode.jsのパッケージマネージャーであるnpmをインストールします。
Homebrewのインストール
Homebrewのインストールは、Macのターミナルアプリから公式ページ記載のインストール用スクリプトを実行して行います。
Node.jsのインストール
Node.jsのパッケージマネージャーであるnpmは、Node.jsをインストールすることで一緒にインストールされます。
Node.jsの公式ページよりインストールファイルをダウンロードして実行します。
偶数バージョンが安定版、奇数バージョンが最新の開発バージョンです。
特に理由がなければ、安定版をインストールしておいたほうが安心です。
HTML用Linterのインストール
Linter：SublimeLinter-thml-tidy
Package ControlからSublimeLinter-thml-tidyをインストール。
tidy-html5 をインストール
Linterのデータベースのようなものです。
Mac専用パッケージマネージャーのHomebrewからインストールします。
$ brew install tidy-html5
macには古いtidy-htmlが入っているため、インストールした新しいtidy-html5へパスを通します。
/usr/local/binを優先的に読むように設定を変更します。
ターミナルより/etc/pathsを開きます。
$ sudo vi /etc/paths
開いたファイル内の順番を入れ替えます。
/usr/local/bin ← 一番下になっているので一番上へ移動する。 /usr/bin /bin /usr/sbin /sbin
※vi操作法：i で編集モードに入り編集。編集終了後は esc で通常モードへ戻る。:wq で上書き保存して終了。
パス変更後は、ターミナルを再起動して反映させます。
正しく変更できたかのチェックをします。
変更した順番が反映されているかを確認します。
/usr/local/binが最初になっていれば正常に反映されています。
$ echo $PATH /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
バージョンを確認する。
$ tidy -v
tidyコマンドの場所を確認する。
/usr/local/binにあれば正常に反映されています。
$ which tidy /usr/local/bin/tidy
CSS用Linterのインストール
Linter：SublimeLinter-csslint
Package ControlからSublimeLinter-csslintをインストール。
csslint をインストール
ターミナルからNode.jsのパッケージマネージャーであるnpmを利用してインストールします。
$ sudo npm install -g csslint
Javascript用Linterのインストール
Linter：SublimeLinter-jshint
Package ControlからSublimeLinter-jshintをインストール。
jshint をインストール
ターミナルから以下のコマンドを実行する。
$ sudo npm install -g jshint
PHP用Linterのインストール
Linter：SublimeLinter-php
Linter：SublimeLinter-phplint
Package ControlからSublimeLinter-phpとSublimeLinter-phplintをインストール。
phplint をインストール
ターミナルから以下のコマンドを実行する。
$ sudo npm install -g phplint
まとめ
これで単純な入力ミスや構文の矛盾などのデバッグで、無駄な時間を費やさずに済みます。
これがないとミスが有った場合、コードをはじめから延々と見直して間違っている箇所を探さないといけないので、学習のモチベーションも下がります。
最初に設定しておくと、とても便利に作業が進みますね。
