JavaRush /Java Blog /Random-JA /フロントエンド開発者に最適な IDE とテキスト エディター

フロントエンド開発者に最適な IDE とテキスト エディター

Random-JA グループに公開済み
十数年か 2 年前、Web サイトは手作業と通常のテキスト エディターを使用して作成されていました。独自の HTML タグを記述し、CSS のインライン スタイルを使用したちょっとした魔法を使い、面白いアニメーションで味付けすれば、サイトはすぐに使用できます。 フロントエンド開発者に最適な IDE とテキスト エディタ - 1現在、Web サイトやアプリケーションの作成と開発は構造化されたプロセスです。Web サイト ビルダーを使用すると、1 分で Web サイトを作成できますが、数か月間悩んで作成することもできます。Web 開発の変化に伴い、コーディングを効率化するための新しいフレームワーク、プラグイン、アプリケーションが登場しています。追加ツールにより作業環境が簡素化され、生産性が向上します。私たちは共同オープンソース プロジェクト管理のためのバージョン管理システムと jQuery などのライブラリを使用しています。開発環境はウェブサイトを作成するプロセスにおいて非常に重要な役割を果たします。理想的なワード プロセッサを選択することは、経験的研究の適用を必要とする難しい作業ですが、実行可能な作業です。このツール、アプリケーション、プラグインの海の中で迷子にならないようにするにはどうすればよいでしょうか? 日常の仕事にはどのテキスト エディタを選択すべきでしょうか。また、ペットのプロジェクトにはどのテキスト エディタを選択すればよいでしょうか? 初心者のフロントエンド開発者向けに、最も人気のあるツールの短いリストをまとめました。記事内であなたのお気に入りのエディターについて言及するのを忘れていませんか? コメントを残してください!

メモ帳++

リリース: 2003 年 11 月 24 日。構文の強調表示とタブを備えた最もシンプルなテキスト エディター。多くのプログラミング言語とテクノロジーをサポートします。Web 開発の滑りやすい坂道を踏み出したばかりの初心者に最適です。
フロントエンド開発者に最適な IDE とテキスト エディタ - 2
可能性:
  • ブックマークを作成する。
  • 作成されたファイルの自動コピーと保存。
  • 標準テキストエンコーディングのサポートと変換。
  • ユーザーは構文強調表示のルールを個別に設定できます。
  • さまざまな便利なプラグインのインストール。
  • ホットキーの設定と再定義。
  • スペルチェックとテキスト暗号化。
  • テトリスをプレイする (コーディングに飽きた場合に備えて)。
  • 大量のデータを管理できます。
このエディターの追加の「機能」は、闇の父であるダース・ベイダーと「ヘイトフォルダー」の父であるビル・ゲイツからの引用を表示するという形の「イースターエッグ」であると考えられています。
フロントエンド開発者に最適な IDE とテキスト エディタ - 3
軟膏の中のハエ:今日の開発標準を満たさない、過度に単純化されたインターフェイス。日中の懐中電灯の光にたとえられます。 構文ハイライト: + 自動タグ検出: + OS 互換性: Windows、ReactOS。 無料版:はい。 リンク: https://notepad-plus-plus.org/download/v7.5.1.html

ブラケット

リリース: 2014 年 11 月 4 日。Adobe は、フロントエンド開発者やデザイナーに愛される優れた製品を多数提供しています。そしてBracketsもその1つです。この無料のオープンソースのクロスプラットフォーム エディターは JavaScript、HTML5、CSS3 に基づいているため、特にこれらに重点を置いています。JavaScript の基本を理解している場合は、このエディターを使用して作業を開始する必要があります。なぜなら、拡張に必要なすべてのツールを提供するのは彼だからです。エディターにはいくつかの改善が必要ですが、全体的には非常に活発に開発されており、開発者の間で人気があります。さらに、各ユーザーは独自の変更を加えたり、追加の拡張機能を作成したりできます。
フロントエンド開発者に最適な IDE とテキスト エディタ - 4
可能性:
  • JS、CSS、および HTML ファイルを編集するためのヒント。
  • ブラウザーでのコードのリアルタイム表示のサポート (ライブ プレビュー)。
  • FTPサーバーとの同期。
  • CSS の自動コンパイルをサポートし、より少ないファイルにまとめます。
  • テキストを操作するときに使用できるフォントの選択 (追加の可能性あり) を提供します。
  • バージョン管理システム – Git を使用します。
2017 年の新バージョンでは、履歴の検索、さまざまなエンコーディングでのファイルの送受信、ホットキーを使用した編集履歴の移動、拡張機能の有効化と無効化、および Linux のネイティブ メニューの機能が導入されました。
フロントエンド開発者に最適な IDE とテキスト エディタ - 5
構文ハイライト: + 自動タグ検出: + OS 互換性: macOS、Windows、Linux。 無料版:はい。 リンク: http://brackets.io

荘厳な

