Sublime Text 2 使ってみよ

PhoneGap の UI が HTML+CSS+JavaScript で書けるのはいいけど、タグをいちいち書くのはめんどい。
後輩くんから Sublime Text で ZenCoding すると楽ちんだよーと教えてもらったので Sublime Text を試してみることにした。:-)

環境構築

こちらさんを参考にさせてもらっています。

• Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ - Mnemoniqs
• 恋する速度を爆速化。Sublime TextでZen-Codingを使用する際の設定メモ - ウェビメモ
• Sublime Text 2 で Zen Coding (Emmet) - メモログ

まずはこちらから Sublime Text の最新版（2.0.1）をダウンロードする。自動補完機能とか便利な拡張機能を使うには Package をインストールする。

1. メニュー[View > Show Console] を選択する。
2. 画面下部にコンソールエリアが表示されるので、以下を入力して Sublime Text 2 を再起動する。

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

Zen-Coding するには、Emmet という名前のパッケージを追加する。

1. Command + Shift + p でコマンドパレットを開き、install と入力する。候補に「Package Control: install Package」が出てくるので、それを選択する。
2. コマンドパレットに「Emmet」と入力すると候補に「Emmet」が出てくるので、それを選択する。画面下部のインストール実行中の表示が消えたら完了。

お試し

最初に Syntax を html にする。コマンドパレット（command + shift + p）を開いて、html と入力し、候補から「Set Syntax html」を選択する。エディタに「html:5」と入力し、TAB を押す。そうすると、、、

○入力

○TAB押下後

すげーーーー楽ちん :-)

Zen-Coding の記法を覚える必要があるけど、この効率の良さは感激もんだね！こちらに記法が分かりやすくまとまってるので、この際、覚えてしまおっと :-)

• Zen-codingのHTML記法 - DSLAB

カスタマイズ

Sublime Text は表示形式をいろいろカスタマイズできる。JSON で記述する。設定できる項目はこちら（↓）を参照。

• Sublime Text 2の設定とDiffの取り方 - DevAchieve
• Sublime Text 2 のDefault設定ファイルを眺める - blue_ham_cake1024のブログ
• Sublime Text 2 の設定 - Y.A.M の 雑記帳

メニュー [Sublime Text 2 > Preferences > Settings - User] を開いて、表示形式とかをカスタマイズする。Sublime Text 2ってエディタがすごくイイ… から引用させてもらいました。^^;)
行間とか保存すると即反映されるので、微調整しやすくて良いね。:-)

//フォントサイズ
"font_size": 13,
//行間
"line_padding_top": 5,
//タブサイズ
"tab_size": 4,
//空白の削除
"trim_trailing_white_space_on_save": true,
//タブやスペースなどの不過視文字を表示(お好みで)
"draw_white_space": "all",
//現在の選択行をハイライト表示(お好みで)
"highlight_line":true,
//自動改行
"word_wrap": true

Sublime Text 2ってエディタがすごくイイ…