「Sublime Text 2」入門！使い始める前にやっておきたい4つのこと

僕が最強！と思っているエディタ、Sublime Text 2。これからコーディングを始めようと思っている人にぜひおすすめしたいエディタである。
今日はこれからSublime Text 2を使い始めようという人のために、使い始める前にやっておきたい4つのことを紹介する。この4つのことを実践すれば、十分このエディタについて理解できる。

以下はSublime Text 2の公式サイト。こちらからDownloadできる。
Sublime Text

それではSublime Text 2を使い始める前にやっておきたい4つのこと！

まずはドットインストールでレッスンを受講しよう

まずはなんて書いてるけど、これだけでほぼOK。それだけ充実したレッスンが用意されている。主要な機能は全て網羅されてるんじゃないかな。このエディタの入門記事はかなりたくさんあるが、このレッスンを受ければそれらをわざわざ読む必要はない。時短！
※この記事も入門記事じゃねぇかよって話ですが、エディタの機能に焦点を当てていませんのでご勘弁を。

Sublime Text 2の基礎（ドットインストール）

ちなみにドットインストールのレッスン内で使用されているエディタは、2013/03以降のレッスンよりSublime Text 2に変更されたようだ。ドットインストールも認めるエディタということだね。

自分好みに設定しよう

"Settings - User"で環境設定、"Key Bindings - User"でショートカットキー設定の変更（上書き）が可能だ。もちろんそのままでも良いのだが、他のエディタから乗り換えた人は引き継ぎたい設定があるはず。以下の記事で全ての環境設定の内容が紹介されている。本当にありがたいなー。

Sublime Text 2 のDefault設定ファイルを眺める

需要があるかわからないが、僕の設定をさらしておく。

Settings – User

Color Schemeは"Monokai Bright"を使っている。半角スペースは表示させ、タブキーは半角スペース2つを入力するよう設定している。Vim設定はしていないのだが、将来的にするかもということで、備忘的に載せている。

