MD-Blog_Tools/Software

ちょっとしたエディタに最適なSublime Text

今更Sublime Textの紹介はしませんが、ちょっとしたメモやjson、XMLなどの確認には軽いしお手軽、多機能と本当に最適なエディタだと思います。
もちろんがっつり開発にも使えるスペックだと思いますし、使っている方も多いと思います。

JavaScriptの実行確認

IDEを立ち上げるまでもないJavaScriptのメモや、ちょっとしたテストなど、今まではブラウザのコンソールやnodeコマンドから実行していたりしていたのですが、JavaScriptが一行しか書けなかったり、保存してコマンドを叩いて確認して、、など面倒。
そこでせっかくローカルにJSがあるんだし、Sublime TextからJavaScriptで実行出来るように設定してみました。

Sublime TextでJavaScriptを実行する準備

Sublime Textをコンソール替わりにJavaScriptを実行するには、ローカルでJavaScriptが動く環境が必要となります。つまりNode.jsの出番です。
Ken.Otsukaも紹介の記事を書いていますし、もう数えられないくらい参考情報は出回っていますので、インストールについての解説は割愛させていただきます。

僕はWindowsなので、コマンドラインを立ち上げて下記コマンドを打ってバージョンが確認できればOKです。

C:\Users\araki>node -v
v0.10.13

Node.jsがインストールされていてもパスが通っていない場合は実行できませんので注意が必要です。
パスが通っていなければ、コントロールパネルのシステムのプロパティ、詳細設定タブの環境変数からパスを通します。

Sublime TextでJavaScriptを実行するBuild Systemを追加する

ついに本題です。
Sublime Textを立ち上げて、Tools＞Build System＞New Build Systemを選択します。
すると、

{
    "cmd": ["make"]
}

と書かれた新規ファイルが立ち上がりますので、それを下記に変更します。

{
    "cmd": ["node","$file","file_base_name"],
    "working_dir":"${project_path:${folder}}",
    "selector":"*.js"
}

たったこれだけ。
カラクリは簡単でSublime Textからnodeコマンドをたたいてしまうということです。

これを「Ctrl+S」で、node.sublime-buildなどと名前を付けて保存をすると、再度、
Tools＞Build Systemを確認すると、「node」が追加されていると思います。「node」を選択します。

JavaScriptの実行確認

新規ファイルでtest.jsファイルを作成します。
その中に、

console.log("Run JavaScript in Sublime Text!");

と記述して
「Ctrl+B」（Tools＞Build）を実行すると、Consoleに

Run JavaScript in Sublime Text!
[Finished in 0.1s]

と出力されると思います。
※どこにも保存していないファイル（拡張子がjsと確認できないファイル）は、実行してもJavaScriptの動作確認は出来ないので注意ください。

これで、関数の確認など複数行にわたるJavaScriptプログラムの確認がSublime Textで可能になります。
便利ですねー。

よきJavaScriptタイムを。