SublimeText 2 環境設定とプラグインについて
こんにちは。 今回はテキストエディタについてです。
WindowsからMacに移行してから、今まで使っていたさくらエディタからSublimeText 2 に乗り換えました。
SublimeTextは多機能なため、色々と設定項目やプラグインがあります。 そこで、今回はSublimeの設定とプラグインについてメモしておきたいと思います。
プラグインについて
まずはプラグインです。 他サイト様を参考に、よさ気なプラグインを入れましたので、リスト化したいと思います。 なお、各プラグインの細かい説明は省きますので、ググりましょう。
- PackageControll
これ入れないと始まりません。
- Flatland
テーマ。かっこいい。
- SideBarEnhanceents
サイドバーの右クリックメニューの拡張をする
- GitGutter
Git の変更行を視覚化する
- TrailingSpaces
行頭や行末の不要なスペースをハイライト
- Rails-Latest-Migration
Railsの最後のMigration表示
- SyncedSideBar
サイドバーで現在開いているファイルをハイライト
- BracketHighlight
対応括弧(HTMLの場合はタグも)ハイライト
- SublimeCodeIntel
コードの補完を自動表示
- SFTP
SFTPができるように。
ワードプレスのコード補完
- ApacheConf.tmLanguage
コンフィグファイルの強調表示用
- Emmet
Zen-Codingの後継
- Abacus
イコールやコロンを綺麗に整形
- CSSFormat
CSSを綺麗に整形
- AutoFileName
画像などのファイルネームを自動補完
- SublimeLinter
構文チェックをやってくれる。node.jsを入れないとだめ。
- CSSsnipets
CSSの自動補完
HTML5の自動補完
jQueryの自動補完
- IndentGuides
インデントに合わせてガイド線表示
- Goto-CSS-Declaration
HTMLとCSSのタブを開いている時に、Command + → で該当ID(クラス)のCSSを表示してくれる。 デフォルトだと、Command + →で行末にカーソル移動ができなくなるので、 「Packages Setting -> Goto-CSS-Declaration -> Key Bindings(Default)」 でコマンドを置き換える。(Userとかにするとだめ)
- Browser Refrech
バックグラウンドでブラウザを更新。
- Hayaku
Emmetより柔軟に対応できるやつ。Emmetと合わせて使うと便利。
- Placehod.it Image Tag Generator
ダミー画像を用意できる。
- ZenkakuSpacet
全角スペースをハイライト。PackageControllにはないので、こちらから直接DLする。
- CakePHP(Native)
CakePHPのスニペットやオートコンプリート集
- Docblockr(日本語コメントが打てなくなるので保留)
関数のコメントを自動生成してくれるもの。便利そうではあるが保留で。
- ConvertToUTF8
shift-jisのファイルを扱うために入れます。これで文字化けしないように。
設定項目について
次にSublimeTextの設定についてです。 Defaultを直接いじるとSublimeのアップデート時などにリセットされてしまうっぽいので、Defaultはいじらず、Userをいじります。
以下が実際の設定内容です。
{ // カラースキーマ "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme" // フォント指定 "font_face": “Menlo”, "font_size": 13, // オプション一覧 // "no_bold", "no_italic", "no_antialias", "gray_antialias", // "subpixel_antialias", "no_round" (OS X only) and "directwrite" (Windows only) "font_options": [], // 行番号表示 "line_numbers": true, // ガーター(左側領域)の表示 "gutter": true, // ガーターとテキストエリアの間のマージン "margin": 1, // タブ文字の大きさ "tab_size": 4, // タブをスペースに変換 "translate_tabs_to_spaces": true, // テキストを折り返す "word_wrap": true, // 現在行のハイライト "highlight_line": true, // スペースを常に表示 "draw_white_space": "all", // インデントの補助線 "draw_indent_guides": true, // インデントの補助線のアクティブなものを表示 "indent_guide_options": ["draw_active"], // デフォルトエンコーディング "default_encoding": "UTF-8", // 補完候補にTabキーのみを用いる "auto_complete_commit_on_tab": false, // テーマ "theme":"Flatland Dark.sublime-theme", // サイドバーのフォルダ名を太字に "bold_folder_labels": true, // 新しいファイルを新規ウィンドウで開かないように "open_files_in_new_window": false, // アプリ起動後に新規ウインドウを立ち上げる "create_window_at_startup": true, // ウィンドウのタブがなくなったらウィンドウを閉じる "close_windows_when_empty": true, // List any packages to ignore here. When removing entries from this list, // a restart may be required if the package contains plugins. "ignored_packages": [], // tabでの展開の上書きしない for Emmet "disable_tab_abbreviations": true, // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet "disable_formatted_linebreak": true. // キャレットの設定 "caret_style": "phase", // ルーラーの設定 "rulers": [80] }
Google日本語入力に対応
最後に、Google日本語入力についてです。 自分はIMEをこれにしているのですが、Sublimeだと予測変換でTabキーを押すと、変換候補にカーソルがいくのではなく、タブが挿入されてしまいます。 それを防ぎたいと思います。
やり方は、「Preferences -> Key Bindings - Default」にいき、以下の行をコメントアウトします。
// { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} }, // { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false}, // "context": // [ // { "key": "setting.tab_completion", "operator": "equal", "operand": true } // ] // }, // { "keys": ["tab"], "command": "replace_completion_with_next_completion", "context": // [ // { "key": "last_command", "operator": "equal", "operand": "insert_best_completion" }, // { "key": "setting.tab_completion", "operator": "equal", "operand": true } // ] // },
自分の場合は93行目ぐらいにありましたが、環境によっては違うかもしれませんので、文字列検索してみてください。
これでやっと設定は終わりです。 これからSublime使っていきたいと思います。
それでは!
参考にさせていただいたサイト
Sublime Textの設定方法。細かく自分好みにチューニング!
”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!