現在、Sublime Text 3を使っていますが、使い勝手によっては、乗り換えを検討したいと考えていました。
結論から言うと、まだ、Sublime Text 3をメインで使用しています。

こんな感じで比べてみました

  • 特徴的な機能
  • 操作について
  • Linterについて
  • デメリット

特徴的な機能

まず前提として、これらのエディタには、以下のような機能が求められたのだと考えます。

  • Eclipseなどの統合開発環境よりも、気軽にコーディングしたい。
  • Dreamweaverよりも軽く動作し、カスタマイズしやすいものが良い。
  • 普通のテキストエディタよりもコーディングしやすい。
  • 環境が変わっても扱えるものが良い(マルチプラットフォーム

これらは当たり前なので、それ以外の特徴的な機能を書き出してみます。

Sublime Text 3

コーディングやマークアップに特化したエディタの先駆けではないでしょうか。

  • コーディングのための編集機能
  • プログラム言語の対応の多さ
  • 拡張性の高さ

が挙げられます。
そして、何より軽いです。

Sublime Text – Download

Atom

Githubが開発したアプリケーションです。
Sublime Textと似ているところが多いので、今すぐに乗り換えても違和感が少ないです。
コマンドラインでパッケージを一括でインストールできるので、マシンを変えても移行が楽そうです。
すでに3500以上のパッケージが存在し、思いつくものはそろっています。

Atom

Brackets

Adobeのアプリケーションです。
他のエディタと違い、最初からメニューが日本語になっています。
標準で機能がそろっているので、それほどエクステンション(機能拡張)をインストールする必要がありません。

特徴的な機能として、PSDデータのまま、画像の書き出しやマークアップできるExtract for Brackets (Preview)という機能があります。

リアルタイムに変更した内容をブラウザで確認できるライブプレビュー、ファイルに移動せずその場で編集できるクイック編集など、基本機能が優れています。

Brackets – A modern, open source code editor that understands web design.

操作について

高度なテキスト編集や移動、マルチカーソル、素早いファイルオープン、自動補完機能などは、これらのエディタには備わっています。

Sublime Text 3

ほかのエディタと比べると補完機能が少し見劣りする気がします。
プロジェクト管理は、シンプルですが便利です。
(AtomやBracketsでは、微妙に扱いにくい)

Atom

Sublime Text以上に、たくさんのパッケージを入れる必要があり、環境を整えるために、時間がかかります

基本機能でできないことでも、パッケージで解決することが多いです。
すぐに新しい技術に対応したコーディングができそうな感じです。

Brackets

HTML上で画像のプレビューが見られたり、CSS上でビジュアル的にアニメーションの変更が可能なのが便利です。

PSDによるデザインであれば、Extract for Brackets (Preview)が使えますが、日本語テキストのコピペで文字化けしたりと、微妙にやり難いです。

Linterについて

ツクメモと言えば、Linterですよね。
コーディング時に、リアルタイムでチェックしてくれる機能は欲しいです。

チェックするツール(CSSならCSSLintなど)をインストールして、エディタにパッケージ/エクステンションを入れる必要があります。

Sublime Text 3

SublimeLinterというパッケージがあり、その上で、各言語のLinterのパッケージが必要です。
インストールは大変ですが、SublimeLinterの設定でチェック機能を一部除外したりできるので、自分の好みでカスタマイズできます。

Sublime TextとSublimeLinterっていいよね。

Atom

(Atom)LinterAtom-Lintと、二つあります。
Linterは、SublimeLinterと同じように、さらに別のパッケージが必要になります。
対応言語は、すごいいっぱいです。
Atom-Lintは、個別にパッケージを入れる必要がありませんが、対応言語が限られています。

Linter

Atom-Lint

私は、HTMLもチェックしたいのでLinterにしました。

Brackets

HTML/JavaScripit/CSSであれば、Interactive Linterを入れれば使えます。
そのほかのリンターの場合、例えばphpであれば、Brackets PHP Code Quality Toolsを入れる必要があります。
特にシリーズになっていないようなので、別々に探す必要があります。

MiguelCastillo/Brackets-InteractiveLinter

mikaeljorhult/brackets-php-code-quality-tools

デメリット

メリットとデメリットは、表裏一体だったりしますが、書いてみます。
これらのエディタ全般に言えますが、日本語やShift-JISが得意ではないです。

Sublime Text 3

安定しているとは言えますが、それほど進化が見られず、Atomに追いつかれた感があります。
この中で、唯一の有料のアプリケーションなのも厳しいところかもしれません。

3がリリースされてからだいぶ経ちますが、まだβ版のままです。
普通にサイトにアクセスすると、2なので、戸惑います。

Atom

パッケージが多く、試していかないと、使い勝手が良くならないので、自分のエディタになるまでに時間がかかります。
こんなに入れないといけないの?なんて思うことがありました。
カスタマイズを楽しめない人だと厳しいかもしれません。

Brackets

私の環境だと、予想以上に重いです。ボリュームのあるサイトだと厳しいかもしれません。

エクステンションのポータルサイトに検索がないので、アプリケーションから探さなくてはいけないのが面倒です。

まとめ

AtomBracketsも機能としては、申し分ありませんでしたが、(私の作業環境の問題かもしれませんが)起動や処理に重さがありました。

もともと、Dreamweaverが重たくて乗り換えた経緯があるので、速さを考えると、Sublime Text 3がまだ少しリードしていると感じました。

そう言っても、便利な機能を全く使わないというのは、もったいないので、併用していくのが良いでしょう。

ちょっとした併用のアイデア

それぞれ便利な部分を、都合良く使うのが、賢いと思います。
併用するために以下のパッケージ(エクステンション)を使うと良いでしょう。

EditorConfig

EditorConfigを使うとエディタ間で設定を共通にできます。

.editorconfigファイルをプロジェクトに配置して使います。
エディタで設定を気にせずに済みます。

プロジェクトチームで使うのも良いでしょう。
改行コード、インデント、文字コードの設定可能で、ファイルの種類別に設定することもできます。

EditorConfig

Emmet

HTMLやCSSを書くかたであればすでに使っているかもしれません。
少ないタイピングでコーディングできるだけでなく、便利な機能が数多くあります。
様々なエディタに対応しているので便利です。
ショートカットキーが違うので、自分用に統一するなどの工夫は必要です。

Emmet — the essential toolkit for web-developers

タスクランナー

これはパッケージではありませんが、複数のエディタで共有しにくい設定は、タスクランナーを使用すると良いでしょう。

俺だけのGulp(ガルプ)

そんな感じでまたねー。

フロントエンドエンジニアのための現在とこれからの必須知識
斉藤 祐也 水野 隼登 谷 拓樹 菅原 のびすけ 林 優一 古沢 宏太
マイナビ出版 (2016-01-28)
売り上げランキング: 96,477