リリース: 2008 年 1 月 18 日。クロスプラットフォームのコード エディターおよび統合開発環境 (IDE)。私たちはこのエディターの速度と使いやすさを気に入っていましたが、CodaTextMate は道に外れ、非常に不便なアップデートで主要なユーザー ベースを失望させました。
フロントエンド開発者に最適な IDE とテキスト エディタ - 6
可能性:
  • ファイル、シンボル、コードの特定のセクション間の高速ナビゲーション (これが多くのユーザーに愛される理由です)。
  • 構文チェック機能は、文字を入力するとすぐに機能します。
  • マクロを使用した最近のアクションの最適化と繰り返し。
  • コードの自動保存により、紛失を防ぎます。
  • さまざまなビジュアルテーマとプログラミング言語のサポート。
  • 頻繁に使用されるキーワードとコードの断片を保存します。
  • Python の既製のプラグインのセット。
フロントエンド開発者に最適な IDE とテキスト エディタ - 7
構文ハイライト: + 自動タグ検出: + OS 互換性: Windows、Mac OS、GNU/Linux。 無料版:はい (機能制限なし)、ただしアプリケーションを確認した後、ライセンスを購入する必要があります。 リンク: http://www.sublimetext.com/3

ウェブストーム

リリース: 2015. これは通常のテキスト エディターではなく、JavaScript、CSS、HTML の統合開発環境でもあります。その作者は JetBrains で、JavaRush の学生に愛されている IntelliJ IDEA 環境を作成したのと同じ会社です。WebStorm は、最もスマートで最も人気のあるエディターの 1 つです。主要なフレームワーク: AngularJS、React、Meteor をサポートし、Node.js でアプリケーションを作成するために使用されます。WebStorm は非常に複雑な環境ですが、同時に多くの拡張機能や機能を必要とする人にとっては最適です。
フロントエンド開発者に最適な IDE とテキスト エディタ - 8
可能性:
  • バージョン管理システム Git、GitHub、Mercurial との統合により、さまざまなサイズのプロジェクトを効果的に処理できます。これにより、IDE 内でファイルを「コミット」し、変更を確認し、競合を解決することができます。
  • LiveEdit - ページをリロードせずに予備的な変更を表示します (Google Chrome ブラウザで動作します)。
  • 編集中のコード分析。
  • Javascript および Node.js アプリケーションのコードのリファクタリングとデバッグ。
  • ECMAScript、TypeScript、CoffeeScript、および Dart 言語のサポート。
  • Node.js Express テンプレートを使用してアプリケーションを作成する。
  • Mocha、Karma、Protractor などのフレームワークを使用した起動とデバッグ。エディタ自体でテストすることも、テキストにすぐに戻ることができる便利なツリー メニューでテストすることもできます。
  • LESS、Sass、SCSS、Stylus プリプロセッサは完全にサポートされています。
  • ターミナルウィンドウでのクイック検索。
  • 複数の Javascript ライブラリを含むプロジェクトを構築する。
  • JQuery、YUI、プロトタイプ、DoJo、MooTools、Qooxdoo、Bindows のサポート。
  • 初期サポートと Angular 2 での作業。
「フロントエンド開発者」に最適な IDE とテキスト エディタ - 9
構文ハイライト: + 自動タグ検出: + OS 互換性: Windows、Mac OS、GNU/Linux。 無料版: 30 日間の試用版があり、その後ライセンスを購入する必要があります。 リンク: http://www.jetbrains.com/webstorm/

原子

リリース: 2014 年 2 月 26 日。誰もが大好きなGithubの作者によって作成された無料のオープン ソース ソフトウェア。これは 50 のモジュールで構築されており、Node JS、CoffeeScript、CSS、HTML、および C++ で書かれています。独自のモジュールを開発し、オープンアクセスのためにリポジトリに投稿することもできます。この開発環境は非常に使いやすく、追加のプラグインを使用すると、開発環境での作業の可能性が広がります。
フロントエンド開発者向けのトップ 10 IDE およびテキスト エディター
可能性:
  • json ファイルの代わりに GUI を構成に使用します。
  • コードとそのフラグメントのミニマップを表示します。
  • プロジェクトとファイルによる素早い検索。
  • 便利なサイドバーとファイルツリー。
  • Github で入手できる膨大な数の拡張パッケージ。
  • Emmet、Autoprefixer、Livereload のサポート。
  • サイドバーツリーを通じてファイルを表示する。
  • 個々のユーザーの好みに合わせてエディターをカスタマイズする機能。
  • 組み込みのファイルマネージャーの存在。
  • プラグインを含む制御パッケージをインストールする必要はなく、グラフィカル ユーザー インターフェイスを使用するだけで十分です。
  • Node.js で書かれたプラグインのサポート。
  • PNG、JPEG 画像をエディターで直接プレビューします。
  • Git バージョン管理システムとの連携を提供します。
