流行に乗っているわけではないですが、かくいう私も動作が重いAptana3からSublimeText2に乗り換えて使っています。
今回zen-cordingプラグインのカスタマイズを行ったついでに、以前書いたメモが発見されたので、あわせて備忘録として残しておこうと思います。
パッケージコントロールのインストール
SublimeText2には様々な便利なパッケージが用意されていて、これらを利用するにはパッケージコントロールをインストールする必要があるようです。
Ctrl+@を押したら下部にテキストエリアが表示されるので下記の一文を入力してEnterキーを押す。インストールが完了したら、SublimeText2を終了して再起動を実施する。
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())
とりあえず下記のパッケージをインストール。
- HTML5
- CSS Snippets
- ZenCoding
- Bracket Highlighter
- SublimeLinter
ユーザー設定
ユーザー設定はこんな感じ
{
//今いるところをハイライト
"highlight_line":true,
//フォント
"font_face": "Ricty",
//タブサイズ
"tab_size": 2,
//行間
"line_padding_top": 4,
//フォントサイズ
"font_size":13,
//改行コード
"default_line_ending": "unix",
//自動改行
"word_wrap":true,
//空白を削除
"trim_trailing_white_space_on_save": true,
//不可視文字を表示
"draw_white_space": "all"
}
zen-cordingのカスタマイズ
Sublime Text 2のzen-cordingパッケージの設定ファイルは、私の環境（Win7）の場合下記の場所にあるようです。
C:\Users\usrname\AppData\Roaming\Sublime Text 2\Packages\ZenCoding\zencoding\zen_settings.py
仕事で使うのにちょっとアレだったので、下記のサイトを参考にカスタマイズしてみました。そうなんですよね。デフォルトだといちいち直さないといけないから、作業が効率化されているという実感がないんですよね。
デフォルトのテンプレートだと必要な要素が少なすぎます。
コーディングスピードはまだ上がる！！ Zen-Coding カスタマイズ
例えば、Meta Descriptionやlink rel="stylesheet"がないので、あとから一々、meta:descやlink:css等打つのも面倒です。そこで'html'の'snippets'の中にDoctype等が格納されているので、そこを修正します。
HTML5は下記のように設定しました。
'html:5': '<!DOCTYPE html>\n' +
'<html lang="ja">\n' +
'<head>\n' +
'<meta charset="UTF-8">\n' +
'<title></title>\n' +
'<meta name="description" content="">\n' +
'<meta name="keywords" content="">\n' +
'<link rel="stylesheet" href="/common/css/reset_style.css">\n' +
'<link rel="stylesheet" href="/common/css/default_style.css">\n' +
'<script src="/common/js/jquery.min.js?v=1.8.3"></script>\n' +
'<script src=""></script>\n' +
'<!--[if lte IE 9]>\n' +
'<script src="/common/js/html5shiv.js"></script>\n' +
'<![endif]-->\n' +
'</head>\n' +
'<body>\n\t${child}|\n</body>\n' +
'</html>'
下記のように生成されます。一発で生成されるので非常に楽です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="/common/css/reset_style.css">
<link rel="stylesheet" href="/common/css/default_style.css">
<script src="/common/js/jquery.min.js?v=1.8.3"></script>
<!--script src="/common/js/import.js"></script -->
<script src=""></script>
<!--[if lte IE 9]>
<script src="/common/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
よく使うID名（ナビゲーションやパン屑リスト）等も設定しました。
#original 'gnav': '<nav id="gloval-nav"></nav>', 'lnav': '<nav class="local-nav"></nav>', 'bci': '<div id="breadcrumb"></div>', 'bcc': '<div class="breadcrumb"></div>',
少しでも効率よくコーディングできるように日々見直してカスタマイズしていきたいですね。
カスタマイズでMovableTypeのテンプレート制作用にすることとか可能なのかな？ググってみよう...。