現在のフロントエンド エディタを見てみましょう

何人かの学生がリモートでコードを変更するのを手伝ったとき、皆が使用しているエディターがさまざまであることがわかりました。VSCode、WebStorm、さらには Sublime...

これを思い出さずにはいられません: [私は初めて学んだフロントエンドに関しては、エディターでさまざまなオプションを実際に試してみました。]

これまでのところ、私は「熱心なファン」として VSCode を使用することに慣れており、他のエディターの存在を「忘れていました」。これは一種の「焦点」と考えることができます。ただし、これは私たちの選択肢を制限するものでもあります。

それでは、今日は現在のフロントエンド エディターを見てみましょう。結局のところ、「百派の考え方が衝突」して、さらなるインスピレーションが生まれます。

notepad++

利点:

1. 無料でオープンソース: Notepad++ は無料でソフトウェアを入手でき、ソースコードを自由に変更できます。
2. 軽量: Notepad++ は、非常に高速に起動し、使用するメモリが少ない軽量のテキスト エディターで、単純なテキスト編集タスクに非常に適しています。
3. 構文の強調表示: Notepad++ は多くのプログラミング言語の構文の強調表示をサポートしており、プログラミングをより快適にします。ただし、一部の言語、特にフロントエンドの基本コンテンツのみをハイライト表示できます。jQuery を含む vue および React のハイライト効果はあまり良くありません。豊富なプラグイン: Notepad++ は多くのプラグインをサポートしており、ユーザーの利便性を高めることができます。開発と編集が簡単に行えます。
4. 短所:

機能は比較的シンプルです: Notepad++ はテキストエディターであり、単純なテキスト編集には非常に使いやすく、単純なコード編集にも使いやすいですが、その機能はプロフェッショナルな統合開発環境 (IDE) と比較されます。比較的シンプルで、一部のプラグイン、一部の特殊なコード セグメント、一部のエラー修正、コード検証などの高度な機能が欠けています。

1. デバッグをサポートしていません: Notepad++ はコード デバッグ機能をサポートしていません。コードをデバッグする必要があるため、不便かもしれません。フロントエンド開発を行っている場合は、ブラウザーでデバッグすることが多いため、欠点は明らかではありませんが、ローカルまたはリアルタイムのデバッグが必要な他の言語では、欠点がより明らかになる可能性があります
2. 。大規模なプロジェクトの場合: Notepad++ の機能は比較的単純であるため、現時点では、ユーザーはより専門的な開発ツールを使用する必要があります。
3. Windows プラットフォームでのみ実行可能: Notepad++ は Windows プラットフォームでのみ実行でき、他のオペレーティング システムでは使用できません。
4. webstorm

利点:

高度な統合: WebStorm は、コードエディター、デバッガー、バージョン管理、テストツールなどを含む、Web 開発に必要な多くのツールと機能を統合します。インストール後は、これらのツールが提供する機能と利便性を直接利用でき、Web 開発プロセス全体を簡単に完了できます。

1. 複数のテクノロジーをサポート: WebStorm は、HTML、CSS、JavaScript、React、Angular、Vue.js、Node.js などの複数のフロントエンドおよびバックエンド テクノロジーをサポートしており、sass などのコンパイルも含まれています。 、ts およびその他のファイルはソフトウェアに直接組み込まれており、1 回のインストールで開発者のさまざまなニーズを満たすことができます。
2. スマート コード プロンプトとオートコンプリート: WebStorm のスマート コード プロンプトとオートコンプリート機能は、開発者がキーストロークの数を減らし、開発効率を向上させるのに役立ちます。
3. 強力なデバッグ機能: WebStorm のデバッグ機能は非常に強力なので、フロントエンドとバックエンドのコードをデバッグし、コード内のエラーや問題を見つけることが簡単になります。
4. 豊富なプラグイン ライブラリ: 多数の組み込みツールと機能に加えて、WebStorm には独自のエコシステム内から選択できる多数のプラグインもあり、機能を簡単に拡張できます。
5. 短所:

価格が高い: WebStormはソフトエディターではなく商用ソフトウェアであり、使用するには料金を支払う必要があります(正規版をサポート)、価格は比較的高く、個人の開発者にとっては少し高価かもしれません

1. 急な学習曲線: WebStorm には非常に豊富な機能があるため、学習曲線が急峻で、特に組み込みの高度な機能の一部については、学習と使用に一定の時間とエネルギーがかかります。勉強するのに多くの時間とエネルギーがかかります
2. リソースを消費します 詳細: WebStorm はより多くのリソースを消費し、コンピュータが比較的適切に設定されている必要があります。そうしないとスムーズに動作しません
3. WebStorm は IDE です。 Web 開発に特化したツールなので、他の種類の開発には適していない可能性があります。これが JetBrains の特徴です。たとえば、開発をサポートするために、対応する PHPStorm が用意されています。
4. sublime

