英語: Martin Heller 翻訳: Grape City Control

学習プロセス中に問題が発生した場合、または学習リソースを入手したい場合は、学習交換グループへの参加を歓迎します343599877、一緒にフロントエンドを学びましょう!

最近では、JavaScript プログラマーが利用できる優れたツールがたくさんあります。この記事では、JavaScript、HTML5、CSS の開発をサポートし、ドキュメント作成に Markdown を使用できる 10 個の優れたテキストエディターについて説明します。 JavaScript プログラミングに IDE ではなくエディターを使用するのはなぜですか?理由はスピードが速いからです。

エディタと IDE の本質的な違いは、IDE はコードのデバッグとプロファイリングができるだけでなく、アプリケーションライフサイクル管理 (ALM) システムもサポートしていることです。ここで説明するエディターの多くは、少なくとも 1 つのバージョン管理システム (通常は Git) をサポートしており、最近では IDE とエディターの区別が薄れてきています。

これら 10 個の JavaScript エディターの中で、Sublime Text と Visual Studio Code が上位 2 つです。 Sublime Text は高速で便利な編集機能の多さで有名です。Visual Studio Code の機能と速度は Sublime Text とほぼ同じです。 TextMate は 3 位にランクされています。TextMate は 2 年前に第 1 位にランクされましたが、その機能はまだ追いついていません。

Sublime Text、Visual Studio Code、Brackets でお気に入りの JavaScript エディターが見つかる可能性が高いですが、Atom、BBEdit、Komodo Edit、Notepad++、Emacs、Vim など、知っておく価値のあるエディターツールは他にもあります。現在のプロジェクトに基づいて最も便利な編集ツールを選択できます。

すべてのエディターについて学び、記事の最後で比較してみましょう。

Sublime Text

稲妻のように高速に実行でき、コード検査、デバッグ、展開のために他のウィンドウへの切り替えをサポートする、柔軟で強力かつ拡張可能なテキストエディターが必要な場合は、 Sublime Text の使用を検討してください。

Sublime Text には、高速であることに加えて、数多くの注目すべき利点があります。JavaScript、HTML、CSS を含む 70 以上のファイルタイプをカバーします。 ) 変更)、列の選択 (一度にファイルの長方形の領域を選択)、および単純な Python ベースのプラグイン API を使用した完全なカスタマイズ。統合された、検索可能なコマンドボード。

他のエディターを使用しているプログラマーの場合、Sublime Text は TextMate パッケージ (コマンドは含まれていません) と Vi/Vim エミュレーションをサポートしています。

Sublime Text は、高度に構成可能で拡張可能なテキストエディターです。これには JavaScript を含む 50 以上の文法が含まれており、Sublime パッケージと TextMate 文法定義を使用して拡張できます。数回のキーストロークで、Babel (React) および TypeScript (Angular) の構文とサポートをインストールできます。

Sublime Text は、複数のウィンドウと分割ウィンドウをサポートしており、各プロジェクトは複数のワークスペース、複数のビュー、およびビューを含む複数のペインを持つことができます。スペースを統合、デバッグ、テストする場合、すべての画面領域を使用することが非常に簡単になります。 Sublime Text は、色、テキストフォント、グローバルキーバインディング、タブストップ、ファイル固有のキーバインディングとスニペット、さらには構文強調表示ルールなど、すべてのカスタマイズもサポートしています。 Sublime Text のエンコードファイルのデフォルトは JSON ファイルで、言語定義のデフォルトは XML です。

Sublime Text には、Sublime Text パッケージとプラグインを作成および維持するためのアクティブなコミュニティがあります。 JSLint および JSHint インターフェイス、JsFormat、JsMinify、PrettyJSON、Git サポートなど、Sublime Text にはない多くの機能は、パッケージインストーラーを使用してコミュニティを通じて利用できます。

公式Webサイトのリンク:

Visual Studio Code

Visual Studio Codeは、Microsoftがリリースしている無料の軽量エディターおよびIDEです。 Visual Studio コンポーネントが含まれており、オープンソースの Atom Electron シェルと混合できます。 C# を使用した ASP.Net Core 開発の優れたサポートを提供し、TypeScript および JavaScript を使用した Node.js 開発も優れたサポートを提供します。 Visual Studio は Windows でのみサポートされるという慣例とは異なり、Visual Studio Code は MacOS および Linux でも実行できます。

Visual Studio Code は、TypeScript コンパイラーと Salsa エンジンが組み込まれているため、非常に優れた JavaScript コード補完を備えています。 Visual Studio Code は、JavaScript コードをバックグラウンドで TypeScript コンパイラーに送信して、型を推論し、シンボルテーブルを構築します。画面イメージの下部にあるボックスに hasOwnProperty メソッドの情報が表示されます。

同じシンボルテーブルにより、IntelliSense は式の入力プロセス全体を通じてオプションの優れたポップアップリストを提供します。次の機能が利用できます: 入力後の自動クローズ、自動入力完了オプション、入力後の自動メソッドリスト、およびメソッド内の自動パラメータリスト。 DefinitelyTyped から d.ts ファイルへの参照を追加することで、IntelliSense を強化できます。 Visual Studio Code は、Node.js 組み込み変数の __dirname の使用などの一般的な問題を特定するときに、これらの機能を提供します。

