[超オススメ]DreamWeaverから乗り換え。Sublime Text 2のインストールと初期設定
- 公開日:2013/5/18
MacではCodaが断然有名ですが、いきなりシェアウェアを購入する勇気もなくエディタ難民のままずーっとDreamWeaverでコーディングしてきました。そしてこの度、ようやく出会えたのがこの「Sublime Text 2」
起動が早い、動きが軽快、プロジェクト管理も簡単そう、そして何より拡張性が高い!
Package(プラグインみたいなやつ)を導入すれば、HTML5,CSS3,PHPだけじゃなくWordPressやDrupalの入力自動補完などができます。そんなわけで、かなりおすすめです。(Win版もあるみたいです)
初めは、どんなPackageがあって、何が出来るのか、さっぱりわからなかったので最低限こんなもんだろうという設定だけしてみました。それでも十分便利です。というわけで、Sublime Text 2で私がインストール直後に設定したメモです。
ダウンロード
以下からダウンロードしてインストールします。
Sublime Text – Download
Packageインストールの準備
インストール出来たら、さっそく拡張してみようということで、Packageの追加や削除を管理する「Package Control」を有効にします。
まず、メニューのView > Show Consoleを選択します。
ここに以下を入力します。
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と入力します。
installと入力したら「Package Control:Install Package」が出てくるので選択してEnterを押します。
これでPackageを検索できるようになったので、インストールしたいPackage名を入力していくだけです。
なんかすでにたくさんいいものがあるようですが、使う前から色々入れてしまうと後で取捨選択が難しくなるので、とりあえず以下だけ入れてみました。
これだけでも便利です。
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 // 行番号の表示
}
?>