レビュー:10の最高のJavaScriptエディター

JavaScriptプログラマーには、選択できる優れたツールがたくさんあります。ほとんどの場合、追跡するには多すぎます。この記事では、JavaScript、HTML5、CSSを使用した開発、およびMarkdownを使用したドキュメント化を適切にサポートする1​​0個のテキストエディターについて説明します。IDEの代わりにJavaScriptプログラミング用のエディターを使用するのはなぜですか?一言で言えば:スピード。

エディタとIDEの本質的な違いは、IDEがコードをデバッグし、場合によってはプロファイリングできることと、IDEがアプリケーションライフサイクル管理(ALM)システムをサポートしていることです。ここで説明するエディターの多くは、少なくとも1つのバージョン管理システム(多くの場合Git)をサポートしているため、基準はIDEとエディターの差別化要因ではありません。

SublimeTextとVisualStudio Codeは、JavaScriptエディターの中でもトップクラスです。SublimeTextは、便利な編集機能と同じくらいの速度であり、Visual Studio Codeは、さらに優れた機能とほぼ同じ速度です。ブラケットは3位になります。TextMateは数年前に私のリストで上位にランクされましたが、その機能は実際には新しい開発に追いついていないのです。

ほとんどの場合、選択したJavaScriptエディターは、Sublime Text、Visual Studio Code、またはBracketsにあります。しかし、他のいくつかのツール(Atom、BBEdit、Komodo Edit、Notepad ++、Emacs、Vim)には、すべてそれらを推奨するものがあります。手元のタスクに応じて、それらのいずれかが手元にあると便利な場合があります。

関連ビデオ:JavaScriptとは何ですか?クリエイターのブレンダンアイクが説明します

JavaScriptプログラミング言語の作成者であるBrendanEichが、この言語の使用方法と、その使いやすさでプログラマーの間で依然として人気がある理由について説明します。

オプションを確認し、最後にそれらを比較してみましょう。

崇高なテキスト

非常に高速で、柔軟で、強力で、拡張可能なプログラミングテキストエディタが必要で、コードのチェック、デバッグ、および展開のために他のウィンドウに切り替えてもかまわない場合は、SublimeTextだけを探してください。

速度に加えて、Sublime Textの多くの注目すべき強みは、JavaScript、HTML、CSSなどの70を超えるファイルタイプのサポートをカバーしています。ほぼ瞬時のナビゲーションと瞬時のプロジェクト切り替え。列の選択(ファイルの長方形の領域を選択する)を含む、複数の選択(一度に多数の変更を行う)。複数のウィンドウ(すべてのモニターを使用)および分割ウィンドウ(画面の領域を活用)。単純なJSONファイルによる完全なカスタマイズ。 PythonベースのプラグインAPI。統合された検索可能なコマンドパレット。

他のエディターのプログラマーの場合、Sublime TextはTextMateバンドル(コマンドを除く)とVi / Vimエミュレーションをサポートしています。非公式のSublimeTextのドキュメントでは、Emacsユーザー(moiなど)について軽蔑的な(そして誤った)発言をしていますが、私はそれらを見落とします。非公式のSublimeTextドキュメントが存在するのはなぜですか?まあ、一つには、公式のドキュメントは完全ではなく、はるかに少ないです。

以前に「ほぼ瞬時のナビゲーション」と言ったとき、私はそれを意味しました。たとえば、画面上の現在の場所からgetResponseHeaderajax.jsの定義にジャンプするには、MacではCommand-P、PCではCtrl-Pと入力し、ajajax.jsで一時的なビューを開きます。@grhEnterキーを押して、getResponseHeader選択したタブを開きます。SublimeTextは私のタイピングに追いつくことができます。BriefやKeditなどの最も古いDOSエディタと同じくらい応答性が高いと感じます。

を選択 getResponseHeaderすると、Macの場合はShift-Command-F、PCの場合はShift-Ctrl-Fを入力してEnterキーを押すと、コンテキスト内の関数のすべての使用法を見つけることができます。新しいタブには、各5行のスニペットでボックス化された検索語を含む検索結果が表示されます。ボックス化されたテキストをダブルクリックすると、ファイルコンテキスト全体が新しいタブに表示されます。

左側のフォルダサイドバーでファイル名をクリックすると、ファイルの内容を示す一時的なタブが表示されます。別のファイルをクリックすると、そのタブが置き換えられます。ここでも、SublimeTextは私の入力とクリックに追いつくことができます。同様に、ページの右上にある縮小サイズのナビゲーションを使用すると、スクロールのオーバーヘッドなしで、ファイル内をほぼ瞬時に移動できます。MicrosoftWordが同じように反応することを望みます。