Visual Studio Code は、Node.js および ASP.Net 開発用の無料の軽量エディターおよび IDE です。 TypeScript コンパイラー、Roslyn .Net コンパイラー、Atom で使用される Electron シェルなどの Microsoft テクノロジーを組み合わせています。 Visual Studio Code は、Windows、MacOS、および Linux プラットフォームで使用できます。

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

Visual Studio Code には、Angular や React のサポートなど、強力なプラグインエコシステムがあります。 JavaScript および TypeScript のフレームワークとライブラリを使用してアプリケーションを構築する場合は、Visual Studio Code を使用することをお勧めします。

公式 Web サイトのリンク:

ダウンロードアドレス:

Brackets

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

Brackets は、JavaScript、CSS、HTML、Node.js を強力にサポートしているだけでなく、HTML ID に関連する CSS のオンライン編集など、他の優れた機能も備えています。さらに、Brackets にはシンプルな UI インターフェイスがあり、編集中に Web ページをリアルタイムでプレビューできます。無料のコードエディターとしては、Brackets が最適です。

Brackets 拡張機能も JavaScript で記述されており、Node.js モジュールを呼び出すこともできます。開いているファイルをタブに表示するほとんどのエディタとは異なり、Brackets にはファイルツリーの上に作業ファイルのリストが表示されます。

Brackets の JavaScript オートコンプリート機能は非常に優れており、jQuery メソッドで $ を入力すると、さまざまな括弧の閉じ括弧が自動的に入力され、キーワード、変数、メソッドが自動的にドロップダウンメニューに表示されます。ブラケットは Node.js デバッガーを制御し、メニュー項目から Node を再起動できます。ブラケットを使用すると、追加機能 (TypeScript と JSX のサポート、Bower 統合、Git 統合など) を備えた拡張機能を簡単に追加できます。

素早い編集、素早い文書の保存、素早いファイルの開き、およびリアルタイムのプレビューはすべて Web アプリケーションの編集を簡素化し、コーディングや設計に集中できるようにします。 Brackets にはいくつかの欠点もあります。たとえば、一部の Brackets 拡張機能は設定が難しく、Emacs パッケージや Vim プラグインほど簡単ではありません。

公式 Web サイトのリンク: http://brackets.io/

ダウンロードアドレス:

Atom

Atom 1.15.0 は、GitHub 上の無料のオープンソースコード、プログラム可能なエディターであり、Windows、MacOS、Linux プラットフォームに適しています。 GitHub アプリケーションと統合されており、多くのパッケージとテーマが利用可能です。

Atom ソースコードは GitHub にあり、CoffeeScript で書かれ、Node.js と統合されています。 Atom は、Web ブラウザではなくテキストエディタとして設計された Chromium ブラウザの特別なバージョンであり、各 Atom ウィンドウは基本的にローカルでレンダリングされた Web ページです。

Atom が自動的に更新されていないときのパフォーマンスは非常に優れています。あいまい検索、素早い項目の検索と置換、複数のカーソルと選択、複数のペイン、コードスニペット、コードの折りたたみ、TextMate の構文とテーマをインポートする機能などの優れた機能がいくつかあります。 Atom は 2 つのコマンドラインユーティリティをインストールできます。Atom はシェルからエディタを起動するために使用され、APM は Atom のパッケージを管理するために使用されます。

Komodo Edit

Komodo Edit は、ActiveState の Komodo IDE の無料の縮小バージョンで、クールな多言語エディターです。

もし Komodo IDE が好きだけどお金に余裕がないなら、Komodo Edit が良い選択になるでしょう。 Komodo Edit は IDE ではないため、エディターの外でコード制御を完了する必要があります。

リアルタイムのコード収集機能はありません。独自に開発し、他の人とコードを共有しない場合は問題ありません。また、HTTP インスペクターも提供しません。 Komodo Edit には Komodo IDE と同じ編集機能がありますが、コードのリファクタリング、デバッグ、単体テスト、ソースコード管理の統合、その他の IDE に適した機能がありません。

いずれの場合も、Komodo Edit は JavaScript 編集のニーズに無料で対応し、HTML、CSS、Python、Perl、Ruby、Tcl、その他のプログラミングを編集するためのマークアップ言語を提供します。

Notepad++

Notepad++ は、JavaScript の編集に最適な、無料のオープンソース Windows ソースコードエディターおよびメモ帳です。約 50 のプログラミング言語とマークアップ言語をサポートしています。複数のドキュメント編集ウィンドウに加えて、ワークスペースツリービュー、機能リストタブ、およびドキュメントマッピングタブがあります。ロード時間は十分に速く、パフォーマンスも十分に高いため、速度の低下を感じることはありません。

