Sublime Text が身の回りに流行り始めたので
Flasherあがりのフロント実装野郎としての設定項目をメモ。
弊社メンバーは真似してください。
1. Sumlime Text 2 > Setting – User の内容:
{
"auto_indent": true,
"color_scheme": "Packages/Color Scheme - Default/Cobalt.tmTheme",
"font_face": "Menlo",
"font_size": 12,
"ignored_packages":
[
"Vintage"
],
"line_padding_top": 2,
"smart_indent": true,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true
}
説明: フォントの指定と、タブは半角スペ×4に変換です。
2. プラグイン:
(1) View > Show Console (control + `) して、
import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20′)).read()); print ‘Please restart Sublime Text to finish installation’
を入力して、Package Controllをインストール。
(2) command + shift + P → 「install」と打つ → Package Controll: Install Package と補完される → Enter
(3) 以下のプラグインをインストール。
HTML5
HTML5サポート
Tag
選択したHTMLを「control + option + f」でフォーマット
AutoFileName
ファイル名、パス補完
Bracket Highlighter
閉じタグハイライト
CSS Snippets
CSSのスニペット
LESS
LESSのコードをハイライト
jQuery
jQuery補完
CoffeeScript
CoffeeScript補完
WordPress
Wordpressのコード補完
ZenCoding
Espresso時代からおなじみのZenCoding
Prefixr
「control + command + x」でベンダープレフィックスを追加してくれる
SublimeCodeIntel
何かが賢くなる
Side Bar Enhancements
サイドバーが強化されるらしい
Trailing Spaces
行頭、行末の不要なスペース、タブをハイライト。
ファイル保存時に勝手に消してくれる（几帳面）
3. 細かい設定
Sublime Text 2で、rubyのインデントだけ変更する #SublimeText2 – Qiita
を参考に、
JS, CSSのインデントを2文字にしてみる。
(1) .jsのファイルを開く
(2) Sumlime Text 2 > Preferences > Settings – More > Syntax Specific – User を選択
(3) 開いた javaScript.sublime-settings に以下を記入
{
"tab_size": 2,
"translate_tabs_to_spaces": true
}
(4) .cssのファイルを開く
(5) Sumlime Text 2 > Preferences > Settings – More > Syntax Specific – User を選択
(6) 開いた CSS.sublime-settings に以下を記入
{
"tab_size": 2,
"translate_tabs_to_spaces": true
}
*
「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN
と
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳
を読むと、2文字が良いんだとか。
4. 手に馴染ませる
ショートカットキーは
爆速エディタSublime Text 2ショートカット一覧 | DECONCEPTER
を参考に。
zen-codingのショートカットキーは
Post-that: sublime text 2 で zen-codingを使う際のコマンド一覧
を参考に。
EspressoとFlex Builderで出来たことはだいたい出来そう。
さいごに、
Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog
爆速エディタSublime Text 2ショートカット一覧 | DECONCEPTER
Sublime Text 2 | Public Draft | Just writing down what I’ve found
”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | デザイナーブログ | 株式会社LIG
あたりを読みながら導入しました。
—
(続きがあります)