Subllime Text3 設定メモ

#この記事について
プラグインが豊富で動作が軽量で３年ほど愛用してます。
どうせなら自分向けの設定をメモして共有しておこうと思います。

なお、今回設定したPCのOSはWindows10なのでそれ以外のOSの人は適宜読み替えてください。

#とりあえず使えるようにするまで
##ダウンロード
以下のサイトから上部メニューの「Download」> OSを選択してダウンロード。
https://www.sublimetext.com/

##インストール
DLしたexeを実行し、手順に従いインストール。
一先ず立ち上げて「Package Control」プラグインをインストールします。
https://packagecontrol.io/installation

＜手順＞

1. Sublime Text上でCtrl+Shift+P。
2. 表示されたパネル上で「Install Package Control」と入力しEnter。

##日本語化
###Japanize
メニューバーを日本語化するプラグイン。

＜手順＞

1. Sublime Text上でCtrl+Shift+P。
2. 表示されたパネル上で「Install Package」と入力(途中で補完候補がでるのでクリック)。
3. 「japanize」と入力してEnter。左下に進捗が表示されれるので待機。
4. ステータスバーに「Package Japanize successfully installed」と表示されたらインストール成功。
5. 表示されたinstall.txtの内容に従い設定ファイルのコピーと.jpの除去を行う。
   　　※メニューバーの「Preferences」>「Browse Packages...」をクリックすると
   　　　C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\を1発で開けます。

↓5.の設定後。

以降も上記の1.～4.の手順を利用してプラグインを追加していきましょう！

###IMESupport
Windowsでの日本語入力位置のずれを改善するプラグイン。
私の環境の場合、入れても1文字分ずれてるけどないよりマシのなので…(-- )
https://packagecontrol.io/packages/IMESupport

###ConvertToUTF8
UTF8しか対応していないSublime TextでShift-JISファイルを開けるようにするプラグイン。
https://github.com/seanliang/ConvertToUTF8

##テーマの設定
テーマを紹介するサイトは色々あるので検索して気に入るデザインのものを入れるといいかと。
私のお気に入りは「Material」のデフォルトテーマです。
https://github.com/equinusocio/material-theme

#プラグインで機能を追加していく
##必須級プラグイン
###Emmet
言わずもがな。
これなしにコーディング作業は始まらないくらいの必須プラグイン。
https://github.com/sergeche/emmet-sublime#readme

###BracketHighlighter
閉じ括弧をハイライトしてくれるプラグイン。地味だけど超便利。
https://packagecontrol.io/packages/BracketHighlighter

###Side Bar Enhancements
サイドバーの右クリックメニューを拡張するプラグイン。
https://packagecontrol.io/packages/SideBarEnhancements

##便利機能追加プラグイン
###Sublimerge 3
右クリックメニューにファイル比較機能を追加するプラグイン。
保存済みファイルのみならずクリップボードの中身との比較もできるので便利です。
https://www.sublimerge.com/sm3/

###Auto​File​Name
ファイルパスの入力補完ができるようになるプラグイン。
https://packagecontrol.io/packages/AutoFileName

###Align​Tab
=や|の位置を揃える機能を追加するプラグイン。
＜使い方＞
　・ 右クリック＞Align ​Tab＞揃えたい記号を選択する
　・ Ctrl+Shift+P＞AlignTab: Live Preview Modeを入力＞記号を指定
https://packagecontrol.io/packages/AlignTab

##CSSの編集に便利なプラグイン
###Goto-CSS-Declaration
HTMLからCSSファイルの指定クラスが存在する行にジャンプできるようになるプラグイン。
https://github.com/rmaksim/Sublime-Text-2-Goto-CSS-Declaration

###Color Helper
Color Highlighterのほうが有名な気がするけど、透明度まで表示してくれるのでこっちの方が好み。
https://packagecontrol.io/packages/ColorHelper

こんな感じで表示してくれる。

###Color Picker
その名の通りカラーピッカーを表示できるようになるプラグイン。
https://packagecontrol.io/packages/ColorPicker
メニューバー＞基本＞キーバインドからショートカットを設定すると利用可能になります。
下の例はCtrl+Alt+Cで開く場合の設定。

Default (Windows).sublime-keymap

[
  //「ColorPicker」を起動するショートカットキー
  { "keys": ["ctrl+alt+c"], "command": "color_pick" },
]

###Emmet LiveStyle
Chromeブラウザと、Emmetプラグインのインストールが必要。
Chromeにもプラグインを追加すると、リロードなしでプレビューできるようになります。
http://livestyle.io/

##自動整形機能の追加
右クリックまたはショートカット(Ctrl+Shift+H)から自動整形できるようになります。
https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify

1. node.jsのダウンロード
   　node.jsをダウンロードしていない場合は推奨版をダウンロードしておきます。
   　https://nodejs.org/ja/

2. HTML/CSS/JS Prettifyプラグインをダウンロード
   　Sublime Text上でCtrl+Shift+Pを押下。
   　表示されたパネル上で「Install Package」と入力。
   　「HTML-CSS-JS Prettify」と入力し、プラグインを追加。

3. node.jsのインストール先を変更した場合はパスを変更しておきます。
   　ツール＞HTML/CSS/JS Prettify＞Set `node` Pathをクリック。

HTMLPrettify.sublime-settings

    "node_path":
    {
        // インストール時に設定したパスに書き換える
        "windows": "C:/Program Files/nodejs/node.exe",
        "linux": "/usr/bin/nodejs",
        "osx": "/usr/local/bin/node"
    },