利点:

軽量: Sublime Text は非常に高速に起動し、メモリの使用量が少なく、単純なテキスト編集タスクに非常に適しています。コンピューターの構成に高度な要件はありません。

1. 豊富な機能: Sublime Text には、コードの強調表示、自動補完、マクロの記録、複数行の編集、Goto などの非常に豊富な機能があります。開発者が作業をより効率的に完了するのに役立つものは何でもあります。
2. 豊富なプラグイン: Sublime Text は、ユーザーがより便利に開発および編集できるようにする多くのプラグインをサポートしています。
3. クロスプラットフォームのサポート: Sublime Text は Windows、macOS、Linux などの複数のプラットフォームで実行できるため、マルチプラットフォーム ユーザーにとって非常に便利です。
4. 高度なカスタマイズ性: Sublime Text を使用すると、ユーザーは個人の使用習慣に合わせて、設定、配色、プラグインをカスタマイズできます。

短所:

1. 有料ソフトウェア: Sublime Text は試用期間がありますが、試用期間後も料金を支払う必要があります。
2. プラグインの品質はさまざまです: Sublime Text は多くのプラグインをサポートしています。ただし、これらのプラグインの品質はさまざまで、一部のプラグインにはセキュリティ上の問題があるか、不安定である可能性があります。
3. 自動更新はサポートされていません: Sublime Text は他のソフトウェアとは異なり、自動的に更新されません。一部の更新情報に注意し、手動でインストール パッケージをダウンロードして再インストールする必要があります。
4. コミュニティサポートの欠如: 一部のオープンソースエディタと比較して、Sublime Text のコミュニティサポートはあまり完全ではなく、コミュニティによって提供される一部の周辺コンテンツも不均一です
5. 開発速度が遅い: Sublime Text の開発速度は比較的遅いです。一部の新機能やアップデートは、公開までにさらに時間がかかる場合があります。

VSCode (Visual Studio Code)

利点:

1. 軽量: VS Code は迅速に起動し、使用するメモリが少なく、一部の重量のある IDE ツールよりも軽量です。
2. 豊富な機能: VS Code は、コードのハイライト表示、オートコンプリート、デバッガー、Git サポート、多言語サポートなどを含む機能が非常に豊富です。
3. 豊富なプラグイン: VS Code には、エディターの機能を拡張するために必要なプラグインを自分のニーズに合わせて選択できます。
4. クロスプラットフォームのサポート: VS Code は Windows、macOS、Linux などの複数のプラットフォームで実行できるため、マルチプラットフォーム ユーザーにとって非常に便利です。
5. 強力なコミュニティ サポート: VS Code には強力な開発コミュニティ サポートがあり、ユーザーはそこでヘルプを得たり、経験を共有したり、問題について話し合ったりできます。

短所:

1. 起動速度が遅い: 一部の軽量エディターと比較すると、vscode はツール機能プラグインがいくつか組み込まれているため、起動が比較的遅く、サイズが若干大きいためです。
2. リソース使用量が多い: 比較的比較いくつかの軽量エディターを使用すると、VS Code は多くのリソースを消費しますが、コンピューター構成にいくつかの小さな要件がありますが、それほど大きくはなく、許容範囲内です。
3. 一部のプラグインは品質が低いですが。には豊富なプラグイン ライブラリがありますが、一部のプラグインは品質が低く、セキュリティ上の問題や不安定性がある可能性があります。
4. 設定が複雑: VS Code の一部の高度な設定では、ユーザーが自分で設定する必要があり、初心者ユーザーが学習するのに時間がかかる場合があります。

HBuilder

利点:

1. 複数のツールの統合: HBuilder は、コード エディター、デバッガー、コード スニペット ライブラリ、ビルド ツールなど、一般的に使用される複数のフロントエンド開発ツールを統合します。ユーザーは 1 つのインターフェイスで完了できます。タスクにより開発効率が向上します。
2. 強力なフロントエンド フレームワークのサポート: HBuilder は、Vue.js、React、Angular などの複数の一般的なフロントエンド フレームワークをサポートしており、開発者がより便利に開発できるようにします。
3. マルチプラットフォーム開発のサポート: HBuilder は、iOS、Android、Web、WeChat アプレットなどのマルチプラットフォーム開発をサポートし、開発者がマルチプラットフォーム アプリケーションをより簡単に開発およびテストできるようにします。
4. 強力な拡張性: HBuilder はプラグイン拡張機能をサポートしており、ユーザーは必要に応じてプラグインをインストールおよびアンインストールして、エディターの機能をカスタマイズできます。
5. 無料でオープンソース: HBuilder も無料でオープンソース ソフトウェアであり、直接インストールして使用できます。

短所:

