少し前にたまたまcss3000行くらいになった時、DreamWeaverが遅い、と思ってしまいました。

というわけで、いろいろ検索して調べたり、良さそうなエディタをピックアップし、Sublime Textに決定しました。

Sublime Textの良いところ

Sublime Textの良いところをいくつか上げてみます。

とにかく軽い

他にも軽いエディタがありますが、これもかなりの軽さです。

クロスプラットフォーム

WindowsとMac、さらにLinuxにもあります。
自宅や会社でPCが変わっても違和感はでません。

プラグインが多い

実は、そのまま使うと、あまり良さが出ません。
自分にあったプラグインを見つけて、入れましょう。

カスタマイズ

テーマが豊富で、各種設定が細かくできます。

前の状態で立ち上がる

保存しないで終了してしまっても、前の状態で立ち上がります。
これは地味にうれしいですね。

Sublime Textの悪いところ

良いところだけだと、面白くないので、悪いところも上げてみます。

日本語に弱い

Shift JISのファイルが化けてしまったり、Windowsですと日本語のインライン入力ができません。
プラグインで解決できますが、イケてるとは言えません。

WindowsとMacで、違うショートカットがある

OS標準の挙動があるので、仕方ない部分ではありますが、ちょっと残念です。

インストール

公式サイトから自分のOSのファイルをダウンロードするだけです。

公式サイトでDownloadを選ぶと、3はベータ版なので、2の方に遷移します。

ちなみに私自身すでに3半年以上使っています。
プラグインで問題があったりしますが、だいたい解決の情報が発信されているので大丈夫だと思います。

Sublime Text 2
Sublime Text 3

Package Controlをインストール

sublimetext-sublimelinter01

まず、Package Controlを入れましょう。
その後のプラグインのインストールが楽になります。

下記のリンク先にあるバージョンにあったコードをコピーしてきましょう。

Package Control

Sublime Textに戻ったら、Ctrl + `View > Show Consoleで、Consoleを開き、バージョンにあったコードを貼り付けます。

プラグインを選ぶ

あとは、自分にあったプラグインを入れれば良いと思います。
ほとんどメジャーなものばかりですが、参考までに、私の入れているプラグインを見てみましょう。

AutoFileName imgタグなどから画像のパスを補完し、画像サイズを設定します。
BracketHighlighter ソースの括弧が、どこに対応しているのか、分かりやすくします。
CodeFormatter PHP、JavaScript、HTML、CSSのインデントなど綺麗にします。
CSS Snippets CSSを補完します
Emmet HTML・CSSを高速に編集できるEmmetのSublime Text用プラグインです。
HTML5 HTML5を補完します。
IMESupport Windowsでの日本語入力時、インラインっぽくします。
japanize メニューなどを日本語化します。
jQuery jQueryを補完します。
SublimeLinter リアルタイムにコードのエラーをチェックします。さらに、個別に各Linterプラグインが必要です。
SublimeLinter-csslint CSS用のLinterです。
SublimeLinter-html-tidy HTML用のLinterです。
SublimeLinter-jshint JavaScript用のLinterです。
SublimeLinter-php php用のLinterです。
TrailingSpaces 全角スペースと半角スペースを区別しやすくするため、全角スペースをハイライト表示します。
※3では一部修正が必要。
sublime text 3全角スペース ハイライト表示
ConvertToUTF8 Shitf JISやEUCに対応させるためのプラグインです。
※Mac版の3では、一部修正が必要。
Mac OS版のSublime Text 3でConvertToUTF8プラグインが動作しないのを解決する方法

プラグインのインストールとSublimeLinterについて

いろいろな方がSublimeLinterについて触れていますが、それだけでは分かりにくかった印象があるので、もう少し追記します。

とりあえず、私の使っているLinterをインストールしてみましょう。

SublimeLinter単体では、リアルタイムで構文エラーを表示するためだけの機能しかありません。
つまり、構文エラーかどうか判定するには、各言語のLinterが必要になります。
さらに各Linterによって、別途プログラムが要ります。

Command Paletteからインストール

sublimetext-sublimelinter02

Command PaletteからSublimeLinterを含む、使用する各Linterをインストールしましょう。

MacならCommand + Shift + p、WindowsならCtrl + Shift + pです。
または、Tools > Command paletteから開きます。

そこからPackage Control : Install Packageを選択します。
(検索欄に似た単語を書くと、すぐに出てきます)

入れたいプラグイン名を選ぶとインストールできます。
各Linterを入れましょう。

Node.jsをインストールする

SublimeLinter-csslint / SublimeLinter-jshintは、Node.jsのパッケージを管理するためのnpmというツールで、必要なプログラムをインストールします。

公式サイトからダウンロードできます。

node.js

SublimeLinter-csslintを動かすために

コマンドプロンプトターミナルからNode.jsでインストールします。

インストールできると、SublimeLinter-csslintが動くようになります。

SublimeLinter-jshintを動かすために

先ほどのcsslintとほとんど同じです。

SublimeLinter-phpを動かすために

こちらはphpがインストールされている必要があります。

Mac
Windows

私は、XAMPPMAMPのphpをそのまま利用しました。
phpの場所に環境変数を通しておきましょう。

SublimeLinter-html-tidyを動かすために

WindowsとMacでインストールが異なります。

Windows

Windowsは、下記のサイトからファイルをダウンロードする必要があります。

HTML Tidy for HTML5

ファイルを置いた場所に、環境変数を通しておけば完了です。

Mac

Macは、パッケージ管理ソフトHomebrewでインストールする方法があります。

Homebrew

インストール後、ターミナルから実行すればOKです。

私は、このやり方でインストールしましたが、
「また、管理ソフト入れるの嫌だよ」
という方は、

SublimeText3でHTML5の構文チェック

こちらを試してみるのも良いかもしれません。

まとめ

コーディングは、ほとんどSublime Textで行っていますが、いくつかのテキストエディタも併用しています。

いくつかのツールを併用して、良いところを使用するのが、かしこい使い方だと思います。

そういえば、GitHubのテキストエディタAtomってどうなんでしょうか。

では、そんな感じで、またねー。

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ
上野正大 杉本 淳 前川昌幸 森田 壮
インプレスジャパン
売り上げランキング: 180,598