構文の色付けと折りたたみ、編集可能な機能 (列モード編集と正規表現、検索と置換のサポートを含む)、および適切な量の関数補完とパラメーターヒントを備えた Notepad++ は、JavaScript に最適なコードエディターとして簡単に使用できます。ただし、これはまだ包括的な JavaScript エディターではなく、コードを生成したり、リファクタリングなどの操作を実行したり、大規模なプロジェクト間を迅速に移動したりすることはできません。

BBEdit

BEdit 11.0.3 は Mac 用の HTML のみのテキストエディターで、約 35 のプログラミング言語とマークアップ言語をサポートしています。コミュニティエディションでは、BBEdit Web サイトを通じて他の多くの言語もサポートされています。ライセンスバージョンとコミュニティバージョンの両方に構文の強調表示があり、ライセンスバージョンには、主に関数名、変数名、および少数のキーワードとタグに対するある程度のオートコンプリート機能もあります。ライセンス版は、Git、Perforce、Subversion のバージョン管理システムとも統合されています。

BBEdit 11 は製品を大幅に書き直したもので、以前よりも高速で、Ginormous ファイルも非常にうまく処理できます。選択範囲または検索結果を新しいバッファにコピーする抽出機能と切り取り機能があります。 BBEdit は、Perl、Python、Ruby、および Shell スクリプトを編集および実行できるだけでなく、Perl および Python スクリプトの構文をチェックすることもできます。

BBEdit の HTML と Markdown のサポートは、実際には JavaScript のサポートよりも優れています。 BBEdit には 3 つのコマンドラインツールをインストールできます。1 つはエディター用、もう 1 つは差分エンジン用、そして最後の 1 つはマルチメディア検索用です。

TextMate

TextMateはMacBookでRuby on Railsを書くのに主に使われていましたが、今ではTextMateの存在感が薄れ、同時にSublime Textの人気も徐々に高まってきています。

TextMate は IDE ではありませんが、言語固有の IDE にはないパッケージ、スニペット、マクロ、スコープシステムなどの機能を提供します。 TextMate は、JavaScript および jQuery コードを迅速に生成するための優れたツールセットを提供する、シンプルな JavaScript および jQuery バンドルを提供するようになりました。 IDE のような機能については、TextMate のシェル統合バージョンを使用できますが、TextMate からのコードリファクタリング、自動化された単体テスト、または回帰テストは期待できません。 Grunt が正しく設定されている場合、TextMate は JavaScript テストを自動化できます。

TextMate にはバンドル設定タブがあり、そこから他のバンドルをダウンロードしてインストールできます。バンドルソースは実際には、GitHub リポジトリにある製品のソースコードです。

Emacs

Emacs とその派生製品は、1970 年代初頭から MIT AI Lab によって開発されました。 Emacs は TECO テキストエディターのマクロとして始まり、徐々に独立した言語に発展しました。 MacOS にインストールされるデフォルトの Emacs はバージョン 22.1.1 であり、GUI サポートはありません。 XEmacs、Aquamacs (MacOS 用 GUI)、および新しい GNU Emacs バージョンを簡単にインストールできます。 Emacs は JavaScript エディターであり、JavaScript を編集するためのデフォルトのモードは js パッケージにあります。Emacs を使用すると、構文の強調表示とリンティングが向上します。

Emacs は js2 モードパッケージを使用し、ac-js2 オートコンプリートを使用します。 Emacs では、シリアルモードを使用して、ブラウザの JavaScript、HTML、および CSS をリアルタイムで操作できます。

Vim (およびその亜種)

Vi (ビジュアルインターフェイス) は、元々は Unix 用に Bill Joy によって書かれ、1976 年以来、Ed から Ex まで徐々に進化してきました。 Vim は、Vi の改良版である無料のオープンソースで、Mac OS X にはデフォルトでインストールされます。

新しいバージョンの Vim、MacVim (MacOS 用 GUI)、またはお使いのプラットフォームで利用可能なものなら何でも簡単にインストールできます。 Vim は JavaScript エディターであり、その vim-plug readme ファイル内の提案は非常に優れています。

どのエディタを使用するかはあなた次第です

クライアントサイドの JavaScript に重点を置くか、Node.js に重点を置くかには、多くのオプションがあります。

他の多くの言語をサポートする、強力で高速な JavaScript プログラミングテキストエディターをお探しの場合は、Sublime Text をお選びください。

IDE と互換性があり、ASP.Net と C# を適切にサポートする無料の高速 JavaScript エディターが必要な場合は、Visual Studio Code が最適な選択肢です。

Brackets と Atom は、2 つの新しい無料のテキストエディターです。 Brackets は、Node.js 開発用の IDE に非常に近いエディターであり、Atom は GitHub デスクトップクライアントと高度に統合されています。

Windows では、Notepad++ は高速、効果的、そして無料です。 MacOS では、BBEdit はバージョン管理統合のための高速でクールな無料の限定版 HTML ツールです。 TextMate は依然として高速でフル機能があり、拡張可能な優れたエディターですが、開発は遅れています。

オープンソースのスクリプト言語を使用したい場合は、Komodo Edit が良い選択です。カスタムエディターが好きなら、Emacs または Vim が要件を満たすことができます。

以上がいくつかの便利な JavaScript エディターをまとめますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。