1. 比較的複雑: いくつかの単純なエディタと比較して、HBuilder のインターフェイスと操作は比較的複雑であり、ユーザーが慣れて学習するのに一定の時間を費やす必要があります。
2. 高いリソース使用率: HBuilder は比較的重いエディターであり、多くのリソースを消費するため、スムーズに実行するにはパフォーマンスの高いコンピューターが必要です。
3. プラグインの品質はさまざまです: HBuilder のプラグイン ライブラリは比較的豊富ですが、一部のプラグインには品質にばらつきがあり、セキュリティ上の問題や不安定性がある可能性があります。
4. 一部の機能が不安定です: HBuilder の一部の機能が不安定で、ユーザーが使用する際に問題が発生する可能性があります。
5. さらなる宣伝: HBuilder は宣伝が多く、一部のユーザーは活発すぎると感じる可能性があり、シンプルさと純粋さを追求するユーザーには適していない可能性があります。

atom

利点:

1. 無料でオープンソース: Atomは、重量級のエディタですが、無料のソフトウェアであり、
2. 豊富なプラグインを使用できます。 : Atom はプラグイン拡張機能をサポートしており、ユーザーは必要に応じてプラグインをインストールおよびアンインストールしてエディターの機能をカスタマイズできます。また、多数のプラグインが存在します。
3. アクティブなコミュニティ: Atom には、ユーザーがヘルプやサポートを受けられるだけでなく、他の開発者の経験を共有して学ぶことができるアクティブなコミュニティがあります。
4. クロスプラットフォームのサポート: Atom は Windows、macOS、Linux などの複数のプラットフォームで実行できるため、ユーザーはさまざまなオペレーティング システムで開発するのが便利です。
5. 高度なカスタマイズ: Atom は設定ファイルとスタイル シートを通じてカスタマイズでき、ユーザーは自分の好みに応じてエディターの外観と機能を設定できます。私は個人的に Atom のネイティブ ダーク シリーズ テーマがとても気に入っており、どれも私によく合っています。 .

短所:

1. リソース使用量が多い:Atom は比較的重いコードエディタであるため、多くのリソースを消費する必要があり、コンピューターの構成要件が高くなる可能性があります
2. 起動速度が遅い:Atom の起動速度は比較的遅いため、ユーザー エクスペリエンスに影響を与える可能性があります。
3. カスタマイズによる不安定性: Atom は非常にカスタマイズ可能ですが、これにより特定の不安定性も生じ、一部のユーザーは問題に遭遇する可能性があります。
4. 複雑なメニューとオプション: Atom のメニューとオプションは複雑なため、ユーザーが混乱する場合があり、慣れて使いこなすにはある程度の時間が必要です。
5. プラグインの品質はさまざまです: Atom のプラグイン ライブラリは量が豊富ですが、一部のプラグインには品質にばらつきがあり、セキュリティ上の問題や不安定性がある可能性があります。

DW(dreamweaver)

利点:

1. ビジュアルデザイン: Dreamweaver は、ドラッグ、選択、編集などの操作により、Web ページをすばやく作成およびデザインできます。
2. 複数のプログラミング言語のサポート: Dreamweaver は、HTML、CSS、JavaScript、PHP などの複数のプログラミング言語をサポートしているため、ユーザーは Web ページを簡単に開発できます。
3. 優れた統合: Dreamweaver は、Photoshop、Illustrator などの他の Adob​​e ソフトウェアと良好に統合しており、画像、アイコン、その他のマテリアルを簡単にインポートして編集できます。
4. 豊富な機能: Dreamweaver は、コードプロンプト、コードの折りたたみ、コードの強調表示、コードの自動補完など、ユーザーの作業効率を向上させる多くの機能を提供します。
5. テンプレートとライブラリのサポート: Dreamweaver はテンプレートとライブラリのサポートを提供し、ユーザーはテンプレートとライブラリをすばやく作成して使用し、Web 開発をスピードアップできます。

短所:

1. 価格が高い:DreamweaverはAdobeの製品なのでお金がかかり、価格も安くありません(正規版に対応)
2. 学習コストが高い:Dreamweaverの機能。比較的豊富な内容があり、初心者が学習して使いこなすにはある程度の時間がかかる場合があり、学習コストも比較的高くなります。
3. 高いリソース使用量: Dreamweaver は比較的重いソフトウェアであり、多くのリソースを消費するため、スムーズに実行するにはパフォーマンスの高いコンピューターが必要です。
4. 不完全なコード生成: Dreamweaver はビジュアル デザインをサポートしていますが、生成されるコードには問題が発生する可能性があり、手動での調整と最適化が必要です。
5. 柔軟性が十分ではありません: Dreamweaver のビジュアル デザインはユーザーの創造性と想像力を制限する可能性があり、柔軟性や自由度が十分ではありません。