[コンパイルと共有] VSCode での Flutter 開発に最適な拡張機能 10 選

この記事では、Flutter 開発に最適な 10 の VSCode 拡張機能を紹介します。お役に立てば幸いです。

1.Pubspec Assist

pub.dev で必要な Flutter および Dart パッケージを探すことにうんざりしていませんか? Pubspec Assist 拡張機能にチャンスを与えてください。この拡張機能を使用すると、エディターを終了せずにパッケージを検索し、それらを pubspec.yaml ドキュメントに追加できます。さらに、タイトルをカンマで区切ることにより、多数のパッケージを同時に検索できます。

2.エラー レンズ

開発中にエラーや警告が発生するのは正常ですが、それらを処理するために使用する方法は独特です。 VS Code エディターでは、通常、エラーと警告が下部に表示されるため、リストをスクロールして他に問題があるかどうかを確認する必要があります。 [推奨学習: vscode チュートリアル、プログラミング教育]

Error Lens 拡張機能は、コード内のエラー行を強調表示し、エラー行を強調表示します。行の終わり エラーの詳細が添付されました。トレンチ内にはエラーアイコンも表示されます。

さらに、settings.json ファイルでエラーの強調表示の色をカスタマイズできます。こうすることで、あなたの間違いがより魅力的に見えるようになります。

3.Flutter ツリー

多数のウィジェットを含むアプリケーションを構築する場合、ツリー内のウィジェットを識別するのが難しい場合があります。 Flutter TreeExtension は、簡略化された構文で目的のウィジェット ツリーを作成します。これにより、ウィジェット ツリーの作成が簡単になりますが、次に示すように、独自の構文を使用して作成する必要があります。

4.ブラケット ペア カラーライザー 2

私たちは、入れ子になったクラスやウィジェットの迷路に迷い込み、見つけるのに多くの時間とエネルギーを浪費することがよくあります。正しい括弧のペア。 ブラケット ペア カラーライザー 2 は、間違ったブラケットの位置を決めるときの救世主です。

ブラケットのペアの色をカスタマイズすることもできます。

5.Dart データ クラス ジェネレーター

通常、クラス内の必須メソッドの作成は無視されます。 VS Code には、不足しているメソッドを追加できるユーティリティがありますが、一度に追加できるのは 1 つだけです。 Dart データ クラス ジェネレーター この問題は、クラス属性または生の JSON に基づいてコンストラクター、copyWith、toMap、fromMap、toJson、fromJson、toString、operator ==、および hashCode メソッドを使用して Dart データ クラスを構築することで、この問題を解決します。名前が示唆しています。

この拡張機能は、インポートをアルファベット順に並べ替えて、適切な形式に変換します。

6.Flutter Stylizer

構造が不十分な複雑なコードベースを管理すると、エンジニアの効率が低下します。 Flutter Stylizer この拡張機能は、一貫性のある積極的な方法でメソッドを編成することで、この問題を解決します。

このツールは、次の方法でファイル内のクラスを編成します。

コンストラクター -- 名前付きコンストラクター -- パブリック静的変数 -- パブリック インスタンス変数 -- パブリック オーバーレイ変数 -- プライベート静的変数-- プライベート インスタンス変数 -- パブリック オーバーライド メソッド -- その他のパブリック メソッド -- ビルド メソッド。

Flutter 自体はフォーマット オプションを提供しますが、Dart ファイルをフォーマットするだけであり、コードの順序を変更することはありません。 Flutter は、これらの書式設定ルールに従ってコードを書式設定します。

7.より良いコメント

すべてのコメントが同じ形式であれば、重要性に応じて作業を整理することができず、重要なタスクを見落とす危険があります。 より良いコメント この拡張機能を使用すると、カラフルなコメントを作成して読みやすくなります。これにより、コードのコメントを追跡しやすくなります。

あなたがしなければならないのは、*、 を使用することだけです。コメントを 、?、または TODO で始めると、指定された方法で色付けされます。 settings.json ファイルを使用して独自の注釈スタイルを作成することもできます。

8.カラー ハイライト

プログラムを構築するとき、さまざまな色の選択を管理しますが、コード エディターでプログラムしている色を前提としています。見えますか？プログラムを起動せずにプログラムの色を表示できれば非常に便利です。 カラーハイライトプラグインは、コードで指定された色を様式化された色で表示できます。

9.Markdownlint

Flutter プロジェクトには、README.md または CHANGELOG.md ドキュメントの問題が検出されることを確認するバリデーターがありません。これを解決するために、Markdownlint プラグインは、Markdown ファイルの標準と均一性を促進する一連のガイドラインを提供します。この拡張機能を使用すると、ローカルの問題をチェックし、ライブ公開する前にコンテンツを検証できます。

この画像では、複数の連続する空白行、ヘッダー レベルを 1 つ増やす必要がある、リストを空白行で囲む必要があるなど、いくつかのエラーが確認できます。これに関連して、プレビュー ボタンを使用すると、VS Code で Markdown ファイルをプレビューできることを思い出していただきたいと思います。

10.JSON から Dart モデルへの変換

大量の JSON ファイルを扱う場合、ファイルごとに Dart モデルを構築するのは手間がかかります。 JSON から Dart モデルへ指定された JSON 文字列の Dart クラスを作成します。 JSON キーに r@ または d@ を追加することで、JSON 値を必須またはデフォルトにすることができます。JSON to Dart Model によって Dart モデルが生成されます。

下の画像では、JSON ファイルが左側に示され、必要なクラスとプロパティが右側に示されています。これらは、JSON to Dart Model 拡張機能を使用して JSON ファイルから生成されます。

VSCode の詳細については、vscode 基本チュートリアル をご覧ください。

以上が[コンパイルと共有] VSCode での Flutter 開発に最適な拡張機能 10 選の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。