Sublime Text 3

Sublime Textを2から3にアップデートしたので設定、プラグインを再確認。

今使っているプラグインを一覧する
(~/Library/Application Support/Sublime Text 3/Packages/User/Package Control.sublime-settings)

▽ ユーティリティ系

・All Autocomplete
今開いている全タブの中からワードを補完する

・AutoFileName
ファイル名補完が賢くなる

・Autoprefixer
ベンダープレフィックス補完
(Cmd + Shift + Pから使う)

・DocBlockr
コメントを書きやすく
(CoffeeScriptでは、###* とタイプ)

・Emmet
旧ZenCoding

・LineEndings
改行コード

・Markdown Preview
マークダウンをプレビュー
(Cmd + Shift + Pから使う)

・SublimeCodeIntel
コード補完を賢く

・Tag
タグの扱いを賢く

・Terminal
Cmd + Shift + T でターミナルでファイルのある場所を開く
Cmd + Shift + Opt + T だとプロジェクトのある場所を開く

・SideBarEnhancements
サイドバーを賢く

・TrailingSpaces
末尾の空白をハイライト

▽ 言語系

・AngularJS
・AngularJS (CoffeeScript)
・Better CoffeeScript
・Compass
・Haml
・jQuery
・Sass
・SCSS

▽ アプリの設定ファイル

{
	"auto_indent": true,
	"color_scheme": "Packages/User/Cobalt (SL).tmTheme",
	"disable_formatted_linebreak": true,
	"disable_tab_abbreviations": true,
	"font_face": "Menlo",
	"font_size": 15.0,
	"highlight_line": true,
	"line_padding_top": 2,
	"smart_indent": true,
	"tab_completion": false,
	"tab_size": 4,
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": true
}

▽ *.js, *.coffee, &.css, *.scss には個別の設定

{
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

Sublime Text 導入メモ 4

新しく追加したプラグイン

・DocBlockr … /** と入力したあと、TabキーでJSDocsの記法のコメントが入れられる

→ “jsdocs_extend_double_slash”: false にしないと、
//でコメントアウトした後の日本語の確定で、文字が消える問題有り

・SCSS … SCSS用のSyntax

~~・SCSS Snippets … SCSS用のSnippets (Snippetsとは?)~~

・Compass … Compassをコンパイルする ※rvm環境でハマリポイントあり

・CofeeCompile … CoffeeScriptをコンパイルする ※Macのcoffee, npmのパス(/usr/local/bin)を設定する必要あり。
control + shift + C で選択した部分を簡易的にコンパイルして確認できる。

・Emmet … Zen-Codingの新バージョン

削除したプラグイン

・Zen-Coding

Emmetは日本語の変換の確定時に問題があったので、

Preferences => Settings – User に以下の設定を書き込む。

{
  // tabでの展開の上書きしない for Emmet
  "disable_tab_abbreviations": true,
  // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet
  "disable_formatted_linebreak": true
}

参考: 第0回 Sublime Text 2 勉強会で Emmet について話してきた – techlog

"tab_completion": false

にした方が良い感じ?

続きがあります。
Sublime Text 3

Sublime Text 導入メモ 3

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

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

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

(続きがあります)

Sublime Text 導入メモ 4

Sublime Text 導入メモ 2

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 導入メモ 1

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
Sublime Text 導入メモ 3
Sublime Text 導入メモ 4