Sublime Text の設定・セットアップ

まっさらなMac Bookの設定を続けていきたいと思います。
[前回の投稿](http://qiita.com/daigon/items/567657d11ed5a9ac62d8)では主にmac本体の初期設定を行ったので、今回はテキストエディタのダウンロードとエディタの初期設定手順をまとめます。

初めてテキストエディタを触る人も想定し、細かく手順をまとめようと思います。

今回使用するのは[Sublime Text 3](https://www.sublimetext.com/3)です。

# Sublime Text 3 をインストールして開く
- https://www.sublimetext.com/3 からダウンロード
- macの場合はOS Xを、その他の場合は対応するものをクリックし、ダウンロードが開始

![スクリーンショット 2017-03-25 1.01.17.png](https://qiita-image-store.s3.amazonaws.com/0/145861/b29fd02c-5f0b-9037-6213-98d1831a963b.png)

- Applicationsに移動させて、Applicationフォルダを開く

![スクリーンショット 2017-03-25 1.02.14.png](https://qiita-image-store.s3.amazonaws.com/0/145861/0b7322f1-7b0b-9628-58f7-e29ea2a29b60.png)
<img width="614" alt="スクリーンショット 2017-03-25 1.01.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/96e4ae1c-a2bf-8a22-3082-a251618ddefc.png">

- 「開く」ボタンで開く

<img width="752" alt="スクリーンショット 2017-03-25 1.01.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/efaf7229-7b4c-1965-30c5-27cede446bac.png">

# Packageのインストール準備
- コンソールを開く(ctrl + shift + @)
<img width="752" alt="スクリーンショット 2017-03-25 1.13.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/6ba7dfc5-c607-df32-e4e7-b56a97e314b9.png">

- 以下の呪文を貼り付けてenter

```
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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://packagecontrol.io/' + 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)
```

<img width="752" alt="スクリーンショット 2017-03-25 1.17.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/64072927-4bbb-dc24-72cc-13e2e6158d46.png">

- 実行後はこんな画面になるのでescを押してコンソールを閉じる
- パッケージコントロールの呼び出し(command(⌘) + shift + p)
<img width="752" alt="スクリーンショット 2017-03-25 1.18.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/b41e5b1d-a578-99c5-693c-93bfba4ad6c8.png">

- installと入力して出てくるInstall Package Controlをクリック
<img width="752" alt="スクリーンショット 2017-03-25 1.20.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/cfb0a2cc-716d-3f2b-a425-6473f82f6256.png">

※ 今後パッケージをインストールする際は(⌘ + shift + p)でパッケージコントロールを開き、installと入力してInstall Packageを選択してから行う

<img width="752" alt="スクリーンショット 2017-03-25 1.24.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/d1becf1a-25f2-be1e-a015-11c0623d6e03.png">

# Packageのインストール(初回おすすめ)
上の手順でInstall Packageを選んだ状態でインストールしていく

- HTML5 … HTMLタグ入力補完
- Auto Close HTML Tags … HTMLの閉じタグの入力補完
- CSS Snippets … CSSの入力補完
- TrailingSpaces … 不要な半角、全角スペースへの色付け

<img width="752" alt="スクリーンショット 2017-03-25 1.30.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/7df3ab7f-2fd7-0c38-c7ad-97034dbb2b5f.png">

※ちなみに、画面上部のメニューから以下を選択すればインストールしたパッケージの一覧を表示可能
```Preference > Package Settings > Package Control > Settings - User```

<img width="833" alt="スクリーンショット 2017-03-25 1.39.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/7479b06b-3d1b-e184-7aad-228baedcafb1.png">

<img width="876" alt="スクリーンショット 2017-03-25 1.40.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/f481ae0e-3007-1ae3-628a-c8a584a59ffd.png">


# 設定の追加
- 画面上部のメニューから以下を選択し、設定画面を開く。
```Preference > Settings```

<img width="795" alt="スクリーンショット 2017-03-25 1.52.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/eae3e87a-3399-3d57-19bc-87045f5d59fe.png">

<img width="876" alt="スクリーンショット 2017-03-25 1.54.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/efcdde32-c11e-e580-b0b0-fc096f9ce1c0.png">


- 右側に表示されたファイル内に以下を貼り付ける。(あえて説明を省略するが、いい感じにエディタを使いやすくする設定)

```
{
  "auto_indent": true,
  "bold_folder_labels": true,
  "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
  "default_encoding": "UTF-8",
  "disable_formatted_linebreak": true,
  "disable_tab_abbreviations": true,
  "draw_white_space": "all",
  "enable_tab_scrolling": false,
  "font_size": 17,
  "highlight_line": true,
  "ignored_packages":
  [
  "Vintage"
  ],
  "match_tags": true,
  "open_files_in_new_window": false,
  "tab_size": 4,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "word_wrap": true,
}
```

<img width="1319" alt="スクリーンショット 2017-03-25 2.08.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/946414a2-db05-b109-f64c-9aa673d69723.png">

- こんな感じに貼り付けて保存(⌘ + s)

※ 今後、どんどん使いやすい設定を組み込みましょう！

# Tabキーでの予測変換処理の修正
現段階だと、日本語入力した際に変換候補をたどる時に用いるTabキーを押すとインデントになってしまう状態
これを以下の手順で解消していく

- Finderを開き、画面上部のメニューの移動内にある「ホーム」をクリック

<img width="745" alt="スクリーンショット 2017-03-25 2.39.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/cc03f365-e5cf-7fb3-19ac-2366cb026057.png">

- 適当な位置で右クリックをして、表示オプションの表示を選択

<img width="751" alt="スクリーンショット 2017-03-25 2.46.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/71bdb3d3-7cda-af64-4882-a1911b4e3909.png">


- 一番下のチェックボックスの「"ライブラリ"フォルダを表示」にチェック

<img width="686" alt="スクリーンショット 2017-03-25 2.45.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/affb4d72-57f0-f3fe-dec2-2ab88b093d49.png">

- Sublime Textの画面上部のメニューから以下を選択し、キーバインド設定画面を開く
```Preference > Settings```

<img width="674" alt="スクリーンショット 2017-03-25 2.54.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/bed618b8-401b-d15f-c9b7-a6b5c1582b5e.png">

<img width="1348" alt="スクリーンショット 2017-03-25 2.52.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/0119e7ee-a7cf-f57b-f8e5-7b4f806b4e75.png">

- 開いた左側のファイル上で(⌘ + shift + s)をして、先程表示させた「ライブラリ」がある「ホーム」ディレクトリ配下の、
```[ホームディレクトリの名前]>ライブラリ>Application Support>Sublime Text 3>Package```
に移動し、Package配下にDefaultという名前のフォルダを作成

<img width="705" alt="スクリーンショット 2017-03-25 3.05.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/af07a910-e244-0195-1581-2d01ca07f728.png">

![スクリーンショット 2017-03-25 3.03.41.png](https://qiita-image-store.s3.amazonaws.com/0/145861/e99293eb-4573-9daa-8fcf-4eacb2defdf6.png)

- 作成したDefault配下に保存。保存後、Sublime Textを閉じる
- 再度Sublime Textを開き、画面上部のメニューから以下を選択し、キーバインド設定画面を開く
```Preference > Settings```

- 100行目~105行目を選択し(⌘ + /)でコメントアウト
<img width="1348" alt="スクリーンショット 2017-03-25 3.15.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/82fc0f9f-31fa-6d53-d809-8e87c4fcd032.png">

- 保存(⌘ + s)してキーバインド設定画面を閉じる
- 予測変換がタブで行えるようになってる

<img width="747" alt="スクリーンショット 2017-03-25 3.17.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/145861/dad0cd4e-ca64-ef71-2c5a-aa1a6b3df86d.png">

# Google日本語入力の導入
開発向けの設定をGoogle日本語入力で行いましょう。
詳しくは[こちらのページ](http://qiita.com/daigon/items/567657d11ed5a9ac62d8#google%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%85%A5%E5%8A%9B)にまとめてあります。