インストール方法

Sublime Textの公式ページから自分のOSに対応あっているものをダウンロードします。
Winの方はzip形式、Macの方はdmg形式でダウンロードされます。

画面の指示に従ってインストールします。

Package Controlのインストール

Package ControlとはとはSublime Textの拡張機能であるパッケージを管理するための機能です。
これがないと高機能なメモ帳止まりというのは言い過ぎですが、それくらい肝となる機能です。

インストール手順

  1. メニューのviewからshow consoleを選択
  2. インストール用のコードを公式ページでコピー
  3. コンソールに2でコピーしたコードを貼り付けてEnterキーを押す

これで、パッケージをインストールするための準備が整いました!

パッケージをインストールする

インストール手順

  1. コマンドパレットを表示する(mac:⌘+shift+P win:ctrl+shift+P)
  2. 表示された入力窓にinstallと入力し、Package Control: Install Packageを選択してEnterキーを押す
  3. インストールしたいパッケージ名を入力すると候補が出てくるので選択してEnterキーを押す

こちらが基本の流れとなります。
2でlistと入力しPackage Control: List Packagesを選択

必ず入れたいパッケージ

基本的には自分で便利だと思うものを入れればOKなのですが、外せないものもあるのでご紹介します。

ConvetToUTF8

SublimeTextはUTF-8でファイルを扱うので、Shif_JISなどのファイルを開くと文字化けしてしまいます。
これを解決してくれるパッケージがConvetToUTF8です。

このパッケージをインストールするとUTF-8以外のファイルを変換してUTF-8として扱えるので文字化けが起こりません。保存するときには元の形式に戻して保存されますので形式が変わってしまう心配もないです。

Codecs33(macのみ)

mac環境の場合、ConvetToUTF8のみだとうまく動いてくれません。。。
これを解決してくれるプラグインです。

IMESupport(winのみ)

winだとなぜかインライン変換に対応していません。。。これをある程度解決してくれます。

入れておきたい基本パッケージ

ほとんどの人にとっては役立つ、入れておいて間違いないのではというパッケージを紹介します。

AutoFileName

目的のファイルまでのパス候補を自動で出してくれます。
画像の場合、widthやheightを自動で補完することもできるはずなのですが、うまく動かないことも多々あります。
そんな場合はPreferences→Settings – Userを開いて

"afn_template_languages":true,

を追加します。

このままだとheightが先にくるので、widthが先がいいという場合は

"afn_template_languages":true,

も追加します。

All Autocomplete

こちらはコードの補完を手伝ってくれます!
開いている別ファイルからも補完候補を拾ってくれる気の利くやつです。

BracketHighlighter

カッコを見やすくしてくれます!もちろんHTMLの開始タグ・閉じタグも!
カッコ自体だけでなく行数のところにも表示が追加されるのでわかりやすいです!

SideBarEnhacements

サイドバーの機能を拡張してくれます。標準のサイドバーは心もとないので入れましょう。

Smart Delete

改行箇所を削除するときに余分なインデントも一緒に削除してくれます!

Trailing Spaces

行末にある半角スペースをハイライトして削除してくれる地味に嬉しい機能です。
保存時の削除はデフォルトでも設定を変更すればできますが、こちらは保存時以外にも設定でき、ハイライトの色を変えたりもできます。

 

この記事を書いた人

Yuki Tomioka

元焼肉店店長からゼロシード株式会社の1人目のwebエンジニアとなる。テクニカルディレクターとして勤務し、WordPressのカスタマイズやアクセス解析や広告運用などに従事。現在は事業会社のフロントエンドエンジニアとして勤務。
タイムチケットで相談も受け付けてます。