不肖者の人生実験

Sublime Text2 使い方まとめ

Sublime Text2を使い始めました

ちょっと前から流行ってるらしい、噂の恋に落ちるテキストエディタSublime Text2を使い始めました。今までEclipseを使っていたのですが、すぐにSublimeText2に乗り換えをきめました。
軽い、最初はある程度の機能で好みにカスタマイズできる、オシャレと私の心を鷲掴されました。
以下は自分の忘備録を兼ねての記事です。下のリンクの内容を更にまとめたといった感じです。

画面構成

画面下に: LineとColumn
Tabのサイズ
ソースコードのカラーリング
画面右に: ミニマップ
画面左に: サイドバー、(表示・非表示の切り替えcmd + k,cmd + b)

各種設定

設定変更方法

Preferencesで変更していく。

FontとColor Schemeは直接変更。
それ以外はDefaultの中身を参考にしてUserのJSONのファイルを書き換える。

Settings設定変更内容

"font_size": 14,  //フォントサイズ
ignored_packages  //Viの設定のON・OFF
"highlight_modified_tabs": true, //編集が行われたファイルのタブをオレンジ色にする
"scroll_past_end": true//最後の行を超えてスクロール出来る
"draw_white_space": "all"//空白文字を表示
"line_padding_top": 5,//行間
"tab_size": 4,//タブサイズ
"trim_trailing_white_space_on_save": true,//空白の削除
"highlight_line":true,//現在の選択行をハイライト表示(お好みで)
"word_wrap": true//自動改行
"theme": "Soda Dark.sublime-theme"

Key Bindings設定内容

キーの内容
- Super = cmdキー
- ctrl = controlキー
- alt = Altキー

設定内容

{ "keys": ["ctrl+s"], "command": "toggle_side_bar" }  //サイドバーの表示・非表示

編集補助

保存した拡張子でエディットモードが変わる。タグ、関数、クラス名等の補完が有効になる。
コメントの切り替え。cmd + /
htmlの場合は右クリックで「Open in Browser」でブラウザが開く。

マルチカーソル

cmd + マウスドラッグ
cmd + d / cmd + u
cmd + ctrl + g

コマンドパレット

ショートカット: cmd + Shift + p
使用例：内容の色付け: Syntax : 言語名

Hotsave

ファイルを編集した状態でアプリを終了しても、保存無しで終了する。次開いた時は編集状態が残ったまま(終了時の状態のまま)始まる。

Goto Anything (複数ファイルの検索機能)

ショートカット

cmd + p

ファイル名以外の記述

:　行番号
@　シンボル(関数名、クラス名とか)
#　文字検索

プロジェクの管理

プロジェクト無しでも問題ない。ファイル単体でも開く。

プロジェクの作成

Project > Save Project As...

プロジェクの編集

Project > Edit Project

フォルダの指定: path //作業フォルダを指定するとそれ以外は見ないようになる。複数のパスを指定できる。
拡張子の指定: "file_exclude_patterns" : ["*.php"] //phpファイルは除く設定

スニペット

使い方

コマンドパレットで[Snippet]で検索。
もしくはスニペットトグルを記述して[Ctrl] + [space]

登録

Tools > New Snippet

<tabTrigger>hello</tabTrigger>//トリガー。実行するスニペットの名前みたいなもの。例だと「hello」 <content><![CDATA[ hogehoge; ]]></content> //スニペットの内容。hogehogeの部分が実際に実行される。

例PHPコード

echo "Hi, ${1:Tom}"; //${1:Tom}カーソルの位置、数字はカーソル移動順序、コロン以降はデフォルト値

保存場所

言語名のディレクトリ(無い場合は作成する)
保存名。トリガー名.sublime-snippet。例　hello.sublime-snippet

Build機能

作成

Tools > Build System > New Build System...

内容例: "cmd": ["php", "$file"] //$fileが現在のファイルの意味
保存: buildsディレクトリを作成してその中に保存。通常言語名で保存

選択

Tools > Build System > 言語

実行

Tools > Build // cmd + b
下にコンソールが開いて実行結果が表示される

パッケージの導入

Package Control: パッケージを簡単にインストールしてくれるパッケージ
http://wbond.net/sublime_packages/package_control/installation　でインストールコマンドをコピー
View > Console　でコンソールを表示する。
コンソールにペースト。Enterで実行。Sublime Textを再起動する。
他のパッケージの導入: コマンドパレットを開く。install Packegeを選択して実行。
パッケージのリストがあるので名前を入力して検索。該当パッケージを選択して実行。
少し待つ。successfully loadedが表示されたら成功。

