logo icon

今更ながら恋に落ちるエディタ「Sublime Text 2」導入まとめ

今更ながら恋に落ちるエディタ「Sublime Text 2」導入まとめ

今もっともエンジニアに「こいつできる……!」と思わせるエディタ「Sublime text」が流行して久しいですが、今更ながらざっくりと導入方法を。
ずいぶん前にまとめようとして投げ出していたものの自分用に必要となることが結構多いので備忘録的に。

「Sublime Text 2」の導入

Sublime Text 2 β版で3がありますが、パッケージ(プラグイン)の対応具合的にも安定版の2でいいと思います。

パッケージのインストール

まずはパッケージをスマートにインストールするために「Package Controll」というものを導入します。 こちらから、

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

の文字列をコピーし、Sublime Textの「View > Show Console」に貼り付けてエンター。

ZIPファイルから「Package Controll」を導入する

上記ではインターネット経由で「Package Controll」をインストールしましたが、同じページの「Manual」のところから「Package Control.sublime-package」をダウンロードし、解凍したフォルダを、

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages

に格納しても同じことができます。

一度再起動し、Package導入の用意が整いました。

日本語対応

Sublime Textを日本語化するために「Japanize」というパッケージを導入します。
「Preferences > Package Control」で開いたテキストボックスに「install」と入力すると、「Package Control: Install Package」という項目が出てくるはずなのでそちらを選択し、再度出てくるテキストボックスに「japanize」と入力、選択。

さらに、

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages\Japanize

上記フォルダ内の「Main.sublime-menu」というファイルを、

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages\User

にコピーし、メニューの日本語化完了。

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\ackages\Japanize

上記フォルダ内の「.jp」という拡張子のファイル4つを、

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages\Default

にコピーし、拡張子を削除(上書き)すると下層メニューの日本語化完了です。

なお、「Package Control」を呼び出すショートカットは「Ctrl + Shift + P(Macだと Command + Shift + P)」です。

日本語の入力対応

デフォルトではファイル内で日本語が入力できません。致命的です。
ので、こちらもパッケージで対応します。

メニューは既に日本語化されているはずなので、「ツール > コマンドパレット」で開いたテキストボックスに「install」と入力、「Package Control: Install Package」という項目を選択し、再度出てくるテキストボックスに「IMESupport」と入力、選択。

以上です。

基本設定

無事日本語化できたら基本的な文字サイズや行間、フォント等の設定をします。
「基本設定 > 基本設定 - ユーザ」で設定ファイル(Preferences.sublime_settings)が新しいタブで開くので、

{
	//フォント
	"font_face":"Consolas", //Ricty Diminished
	//フォントサイズ
	"font_size": 10,
	//行間
	"line_padding_top": 0,
	//タブサイズ
	"tab_size": 4,
	//空白の削除
	"trim_trailing_white_space_on_save": true,
	//タブやスペースを表示
	"draw_white_space": "all",
	//現在の行をハイライト表示
	"highlight_line":true,
	//自動改行
	"word_wrap": true
}

等で変更できます。 各種お好みで。

「UTF-8」以外の文字コードに対応する

デフォルトでは「UTF-8」以外の文字コードのファイルを開くと文字化けするので、ファイルを開く際にファイルをそっと「UTF-8」に変換し、保存する際に元の文字コードにそっと戻してくれるパッケージ「ConvertToUTF8」を導入します。
「ツール > コマンドパレット」に「install」、「Package Control: Install Package」で「converttoutf8」。

終わり。

ここまでのパッケージのインストールでは「PackageControl」を利用しましたが、公式ディレクトリに登録されておらずGithub等で公開されているパッケージは、zipファイルを解凍して、「C:Usersユーザー名AppDataRoamingSublime Text 2Packages」に放り込めば同じように導入できます。念の為。

おすすめのパッケージ

上記で基本的な設定はおしまいです。 下記には、とりあえず入れておくと便利なパッケージを列挙します。

Tag

閉じタグの入力補完。

IndentGuides

インデントをガイド線で可視化。

TrailingSpaces

半角スペースと全角スペースをわかりやすくしてくれたりするパッケージ。

HTML

HTMLの入力補完。

HTML5

HTML5の入力補完。

CSS Snipets

CSSの入力補完。

BracketHighlighter

HTMLの閉じタグをハイライト。

Emmet

ご存知HTMLとCSSの高速コーディングを可能とするEmmetさん。

CSScomb

CSSのプロパティの並びを整えてくれるパッケージ。PCにPHPがインストールされている必要があります。

Compass

CSSを便利でスマートにする「Sass」のフレームワーク「Compass」のパッケージ。
同時に「Sass」「SASS Build」「SCSS」「SCSS Snippets」のパッケージと、PCにRubyがインストールされていないと動きません。

Wordpress

WordPressの入力補完。

AndyPHP

PHPの入力補完。

AndyJS2

JSとjQueryの入力補完。

SideBarEnhancements

サイドバーで右クリックしたときのメニューを充実させるパッケージ(日本語化可)。

さいごに

ここでは僕がよく使うもののみまとめたため、FTP系やGit系やターミナル系のパッケージ関連にはあまり触れられていません。
さらに、一切触れていませんがショートカット関連もかなり奥深いです。
検索するとかなり恋に落ちてるエンジニアさんがまとめた情報等もあるので、ぜひ調べてみてください。

ではでは。