{
  "color_scheme": "Packages/Color Scheme - Default/Monokai Bright.tmTheme",
  "draw_white_space": "all",
  "font_size": 11.0,
  "ignored_packages":
  [
    "Vintage"
  ],
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

Key Bindings- User

これは結構カスタマイズしているな。といっても「上下左右をVimのk,j,h,lに変更」というのと、「Home,Endをa,eに変更」しているだけ。それぞれaltキーと組み合わせて使っている。
タイピング時にホームポジション崩さないための設定。

[
  { "keys": ["alt+h"], "command": "move", "args": {"by": "characters", "forward": false} },
  { "keys": ["alt+l"], "command": "move", "args": {"by": "characters", "forward": true} },
  { "keys": ["alt+k"], "command": "move", "args": {"by": "lines", "forward": false} },
  { "keys": ["alt+j"], "command": "move", "args": {"by": "lines", "forward": true} },
  { "keys": ["shift+alt+h"], "command": "move", "args": {"by": "characters", "forward": false, "extend": true} },
  { "keys": ["shift+alt+l"], "command": "move", "args": {"by": "characters", "forward": true, "extend": true} },
  { "keys": ["shift+alt+k"], "command": "move", "args": {"by": "lines", "forward": false, "extend": true} },
  { "keys": ["shift+alt+j"], "command": "move", "args": {"by": "lines", "forward": true, "extend": true} },
  { "keys": ["ctrl+alt+h"], "command": "move", "args": {"by": "words", "forward": false} },
  { "keys": ["ctrl+alt+l"], "command": "move", "args": {"by": "word_ends", "forward": true} },
  { "keys": ["ctrl+shift+alt+h"], "command": "move", "args": {"by": "words", "forward": false, "extend": true} },
  { "keys": ["ctrl+shift+alt+l"], "command": "move", "args": {"by": "word_ends", "forward": true, "extend": true} },
 
  { "keys": ["alt+a"], "command": "move_to", "args": {"to": "bol", "extend": false} },
  { "keys": ["alt+e"], "command": "move_to", "args": {"to": "eol", "extend": false} },
  { "keys": ["ctrl+alt+a"], "command": "move_to", "args": {"to": "bof", "extend": false} },
  { "keys": ["ctrl+alt+e"], "command": "move_to", "args": {"to": "eof", "extend": false} },
  { "keys": ["shift+alt+a"], "command": "move_to", "args": {"to": "bol", "extend": true} },
  { "keys": ["shift+alt+e"], "command": "move_to", "args": {"to": "eol", "extend": true} },
  { "keys": ["ctrl+shift+alt+a"], "command": "move_to", "args": {"to": "bof", "extend": true} },
  { "keys": ["ctrl+shift+alt+e"], "command": "move_to", "args": {"to": "eof", "extend": true} }
]

ここら辺の設定は使ってみて随時変更していくのが一番かな。

snipet管理用のプロジェクトを作っておこう

これはかなり便利なので、おすすめしておきたい。snipetファイルはSubime Text 2のパッケージディレクトリ（[Preferences] –> [Browse Packages...] で開くディレクトリ）配下の各言語のフォルダに保存されている。snipetは強力な機能だが、いちいちフォルダを開いてはテキストの中身を確認して、編集してとなると手間がかかる。ここでプロジェクト管理機能を使うと便利だ。

手順

"Packages"フォルダをごっそりエディタにドラッグアンドドロップ -> サイドバーにフォルダが表示される（表示されない場合は[View] -> [Side Bar]を確認）
プロジェクトを作成、[Project] -> [Save Project As], [Project] -> [Edit Project]
拡張子が".sublime-snippet"のもののみを表示するよう以下のようにJSONファイルを編集する

{
  "folders":
  [
      {
          "path": "Packages",
          "file_include_patterns" : ["*.sublime-snippet"]
      }
  ]
}

以下のように必要なフォルダのみに絞ると、なお探しやすいですな。

{
  "folders":
  [
      {
          "path": "Packages/HTML",
          "file_include_patterns" : ["*.sublime-snippet"]
      },
      {
          "path": "Packages/CSS",
          "file_include_patterns" : ["*.sublime-snippet"]
      },
  ]
}

これでsnipetの追加、編集、削除が楽々できるようになる。テンプレ化できるコードはどんどんsnipetにすると作業が捗ること間違いなし。以下は自分で追加して最もよく使うsnipet。HTML5のテンプレ。こんなのdefaultであってもいいと思うけどなー。

<snippet>
  <content><![CDATA[
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>
  ]]></content>
  <tabTrigger>html5</tabTrigger>
  <scope>source.php,text.html</scope>
  <description>html5</description>
</snippet>

snipetではないが入力補完されるコマンドを変更したいという場合は以下のサイトを参照してほしい。

Sublime Text 2 の html の入力補完をカスタマイズする

ショートカットコマンドを使おう（Windowsユーザ向け）

やっぱりショートカットコマンドを使ってこそ、このエディタの力が実感できる。全部覚えるのはなかなか大変だと思うので、よく使うものをまずは覚えておこう。
※僕自身がWindowsユーザなのでWindowsのコマンドに限定させていただきます。

ショートカット

コマンド	概要
ctrl+shift+k	行削除
ctrl+shift+enter	行の上に改行を追加
ctrl+enter	行の下に改行を追加
ctrl+shift+up	行を上に移動
ctrl+shift+down	行を下に移動
ctrl+d	同じ単語を選択
ctrl+u	アンドゥ
ctrl+/	コメントアウト/コメント解除
ctrl+l	行選択
ctrl+[	インデント
ctrl+]	インデント解除
ctrl+shift+d	行のクローン作成
ctrl+shift+f	grep検索、置換
ctrl+shift+p	コマンドパレット
ctrl+p	Goto Anything　：行番号　@関数名
ctrl+q	マクロ記憶開始/停止
ctrl+shift+q	記録したマクロの実行

画面分割系

コマンド	概要
alt+shift+1	画面分割なし
alt+shift+2	横2画面分割
alt+shift+3	横3画面分割
alt+shift+4	横4画面分割
alt+shift+5	グリッド分割
alt+shift+8	縦2画面分割
alt+shift+9	縦3画面分割
ctrl+shift+1～4	画面移動
ctrl+1～4	アクティブにする画面を選択

こんな画像もある。Geekを目指すなら、親や彼女の目を気にせず壁に貼っておこう。

というわけで、Sublime Text 2を使い始める前にやっておきたいことを紹介した。本当にこのエディタ最高。

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

「Sublime Text 2」入門！使い始める前にやっておきたい4つのこと