「フロントエンド開発者」に最適な IDE とテキスト エディタ - 11
問題は、大量のメモリを必要とし、大きなデータ ファイルを処理できないことかもしれません。 構文ハイライト: + 自動タグ検出: + OS 互換性: Windows 7、8、Mac OS 10.8、Linux。 無料版:はい。 リンク: https://atom.io

ヴィム

リリース: 1991 年 11 月 2 日。古い Vim はこの現代のエディターのリストの中で何を忘れていたのかと疑問に思うかもしれません。実際、Vim は完全に最新の強力なテキスト エディタであり、UNIX オペレーティング システムで利用できる古い vi をベースに作成されています。そしてそれは常に進化し続けています。開発者はほぼ毎年変更を加え、新しいプラグインやアドオンを追加します。前回このようなことが起こったのは 2016 年で、拡張機能の数と速度は本当に驚くべきものであり、チェックする価値があります。Vim はマルチモードエディターです。コマンド、挿入、またはビジュアルなど、複数の作業を同時に行うことができます。ただし、初心者の開発者にとっては非常に複雑であることを考慮する価値があります。長年の経験を持つ専門家でも、その機能の多くは認識されていません。
「フロントエンド開発者」に最適な IDE とテキスト エディタ - 12
可能性:
  • 標準のテキストエンコーディングのサポート。
  • 複数のファイルを同時に操作できます。
  • ファイルの自動認識と変換。
  • プログラミング言語 Perl、Tcl、Python、Ruby との互換性。
  • 各ユーザーのニーズに合わせて快適な設定を作成します。
  • マクロの記録と実装。
  • ビジュアル モードでは、多くの便利な機能 (テキストのブロックの強調表示など) を実行できます。
  • 右から左に書かれる非標準言語 (アラビア語やヘブライ語など) のサポート。
  • 検索ワードやコマンド履歴などの便利な設定。
  • マウスなしでキーボードを完全に使用できるようにします。
  • 大きなファイルを扱うときに驚くべきパフォーマンスを発揮します。
「フロントエンド開発者」に最適な IDE とテキスト エディタ - 13
構文ハイライト: + 自動タグ検出: + OS 互換性: Windows、DOS、Linux、BSD、Mac OS、iOS、Android、AmigaOS、Atari MiNT、BeOS、NextStep、OS/2、OSF、RISC OS、SGI、VMS。 無料版:はい。 リンク: https://vim.sourceforge.io/download.php

ネットビーンズ

リリース: 1997。Oracle が後援し、熱心な開発者によってサポートされている無料のオープンソース IDE。利便性と速度の向上のために、さまざまな拡張機能が常に開発および追加されています。 可能性:
  • ウィンドウとストレージの管理。
  • インターフェイスとデザインの変更 (メニューとポップアップを含む)。
  • リモートサーバーとの接続をセットアップする。
  • コードのリファクタリングが利用可能。
  • アドオン、テンプレート、コードジェネレーターがあります。
  • 多くのプログラミング言語をサポートします。
  • 自動構文チェックと修正。
  • ユーザーのニーズに合わせてエディタをカスタマイズする。
  • JavaScript および Node.JS アプリケーションの起動とデバッグ。
  • PHP フレームワーク (Symfony、Zend、Yii) のサポート。
軟膏で飛ぶ:大量のメモリを消費します。 構文ハイライト: + 自動タグ検出: + OS 互換性: Microsoft Windows、Linux、FreeBSD、Mac OS X、OpenSolaris、Solaris。 無料版:はい。それだけは無料です。 リンク: https://netbeans.org

ハードコアボーナス: メモ帳、別名「メモ帳」

リリース: 1985 年、Windows 1.0 とともに。はい、はい、すべての Windows コンピュータにデフォルトでインストールされているのと同じメモ帳です。「この古代はここで何を忘れたのでしょうか?これは開発と一体何の関係があるのですか?」とあなたは尋ねます。実際、今日、古典的なメモ帳で何か本格的なものを作成する人はいない可能性が高いことを私たちは理解しています。ただし、多くの初心者開発者が過去 15 ~ 20 年かけて最初の Web サイトを「まとめ」、最初のプログラムを作成したのはこのプログラムです。
「フロントエンド開発者」に最適な IDE とテキスト エディタ - 14
私たちが言いたいのは、学びたいのであれば、何も止めるべきではないということです。本物の開発者 (そしてこれから開発者になりたい人) にとって、メモ帳は障害ではありません。 特徴:黒文字のみ、ハードコアのみ。
フロントエンド開発者向けの最高の IDE とテキスト エディタ - 15
これが最初のメモ帳の外観です
軟膏の中にハエがいる:軟膏の中にハエがいない: 「メモ帳」はそのミニマリズムにおいて完璧です。 構文の強調表示:いいえ。記憶力を鍛えましょう! 自動タグ検出:すごい! 無料版:メモ帳は Windows と同じくらい無料です。
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION