前回sublimetextのインストールでエラーが出て途中で挫折していましたが、無事エラーもなくなり再開したいと思います。
今回もスクー、田中晶子先生の【2017-2018年版】Sublime Text入門第１回を見ながら進めています。スクー会員の方はあわせてそちらも見てみてください。
sublimetext3のパッケージとは
ところでパッケージとはなに？と思う方もおおいと思いますが、パッケージとはsublimetext3に便利な機能を追加していく拡張機能のようなものです。sublimetext3はそれだけでも十分便利なエディターですが、このパッケージを追加していくことでより便利な自分にあったものにしていくことができます。
sublimetext3にパッケージを追加していく
sublimetextでcontrol+shift+P(Mac:⌘+shift+P)を押すとメニューバーが出てきます。
この一覧の中にあるInstal Package という項目をクリック！
するとパッケージの一覧が出てきます。パッケージに種類がありすぎてここから探すのは大変なのであらかじめ入れたいパッケージを探しておきましょう。パッケージの名前を入力すると一致するものに絞られます。ほしいパッケージを発見したらそれをクリック！これでパッケージの追加が完了です！追加したよっていうようなメッセージなどは出ないのでちょっと肩透かしを食らった気分になります。（実は読み込み中にウインドウの左下が小さく動くアニメーションがあったりするんですが、とにかく地味スタイリッシュで目立ちません）
sublimetext3の便利なパッケージ
授業の中で紹介されていたパッケージです。全部追加する必要はないと思うので自分にとって必要ありそうなものだけ追加しましょう。
AutoFileName
ファイルまでのパスを完全補完してくれます。hrefやimgタグのscrなど。私は時々階層間違えて画像表示できていない事があるのでこれは便利そうです！
Diffy
メニューバーのview/layoutから縦でも横でもいいので２分割して、比較したいファイルを開きcontrol+k+d(Mac: ⌘+k+d)！すると２つのファイルの異なる場所が赤で囲まれます。
だったら全く別のファイルを開いたらどうなるのか？疑問に思ったのでやってみましたが、Diffyは冷静に異なる場所を教えてくれただけでした。赤すぎ！！←そりゃそうだ
TraillingSpaces
半角スペースや全角スペースを色で表示できる。タグの外側にムダなスペースがあるとうまく動かなくなってしまう事があるらしくスペースは入れないようにするのがベストらしい。その余分なスペースを見つけるためにあるのがこのパッケージ。
ただ、全角スペースはインストールしただけでは表示できないので設定を加えなくてはなりません。この下のテキストをTraillingSpacesのuser settingに追加してください。
※コピペだとうまくいかないかもしれないから手打ち推奨と授業では言っていました
{
“trailing_spaces_regexp”:” |[ \t]+”,
“trailing_spaces_highlight_color”: “invalid”,
}
ConvertToUTF8
UTF8以外のエンコーディングで書かれたテキストが文字化けせずに表示できるようになります（shift-jsとか）。最近はあまりありませんが、入れておくと文字化けした時にアタフタしないでいいので追加しておきましょう。
IMESupport（winのみ）
windowsのPCでsublimetextを使っていると日本語入力をするたびに入力用の別窓が立ち上がって、Enter押すと反映されていてこれがウザくて私は会社でsublimetext使うのをやめたんですが、これさえ入れればwindowsでもイライラしなくてすみます。長年の悩みが解決できました！Macの人はこれをインストールしなくても普通に入力できるので必要ありません。
BoundKeys
たくさんのパッケージを追加していくと割り当てられたショートカットキーがどれだったかわからなくなったり、他のパッケージとかぶってしまったりすることがあります。それを確認できるプラグインです。
Can I Use
自分の使っているタグがどのブラウザで使えてどのブラウザでは使えないかを表示してくれるパッケージです。調べたいcssの上にカーソルを置いて右クリック。Can I useを選択するとCan I useのサイトにジャンプしてどのブラウザに対応しているかが一覧で出ます。自分の使っているブラウザと別のものだとうまく表示されていないことがよくあるのでこまめにチェックしましょう。
ここからは授業では説明されなかったけどレジュメに載っていたやつ
授業で説明はされなかったけどレジュメに載っていたものです。（重要度は低め？）
BracketHighlighter
タグの開始と終了をハイライトしてくれます。これは絶対いれておくべきです。閉じタグが消えて表示が崩れた場合なんかに一発で原因が分かります。divの入れ子地獄もへっちゃらです。
SublimeCodeIntel
Javascript,Mason,XBL,XUL,RHTML,SCSS,…..のシンタックスハイライトと自動補完をしてくれます。
ColorHighlighter
CSSで設定している色が視覚的に分かるようになります。直感的でイイ！難しい設定もなし！
ColorPicker
パッケージを追加するとカラーピッカーが使えるようになります。どんどん便利になる私のサブライムちゃん！！
Git
ターミナルなどのコマンドラインを使わなくてもGitが使えるようになる
→らしいです。きっとすごいことなんだろうけど、そもそもGitが何かもよくわからないので、今回はとりあえずスルーします。必要になったら追加したいと思います。
【2017-2018年版】Sublime Text入門第１回以上です！
packagecontrolを追加する時にちょっとつまづいてしまいましたが、他は特に難しいことはありませんでした。
次はsublimetext3を爆速で使うエメット編でお会いしましょう！
