この記事について

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

なお、今回設定した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/

AutoFileName

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

AlignTab

=や|の位置を揃える機能を追加するプラグイン。
＜使い方＞
　・右クリック＞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

node.jsのダウンロード
　node.jsをダウンロードしていない場合は推奨版をダウンロードしておきます。
　https://nodejs.org/ja/
HTML/CSS/JS Prettifyプラグインをダウンロード
　Sublime Text上でCtrl+Shift+Pを押下。
　表示されたパネル上で「Install Package」と入力。
　「HTML-CSS-JS Prettify」と入力し、プラグインを追加。
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"
    },

Subllime Text3 設定メモ