複数の選択と列の選択により、正規表現を必要としていた種類の煩わしい編集をすばやく処理できます。単語のリストをJSON構造に変換する必要があります。この構造では、各単語が二重引用符で囲まれ、引用符で囲まれた各単語が次の単語とコンマで区切られています。リストに含まれる単語の数に関係なく、SublimeTextでは約8回のキーストロークが必要です。

Windows開発ボックスでは、2台のワイドモニターを使用しています。 MacBookでは、RetinaディスプレイとThunderboltディスプレイを使用しています。一方のディスプレイで編集し、もう一方のディスプレイでデバッグしている場合を除いて、通常、多くの異なるソースファイルとソースファイルへの異なるビューを同時に表示したいと思います。 Sublime Textは、複数のウィンドウ、分割ウィンドウ、プロジェクトごとの複数のワークスペース、複数のビュー、およびビューを含む複数のペインをサポートします。必要なときにすべての画面領域を使用し、デバッグとテスト用のスペースを確保する必要があるときに統合するのは非常に簡単です。

配色、テキストフォント、グローバルキーバインディング、タブストップ、ファイル固有のキーバインディングとスニペット、さらには構文の強調表示ルールなど、SublimeTextに関するすべてをカスタマイズできます。プリファレンスはJSONファイルとしてエンコードされます。言語固有の定義は、XML設定ファイルです。Sublime Textの周りには、SublimeTextパッケージとプラグインを作成および保守する活発なコミュニティがあります。JSLintおよびJSHintインターフェース、JsFormat、JsMinify、PrettyJSON、Gitサポートなど、Sublime Textに欠けていると最初に思った多くの機能は、パッケージインストーラーを使用してコミュニティから利用できることがわかりました。

Sublime Textの優れたパフォーマンスの理由の1つは、厳密にコーディングされていることです。もう1つの理由は、Sublime TextはIDEではなく、IDEの簿記のオーバーヘッドを必要としないことです。

開発者の観点からは、これはトリッキーなトレードオフです。「赤、緑、リファクタリング」のタイトなテスト駆動開発ループにいる場合は、コードカバレッジを編集、テスト、リファクタリング、および追跡するように設定されたIDEが最も役立ちます。一方、コードレビューや大規模な編集を行う場合は、見つけることができる最速で最も効率的なエディターが必要になります。そのエディターはSublimeTextかもしれません。

費用:無制限の無料トライアル。ビジネスライセンスまたは個人ライセンスの場合、ユーザーあたり70ドル。プラットフォーム:Windows、MacOS、およびLinux。

VisualStudioコード

Visual Studio Codeは、Microsoftの無料の軽量エディターおよびIDEです。 VisualStudioのコンポーネントがオープンソースのAtomElectronシェルと混合されており、C#を使用したASP.Net Core開発、およびTypeScriptとJavaScriptを使用したNode.js開発に優れたサポートを提供します。 Visual StudioCodeはWindowsでVisualStudioのみをサポートするというマイクロソフトの歴史的なパターンを打ち破り、MacOSとLinuxでも実行されます。以下のスクリーンショットはMacOSで撮影されたものです。

TypeScriptコンパイラとSalsaエンジンが含まれているため、Visual StudioCodeのJavaScriptコード補完は驚くほど優れています。 Visual Studio Codeは、JavaScriptコードをバックグラウンドでTypeScriptコンパイラに送信して、型を推測し、シンボルテーブルを作成します。hasOwnProperty メソッドの情報を示す画面画像の下部近くのボックスに結果が表示されます 。

同じシンボルテーブルにより、IntelliSenseは、式の入力全体でコード補完のための優れたポップアップオプションリストを提供できます。自動括弧の閉じ、自動単語補完オプション、入力後の自動メソッドリスト.、およびメソッド内の自動パラメータリストを取得します。からd.tsファイルへの参照を追加することで、IntelliSenseを拡張できます DefinitelyTyped。また、Visual Studio Code__dirnameは、Node.jsの組み込み変数であるの使用などの一般的な問題を認識したときにそれを提供 します。

