ホームページ > ウェブフロントエンド > jsチュートリアル > ウェブストームと角度のトップ12の生産性のヒント:パート2

ウェブストームと角度のトップ12の生産性のヒント:パート2

Joseph Gordon-Levitt
リリース: 2025-02-15 11:49:13
オリジナル
254 人が閲覧しました

この記事では、2つの部分で提示された角度開発者向けの12の生産性を高めるウェブストーム機能について説明します。 これは2番目の部分であり、Google開発者の専門家であるJurgen Van De MoereとTodd Mottoが共有する7つの重要な機能に焦点を当てています。 (パート1が利用可能です[利用可能な場合はパート1へのリンク])。

Top 12 Productivity Tips for WebStorm and Angular: Part 2

キーテイクアウト:

    インポートの合理化:
  • 自動インポートステートメントの生成のためのWebStormのインポートパス計算、エラーの最小化、時間の節約。 プロジェクトのニーズに合わせて、インポート設定(例:パス、バレルファイル、バレルファイル、バレルファイル)をカスタマイズします。 tsconfig.json迅速なコードの足場:
  • ライブテンプレートを利用して、再利用可能なコードスニペットを作成し、開発を加速し、繰り返しコーディングを減らす。
  • 統合テスト:さまざまなJavaScriptテスト(Karma、分度器)をWebstorm内で直接実行し、テストプロセスを簡素化します。
  • 強化されたコードの読みやすさ:タイプスクリプトパラメーターのヒント、迅速なナビゲーションのためのパン粉、およびウェブストーム経由の角度ドキュメントへの直接アクセスでコード理解を改善します。
  • WebstormおよびAngular Tip 6:楽な輸入管理
  • WebStormはインポートパスをインテリジェントに管理し、通常はファイル(Angular CLIのデフォルト)に対してそれらを解決します。 インポートを手動で入力する代わりに、単にコンストラクトを使用します。 WebStormは、オートコンプリートを介してインポートするか、オプションENTER(またはWindows/LinuxにAlt Enter)を使用してインポートすることを提案します。 新しいインポートステートメントを追加するか、同じライブラリから既存のステートメントに追加します。

高度なインポートオプションにより、

またはnode.jsモジュール解像度(バレルファイルに最適)を使用すると、パスの計算が可能になります。また、より細かい制御のために自動インポートから除外するモジュールを指定することもできます。

WebstormおよびAngular Tip 7:効率のためのライブテンプレート

Import Path Calculation GIF

繰り返されるコードパターンは、ライブテンプレートで簡単に対処できます。 WebStormは、事前に定義されたテンプレートを提供します。これは、新しいテンプレートをカスタマイズまたは作成できます。

設定/設定&gtに移動します。編集者>ライブテンプレートを管理するためのテンプレート tsconfig.json

略語、説明、テンプレートテキスト(変数を使用)、コンテキスト、拡張/再フォーマットオプションを定義します。 略語を入力し、定義された拡張キーを押すことにより、テンプレートを呼び出します。

ウェブストームと角度の先端8:インドのテスト

WebStormからさまざまなJavaScriptテストを直接実行します(node.jsとnodejsプラグインがインストールされていると仮定します)。 エディターから個々のカルマテストを直接実行するか、専用ウィンドウに表示された結果をデバッグ分度器テストで実行します。 Restfulサービステストは、ツール>を介して統合されています。 RESTFUL WEBサービスをテスト

Running Karma Tests GIF Testing RESTful Services GIF

ウェブストームと角度のヒント9:コード修復のためのローカル履歴

WebStormのローカル履歴は、コードのスナップショットを提供し、バージョン制御とは無関係に以前の状態に戻ることができます。 それにアクセスして、Git初期化されていなくても、現在と過去のバージョンを比較してください。

Top 12 Productivity Tips for WebStorm and Angular: Part 2 Top 12 Productivity Tips for WebStorm and Angular: Part 2

WebStormとAngular Tip 10:TypeScriptパラメーターのヒント typeScriptパラメーターヒント関数にパラメーター名を表示することにより、コードの読みやすさを改善します。 設定/設定&gtでヒントの可視性をカスタマイズします。編集者>一般>外観

。 すべての引数のヒントを表示したり、特定の方法のブラックリストを作成したり、完全に無効にしたりできます。

Top 12 Productivity Tips for WebStorm and Angular: Part 2 Top 12 Productivity Tips for WebStorm and Angular: Part 2 WebstormとAngular Tip 11:効率的なナビゲーションのためのパン粉Parameter Hints GIF

エディターの下部(または上部に設定可能)のパン粉は、ファイル内の現在の場所を表示します。パン粉をクリックして、親オブジェクトにジャンプします。または、ファイル構造のポップアップを使用します(

navigate>ファイル構造またはcmd/ctrl f12)。

WebStormおよびAngular Tip 12:Ancular Documentation in-ide WebStorm内に直接角度ドキュメントにアクセスします。角度のあるコンストラクトの上に世話を置き、F1を押すか、「マウスの移動に関するクイックドキュメントを表示」Top 12 Productivity Tips for WebStorm and Angular: Part 2 設定/設定>編集者>一般的なホバーオーバードキュメントの場合

Angular Documentation GIF Top 12 Productivity Tips for WebStorm and Angular: Part 2 Hover Documentation GIF

結論:

これらのウェブストーム機能をマスターして、角度開発ワークフローを大幅に強化します。 WebStormの生産性レポートを使用して、生産性の改善を追跡することを忘れないでください(help> Productivition Guide)。

(IDE機能に関する標準的な質問と回答のセットであるため、BREVITYのためにFAQSセクションが省略されています。)

以上がウェブストームと角度のトップ12の生産性のヒント:パート2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート