前置き

この記事は2013/08/07のすごい広島 #12の記事です。

本題

今回は軽量人気エディタSublime Textをインストールしたものの、設定をほとんどしてなかったので、すごい広島の時間を使って設定しました。
備忘録の意味の含めて記事にします。

準備

Sublime TextはマルチプラットフォームなソフトでMac OSX、Windows、Linuxのそれぞれで動作するプログラムが提供されています。なので、それぞれのOSに対応するのをダウンロードしてインストールします。
http://www.sublimetext.com/にアクセスし、Downloadというメニューをクリックするとダウンロードページに行けます。

ダウンロード後、インストールします。WindowsやMac版では他のソフトをインストールする時と同じようにするだけで、すごく簡単にインストールできるます。（Linux版はインストールしたことがないので、わかりませんが、Linuxを扱える人にとってはそんなに難しくないのではないかと思います。）

設定

では、早速設定していきましょう。

1. パッケージコントロールのインストール（※インターネットに接続している必要があります）
   いろいろな便利な機能を簡単に組み込める「パッケージコントロール」と呼ばれるものを組み込みます。
   1. ctrl+`（←Macの場合）でコンソールを表示
   2. 下からニョキッとコンソールが開くので次のスクリプトを（1行で）入力してenterキーを押します。
      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’)

      このスクリプトはパッケージコントロールの公式サイトに書いてあります。
      http://wbond.net/sublime_packages/package_control/installation

   3. 「Please restart Sublime Text to finish installation」と表示されるのでSublime Textを再起動する
2. パッケージコントロール便利なパッケージを組み込みます（※インターネットに接続している必要があります）
   1. command + Shift + p（←Macの場合）でコマンドパレットが開くので「install package」と入力
   2. その後入れたいパッケージ名を入力する。
      とりあえず使うだろうなと思われる、以下のものをインストールしました。
      （入力文字で自動補完でいろいろでてくるので便利）
      • HTML5
      • CSS Snippets
      • jQuery
      • AngularJS
      • SideBarEnhancements
      • Nodejs
      • Bootstrap 3 Snippets
      • AutoFileName
3. エディタそのものの設定（これはすごい広島が終わってから設定しました）
   1. メニューの”Preferences”にある”Settings – User”を選ぶ
   2. 表示されたファイルの中に次を追記します。

          //フォントサイズ
          "font_size": 12,
          //行間
          "line_padding_top": 3,
          //タブサイズ
          "tab_size": 4,
          //空白の削除
          "trim_trailing_white_space_on_save": true,
          //タブやスペースなどの不過視文字を表示(お好みで)
          "draw_white_space": "all",
          //現在の選択行をハイライト表示(お好みで)
          "highlight_line":true,
          //自動改行
          "word_wrap": true
      

   3. Sublime Textを再起動して設定をすべて適用します

以上、Sublime Text 2の設定でした。


参考にしたサイト：Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ – mnemoniqs




最後に、ドットインストールにSublime Textの入門レッスンがあるので、参考になると思います。
http://dotinstall.com/lessons/basic_sublimetext