IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

[超オススメ]DreamWeaverから乗り換え。Sublime Text 2のインストールと初期設定

SublimeText 2

MacではCodaが断然有名ですが、いきなりシェアウェアを購入する勇気もなくエディタ難民のままずーっとDreamWeaverでコーディングしてきました。そしてこの度、ようやく出会えたのがこの「Sublime Text 2」


起動が早い、動きが軽快、プロジェクト管理も簡単そう、そして何より拡張性が高い!
Package(プラグインみたいなやつ)を導入すれば、HTML5,CSS3,PHPだけじゃなくWordPressやDrupalの入力自動補完などができます。そんなわけで、かなりおすすめです。(Win版もあるみたいです)

初めは、どんなPackageがあって、何が出来るのか、さっぱりわからなかったので最低限こんなもんだろうという設定だけしてみました。それでも十分便利です。というわけで、Sublime Text 2で私がインストール直後に設定したメモです。

ダウンロード

以下からダウンロードしてインストールします。
Sublime Text – Download

SublimeText Download

Packageインストールの準備

インストール出来たら、さっそく拡張してみようということで、Packageの追加や削除を管理する「Package Control」を有効にします。
まず、メニューのView > Show Consoleを選択します。
Sublime Text Show Console

すると、下部に入力エリアが表示されます。
Sublime Text Area

ここに以下を入力します。

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')

入力できたら、Sublime Text 2を再起動します。
これで、他のPackageをインストール準備ができました。

Packageインストール

command + Shift + pで「Command Palette」を開いて、そこにinstallと入力します。
Sublime Text CP

installと入力したら「Package Control:Install Package」が出てくるので選択してEnterを押します。
Sublime Text CP install

これでPackageを検索できるようになったので、インストールしたいPackage名を入力していくだけです。
Sublime Text P install

なんかすでにたくさんいいものがあるようですが、使う前から色々入れてしまうと後で取捨選択が難しくなるので、とりあえず以下だけ入れてみました。
これだけでも便利です。

Package名 機能
HTML5 HTMLの自動補完
CSS Snippets CSSの自動補完
jQuery jQueryの自動補完
Additional PHP Snippets PHPの自動補完
Drupal Project Autocomplete Drupalの自動補完
WordPressDev WordPressの自動補完
SublimeLinter HTML,CSS,JSのエラーをリアルタイムで指摘

私の場合はマークアップ目的での使用が多いと思ったので自動補完系を選んでみました。
DrupalやWordPressなどCMSの自動補完もできるのはありがたいです。

カラースキーム(テーマ)の設定

カラーの設定は、Sublime Text2 > Preferences > Color Schemeから選択できます。

行間とかフォント種類などの設定

メニューのSublime text2 > Preference > Settings Userを選択すると「Preferences.sublime_settings」タブが立ち上がります。ここでお好みで細かな設定ができます。

{
"font_size": 12, //フォントサイズ
"line_padding_top": 0, //行間
"tab_size": 2, //タブサイズ
"translate_tabs_to_spaces": false, // タブをスペースに置き換える
"trim_trailing_white_space_on_save": true, //空白の削除
"highlight_line":true, //現在の選択行をハイライト表示
"auto_match_enabled":true, // 閉じ括弧などを補完する
"draw_white_space": "all", //不過視文字を表示
"line_numbers": true // 行番号の表示
}
?>

とても参考になるサイト

Sublime Text 2 のDefault設定ファイルについて