Gitのサポートは非​​常に優れており、非常に簡単に使用できます。Visual Studio Codeデバッガーは、Node.js開発(およびASP.Net開発)に優れたデバッグエクスペリエンスを提供します。Visual Studio Codeには、HTML、CSS、Less、Sass、およびJSON用の非常に優れたツールがあります。これは、Internet ExplorerF12開発者ツールと同じテクノロジに基づいています。さらに、gulp やなどの外部タスクランナーとのカスタマイズ可能な統合が あり jakeます。

Visual Studio Codeは、たとえばAngularやReactをサポートするために、プラグインの堅牢なエコシステムを引き付けています。これは、JavaScriptおよびTypeScriptフレームワークとライブラリを使用してアプリを構築するためのチュートリアルを作成するときに推奨するエディターです。

費用:無料のオープンソース。プラットフォーム:Windows、MacOS、およびLinux。

ブラケット

Bracketsは、Adobeが開発した無料のオープンソースエディタであり、JavaScript、HTML、CSS、および関連するオープンWebテクノロジ向けの優れたツールを提供するために構築されています。ブラケット自体はJavaScript、HTML、およびCSSで記述されており、開発者はブラケットを使用してブラケットを作成します。組み込み機能に加えて、Bracketsには拡張機能マネージャーがあり、フロントエンド開発者が使用する多くの言語とツールで拡張機能を利用できます。ブラケットはSublimeTextやTextMateほど高速ではありませんが、Webからプログラムコンテンツをロードまたは更新するための一時停止を除いて、それでもかなり高速です。

Bracketsは、JavaScript、CSS、HTML、およびNode.jsを適切にサポートしています。また、HTML IDに関連するCSSのインライン編集(クイック編集)などの優れた機能もあります。さらに、Bracketsは、クリーンなUIと、編集中のWebページのライブプレビューを備えています。これは、無料のコードエディタにとって非常に良い選択です。

角かっこでのJavaScriptのオートコンプリートは非常に優れており、かっこ、山かっこ、角かっこが自動的に閉じられます。また、入力後のjQueryメソッドを含む、キーワード、変数、メソッドの自動ドロップダウンメニューもあります$。ブラケットは、Node.jsデバッガーを制御し、メニュー項目からNodeを再起動できます。TypeScriptとJSXのサポート、Bower統合、Git統合などの追加機能の拡張機能を簡単に追加できます。

クイック編集、クイックドキュメント、クイックオープン、ライブプレビューはすべて、Webアプリケーションの編集を合理化し、コーディングや設計に集中できるようにします。欠点として、一部のBrackets拡張機能は構成が難しい場合がありますが、EmacsパッケージやVimプラグインほど難しいものではありません。

費用:無料のオープンソース。プラットフォーム:Windows、MacOS、Linux。 

原子

Atomは、GitHubアプリと統合され、何千ものパッケージとテーマを利用できる、GitHub for Windows、MacOS、およびLinuxの無料のオープンソースのハッキング可能なプログラミングエディターです。私はいくつかのコミュニティパッケージに加えて、コアパッケージとテーマでうまくいきます。

当然のことながら、その起源を考えると、AtomソースはGitHubでホストされています。 CoffeeScriptで記述され、Node.jsと統合されています。 Atomは、Webブラウザーではなくテキストエディターとして設計されたChromiumの特殊なバリアントです。すべてのAtomウィンドウは、基本的にローカルでレンダリングされたWebページです。 AtomチームはAtomをAtomで開発します。

Atomのパフォーマンスは、それ自体が更新されていないときはかなり良好です。ファジーファインダー、プロジェクト全体の高速検索と置換、複数のカーソルと選択、複数のペイン、スニペット、コード折り畳み、TextMateの文法とテーマをインポートする機能を備えており、箱から出してすぐに使用できます。Atomは、2つのコマンドラインユーティリティをインストールできます。1つはシェルからエディターを起動するAtomで、もう1つはNode.jsのNPMの精神でAtomのパッケージを管理するAPMです。GitHubアプリケーションにはそのためのコンテキストメニュー項目が含まれているため、GitHubからクローンを作成したリポジトリを参照するときにAtomを頻繁に使用しています。

費用:無料のオープンソース。プラットフォーム:Windows、MacOS、Linux。

コモド編集

ActiveStateのKomodoIDEの無料の機能制限バージョンであるKomodoEditは、非常に優れた多言語エディターです。エディターとしてのKomodoIDEについて私が言わなければならなかったことはすべて(「レビュー:6つの最高のJavaScript IDE」を参照)、KomodoEditに当てはまります。