読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Sublime TextでJavaScriptのバリデーションチェックや変数の評価ができるようにしてみた。

Sublime Text
<スポンサーリンク>

タイトルの通り、Sublime Text2や3でJavaScriptのバリデーションチェックや変数の評価ができるように色々とインストールしてみた。
Javaの開発をEclipseで行うように、JavaScriptのコードはSublime Textで書くことが多いのだけれど、もうちょっと便利にならないかと考えてのことだ。

とりあえず何につけても必要なPackage Controlなるもののインストールから。

Sublime TextにPackage Controlをインストールする方法

以下のURL先を参照
http://wbond.net/sublime_packages/package_control/installation

具体的な手順は、
・Preference > Browze Packagesをクリック
すると、

\AppData\Roaming\Sublime Text 2\Packages

的なフォルダが開くと思うので、そのフォルダを一つ上にあがる。

\AppData\Roaming\Sublime Text 2

すると、その下にはInstalled Packages的なフォルダがある。

そこの下に、
「Package Control.sublime-package」
をツッコむ。
この「Package Control.sublime-package」は以下からダウンロードできる。

https://sublime.wbond.net/Package%20Control.sublime-package

Sublime Textを再起動する
これでインストール完了!

インストールできているか確認するには、
Preferenceをクリックして、「Package Control」が表示されることを確認する。

SublimeLinerでJavaScriptのバリデーションチェックする。

Sublime TextでJavaScriptの構文チェックができるようにしたい。
以下のサイトが参考になる。
http://perl.no-tubo.net/tag/javascript/

基本的には、上記でインストールしたPackage Controlを使う。
Package Controleで「Install Package」を選択。
で、「SublimeLinter」と入力する。
すると、自動でインストールしてくれる。

「SublimeLinter successfully installed」のようなメッセージが出てきた。

次に、JSHintというものをインストールする。
このインストールにはNode.jsをインストールする必要があって、それはどこか別のサイトか、このブログの過去記事にNode.jsをインストールしてみた的な記事を書いたはずなので、参照してほしい。

で、Nodeがインストールされていたら、コマンドプロンプトで以下を入力する。

npm install -g jshint

こんな感じでインストールしてくれる。

C:>npm install -g jshint
npm http GET https://registry.npmjs.org/jshint
npm http 200 https://registry.npmjs.org/jshint
npm http GET https://registry.npmjs.org/jshint/-/jshint-2.1.
npm http 200 https://registry.npmjs.org/jshint/-/jshint-2.1.
npm http GET https://registry.npmjs.org/console-browserify

ここまでやって、JavaScriptを書いたファイル開くと、なんかセミコロンとか忘れたら「!」マークが出て教えてくれるようになった!
Sublime TextでJavaScriptのバリデーションチェックができるようになった!

sublime-worksheetを使ってJavaScriptの値を評価する

以下が本家のサイト。
https://github.com/jcartledge/sublime-worksheet

ChromeのF12でconsoleを出してJavaScriptをとりあえず実行してみる、というのはよくやると思うんだけど。
このプラグインはSublime Text上で同じ事ができるというもの。

Githubの説明を見てみると、、

This is a Sublime Text plugin for Mac OS X and Linux which passes the contents of a buffer line-by-line to a REPL and displays the results inline.

これはMac OS XLinux向けのSublime Textのプラグインです。1行1行REPLでなんとか、
みたいなことを書いているが、Windowsでも使えたので気にしなくていい。

要するにこれは、1行1行の変数の中身とかを評価して、インラインで表示してくれる。
ちなみに、REPLとは、「Read-eval-print loop」の略で、読んで評価して表示して繰り返すという意味だ。

上記のSublime Package Controlをちゃんとインストールした状態で、
Preferences > Browze Packagesでフォルダを開く。

コマンドプロンプト

cd [Packagesのフォルダ]

へ移動する。

git clone https://github.com/jcartledge/sublime-worksheet.git

これでインストール完了。
もちろん事前にgitがダウンロードされている必要がある。

使い方はシンプルで、
Ctrl + Shift + Pで

Worksheet: Evaluate worksheet

で変数を評価してくれる。
こんなにタイプできない!という人が多いと思うが、
普通に

eval

と打つだけでもOK。

実際にやってみると・・・

var a = {
	a:1,
	b:2
};
// > undefined

a
// > { a: 1, b: 2 }

var date = new Date();
// > undefined

date
// > Sat, 06 Jul 2013 07:45:11 GMT

こんな感じで変数を評価して、薄いグレーで表示してくれた!

次に、この表示されたやつが邪魔くさいな、と思ったら、
Ctrl + Shift + P
で、

Worksheet: Clear worksheet results

と打てばいい。
こんなに打てないし覚えられない、という人は、普通に

clear

を打つだけでOK。
実際にタイプすると、

var a = {
	a:1,
	b:2
};

a

var date = new Date();

date

ほら、消えた。

これで、Sublime Textを使ってのJavaScript開発がだいぶ楽になったはず!

感謝のプログラミング

今回で感謝のプログラミングは【505時間目】
10000時間まで、あと【9495時間】

なんかこんな本があった。

Sublime Text リファレンス

Sublime Text リファレンス