【メモ】Sublime Text3インストール後の初期設定メモ

こんにちは、えんぞーです。

SSDを新しく買って環境を再構築したので「Sublime Text3」もインストールし直しました。

以前同じ事をしているはずですが、すっかり忘れているので未来の自分にメモを残そうと思います。

現状ではHTMLやらCSSやらPHPはphpStormを使っていますが、プロジェクト外のちょっとしたファイルを弄る場合等に「Sublime Text」は必須です＾＾

一通り使える様にするまでの流れ

以前はSublimeText2を使っていてどこかのタイミングで3にしたと思いますが・・・今回は最初から3をインストールします。

細かい部分の説明等省略している部分もありますがご了承下さい＾＾

インストール

まずは公式ページから「Sublime Text3」をダウンロードし、インストール。

Package　Controlの導入

この作業があるからなのか、導入が面倒な印象があります。最初から付いてたら良いのに・・・とかｗ

メニューの「View」→「Show Console」でコンソールを表示してこのコードを貼り付けてEnter。

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Installation - Package Control

これでパッケージコントロールの使用が出来る様になっているはず。

winの場合はctrl + shift + P。macの場合はcmd + shift + Pで使えるか確認。

FontFaceの変更

まずは日本語文章等見るとFontがガタガタなのでFontを指定してあげます。

「Preferences」→「Settings - User」に下記の2行目3行目を追加（カンマ忘れずに）

font_faceに関しては自分の好きなフォントを指定。私はRictyが好きなので「Ricty」を指定しましたが、一般的には「メイリオ」とか指定して良いと思います。

{   
    "font_face": "Ricty",
    "font_size": 12,
	"ignored_packages":
	[
		"Vintage"
	]
}

 日本語化

賛否ありますが今回は日本語化してみました。

パッケージコントロール（ctrl + shift + P）→「Install Package」→「japanize」を検索・インストール。

インストール後に表示される説明に従ってファイルをコピーしたりします。

日本語をインラインで入力する

このままだと日本語を打つ場合に明後日の方向で入力が行われるのでインラインで入力されるように「IMESupport」を導入します。

パッケージコントロールから「IMESupport」を検索・インストール。

EUC-JPとかShift-Jisのファイルを開けるようにする

扱うファイルが全てUTF-8なら良いけどそうも行かないのでこちらの「ConvertToUTF8」を導入。

これでファイルエンコードで悩まされることもなくなります。

ここまででひとまず必須の設定は終わり。

Compassを使える様にする

css書くなら必ず入れておきたいのがCompassです。

正確に言うとSASS+Compassですが・・・。

Rubyをインストールする

RubyInstaller for WindowsからRubyInstallerをダウンロードしてインストール。

インストール時に環境変数PATHを設定するにチェックを忘れずに。

インストールが終わったらコマンドプロンプトから

ruby -v

でバージョン情報が表示されるかチェック。

大丈夫なら

gem update --system

このコマンドでアップデートを行った後に

gem install compass

これでCompassをインストール。Sassも一緒に入るのでこれだけでOK。

SublimeTextにCompassのプラグインや関連プラグインをインストール

• Compass
• SASS
• SCSS
• SCSS Snipet

この辺を一気にパッケージコントロールでインストール。

その後、適当な場所に「config.rb」を作成。内容はとりあえず下記のような感じに。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
output_style = :nested
line_comments = false

「scss」ディレクトリ作って中に適当なSCSSをSublimeTextで書いてビルドのテスト。

このままの状態でもCtrl + Bでビルド出来ました。

出来ない場合は「Tool」→「BuildSystem」で「Compass」選択するといけるかと思います。

それでも駄目なら一度コマンドプロンプトで「compass -v」を実行してみてバージョン情報が出るか確認してみましょう。

私の場合はここまで来たらあとは好みで他のプラグインを入れていく感じになります。

他にインストールする（かも）プラグイン

BracketHighlighter

{}等の強調表示。

Hayaku

なんとな～くのニュアンスでCSSの記述を補完してくれる便利プラグイン。個人的にこれと同機能をphpStormに実装して貰いたいｗ
(phpStormでも直感的な補完してくれますが、こっちに慣れているので＾＾)

EMMET

こちらも割とお世話になったりするけど、たまに思い出したかのように使う感じなのでチートシートが手放せません。

SubLimeLinter

コードチェックやらを色々やってくれるプラグイン。

SFTP

修正したファイルをすぐアップしたいとき等は便利。

ColorPicker

そのまんまカラーピッカー。何気に便利。

Flatland（Theme）

こちらはプラグインというかテーマファイル。もうずっとこれ使ってます。