導入したパッケージ

Emmet: zencodingの次世代バージョン。html関係のコーディングが早くなる。
AngularJS Attributes Completion: AngularJSの属性を自動補完してくれる。
Bracket Highlight: htmlのタグ、jsの括弧のペアをハイライトしてくれる
Side Bar Enhancements: サイドバー右クリックのメニューを拡張するパッケージ。
ブラウザを開いて確認などのよく利用するコマンドがある。
TrailingSpaces: 行末の余分なスペースをハイライトする。
SublimeCodeIntel: 関数・変数が定義されているところにジャンプする
abacus: イコールとかコロンとかを綺麗に揃える。
ショートカット:cmd + option + ctrl + ]
AutoFileNameimg: タグやcssなどで、パスを入力する時に、ファイル名を補完する
SublimeLinter: HTML,CSS,PHP,JS等々のリアルタイム文法チェックをする
All Autocomplete: 標準の自動補完（オートコンプリート）機能を強化し、マッチする文字列があればサジェストする。
CakePHP(Native): CakePHPのスニペットおよびオートコンプリート集
ConvertToUTF8: 文字エンコードのShiftJIS等をUTF8に変換する
SublimeCodeIntel: 多くの言語に対応した自動補完やジャンプ機能を利用可能にする
Theme-Soda: カラースキーマのオシャレなテーマ
Twitter Bootstrap Snippets: Twiiter Bootstrapのスニペット

ウィンドウの分割と操作

分割: cmd + Option + n //左右でn個に分割。元に戻すにはnを1にする。
cmd + Option + Shift + n //上下でn個に分割
分割ウィンドウへのカーソル移動: マウスクリック又は
cmd + n //n個目のウィンドウに移動
分割ウィンドウへのファイル移動: マウスドラッグ又は
cmd + Shift + n //n個目のウィンドウに移動

複数Mac間で設定共有

DropBoxを使用する。アカウントを取得しておく。

SublimeTextを終了。
DropBox内に[Sublime Text 2]ディレクトリを作成。
SubLime Text 2をインストールしたフォルダを開く

デフォルトのインストール先は
“~/Library/Application\ Support/Sublime\ Text\ 2/"
以下の3つのフォルダを先ほど作成した「Sublime Text 2」ディレクトリにコピーする

"Installed Packages"

"Packages"

"Pristine Packages"
コピー元のディレクトリを削除またはリネームする

ターミナルを開き、以下のコマンドを実行する

"cd ~/Library/Application\ Support/Sublime\ Text\ 2/"
"ln -s ~/Dropbox/Sublime\ Text\ 2/Installed\ Packages ./Installed\ Packages"
"ln -s ~/Dropbox/Sublime\ Text\ 2/Packages ./Packages"
"ln -s ~/Dropbox/Sublime\ Text\ 2/Pristine\ Packages ./Pristine\ Packages"

Sublime Text 2を開き、Dropbox内のディレクトリにリンクされていることを確認

Sublime Text 2 > Preferences > Browse Packages… でDropbox内のPackagesディレクトリが開かれる
別MacにSublime Text 2をインストール。
一度起動して終了する。
“~/Library/Application\ Support/Sublime\ Text\ 2/"内のディレクトリをリネームする。
ターミナルで「6」のコマンドを実行する。
またディレクトリがリンクされている事を確認

google日本語入力との兼ね合い

様々なプラグインとgoogle日本語入力で動作の不具合が発生するので対処する。

Kye Bindings Defaultの以下「tab」キー関連をコメントアウト

// { "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 }
//  ]
// },

但しスニペットを「tab」キーをで実行できなくなる。スニペットは「ctrl + space」かコマンドパレットで実行。

Emmetプラグインが「tab」キーをおかしくする件。

以下をuser settingsに追加する。

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

全角文字が半角2文字と同じ幅にならない。

フォントにRictyを使い、フォントサイズを偶数にする。

"font_face": "Ricty",
"font_size": 14,

日本語入力中にタブキーを押すと、候補選択にならず、タブ入力になってしまう。

次の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 }
//     ]
// },

プラグインのアンインストール

コマンドパレット表示
「package remove」で検索
インストールされたプラグインが一覧になっているので該当プラグインを選択。
少々待って終了。

チートシート

クラスメソッド株式会社様開発ブログ

参考にしたサイト

以下追記

自分でもチートシート作ってみました。 Sublime Textのチートシートを作ってみた