今週新たに追加したプラグイン

・SFTP
ファイルを保存時に自動的にFTPでサーバーにアップロードできるようになる。
サーバーで動作検証したいプログラムを書く時に役立った。

・Browser Refresh
Command + Shift + R でブラウザをリロードできる。
何かのプラグインとショートカットキーがぶつかっていたので、
Command + Option + Rに変更した。

(続きがあります)

Sublime Text 導入メモ 4

Sublime Text の設定をDropbox経由で複数のマシンで同期する方法。
これで家と会社で同じ環境をつくれる。

(Sublime Textが起動していない状態で作業する)

1. ~/Library/Application Support/Sublime Text 2 へ移動する

$ cd ~/Library/Application\ Support/Sublime\ Text\ 2/

2. Installed Packages, Packages, Pristine Packages をDropboxの管理下に移動。
（例: appdata/sublime/ に置く）

$ mv Installed\ Packages ~/Dropbox/appdata/sublime/
$ mv Packages ~/Dropbox/appdata/sublime/
$ mv Pristine\ Packages ~/Dropbox/appdata/sublime/</blockquote>
<strong>3. Dropbox内へ移動したフォルダへのシンボリックリンクをつくる</strong>
<blockquote>$ ln -s ~/Dropbox/appdata/sublime/Installed\ Packages ./Installed\ Packages
$ ln -s ~/Dropbox/appdata/sublime/Packages ./Packages
$ ln -s ~/Dropbox/appdata/sublime/Pristine\ Packages ./Pristine\ Packages

おわり。

参考: misfoc.us • Syncing Sublime Text 2 Settings via Dropbox に書いてあるのと同じ内容です。

—

(続きがあります)

Sublime Text 導入メモ 3
Sublime Text 導入メモ 4

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

あたりを読みながら導入しました。

—

(続きがあります)

Sublime Text 導入メモ 2
Sublime Text 導入メモ 3
Sublime Text 導入メモ 4