デザイナーbizです。

「テキストエディタは何を使っているんですか？」「おすすめはありますか？」とエディタ話で盛り上がる時期かと思います。

私の場合はDreamweaverや秀丸を使ってコーディングをしていましたが、Sublime Text 3 を使ってみてとても使い心地が良かったので、その導入方法を紹介していこうと思います。

ここでの説明は、Win + Sublime Text 3 環境をベースに説明していきます。

目次

Sublime Textのダウンロード

Sublime Textは言ってしまえば、コーディングに特化したテキストエディタです。
Mac・Windows・Linuxに対応しています。

公式サイトからSublime Text3をダウンロード
http://www.sublimetext.com/3

Sublime Textのダウンロード

この中から、自分の使っているOSをクリックしてダウンロードします。

Dreamweaver並みに使える設定にする方法

機能追加をするにはまずPackageControllをインストール

PackageControllとは、Sublime Textに機能を追加できるプラグインです。
これを入れると、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに機能を追加することが出来ます。

（1）PackageControllのサイトからインポートスクリプトをコピーします。

Sublime Text 3 PackageControll
https://sublime.wbond.net/installation

「SUBLIME TEXT 3」のタブの内容をコピーしてください。

subtxt1

（2）Sublime Textを開いて、「ctrl+`」または、 「View > Show Console」 でコンソールを表示します。

できたら下の入力枠に先ほどコピーした内容をペーストして「Enter」を押してください。

これでPackage Controlが使用できるようになりました。

日本人なら初めに知りたい日本語化

Package Controlから、日本語化するためのパッケージをインストールする手順を紹介していきます。

まず、「Ctrl + Shift + p」でPackage Controlを起動します。

「Package Control:Install Package」を選択して

「japanize」入力してパッケージをインストールします。

しかし日本語化はパッケージインストールしただけでは終わらないので、適応手順に沿って日本語化を行います。
インストール後に表示される適応手順に沿って行けばメニューが日本語化されます。

適用手順

  1. C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
    C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Defaultにコピーします。※Defaultフォルダがない場合は作成してください。
  2. コピーしたファイルをオリジナルのファイル（.jpが付かないファイル）と置き換えます。（念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。）
  3. C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu（.jpが付かない方）を、
    C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Userにコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。

日本人なら一度は悩まされる文字コード問題

Sublime Textを使っていると必ず文字コードの問題に悩まされます。
Sublime TextはUTF-8が文字コードなので、Shift-jisのファイルを開くとばっちり文字化けしてしまいます。

そこで、文字化けに対応するパッケージをインストールする手順を紹介していきます。

「Package Control:Install Package」を選択して
convert2

「ConvertToUTF8」入力してパッケージをインストールします。
converttoutf8

↓Shift-jisのファイルを開いた時の表示
moji1

↓プラグインを入れた後のShift-jisのファイルを開いた時の表示
moji2

Dreamweaver並みに使えるパッケージ一覧

HTML入力補助系

パッケージ名 内容
HTML5 HTML5の自動補完　HTML5 のスニペット集と自動補完とハイライト。
CSS Snippets CSSの自動補完
jQuery jQueryの自動補完
Emmet HTML,CSSの記述を高速化する「Zen-Codingプラグイン」の次期バージョン
Bracket Highlighter タグの開始タグと閉じタグをハイライト表示タグとかブラケットの開始と終了を強調して表示する。
AutoFileName imgタグのパスを入力する際、ファイル名を補完
sublimelint 構文エラーを検出して表示する。
SublimeCodeIntel 通常は Ctrl + Space で補完を表示するものを自動で表示する。
Tag 閉じタグ </ を打つと補完してくれる。
ColorPicker カラーピッカーを表示
Emmet LiveStyle Developer Toolsから直接CSSが編集出来る。（Google ChromeまたはSafariの連動が別途必要）

FTP系

パッケージ名 内容
SFTP Sublime Text上からFTPでアップロード

その他

パッケージ名 内容
IMESupport 全角日本語入力に対応させる

まとめ

このように、「Package Control:Install Package」→好きなパッケージを入れるという手順を覚えてしまえば、どんどんDreamweaver並みにカスタマイズ出来てしまいます。

正直今回の記事でデフォルトの便利な機能が紹介出来なかったので機会があれば紹介します。