生産性を高めるためのカスタムNxツールバーとメニューを作成する方法

なぜカスタムNxツールバーとメニューがワークフローに重要

開発者は、テストを実行したり、プロジェクトをビルドしたり、コードを生成したり、ワークスペース間でナビゲートしたり、繰り返しコマンドを実行したりする日の重要な部分を費やしています。 Nx、強力なモノレポフレームワーク、すでに優れたCLIとNx Consoleの機能を提供していますが、実際の生産性のマルチプラは、ユーザーインターフェイスを特定のタスクに調整することから来ます。カスタムツールバーとメニューは、Nxのワークスペースをパーソナライズされたコマンドセンターに変えます。ワークフローを使用するか、または、一般的な操作をトリガーするツールを切り替えるだけで、Nxの作業スペースを短くします。

コアコンセプト:Nxツールバーとメニューとは?

Nx ワークスペースには、複数のアプリケーションとライブラリが組み込まれています。それぞれは、スクリプト(ビルド、サービス、lint、テスト、e2e など)のセットがあります。ツールバーとメニューは、これらのコマンドを上回るグラフィカルレイヤーを提供します。IDE では、Visual Studio コードや WebStorm のようなもので、Nx Console 拡張機能では、プロジェクトレベルのアクションでサイドバーを追加しています。ただし、マクロを実行したり、複数のコマンドを組み合わせたり、外部ツールをトリガーしたり、またはグループをしたり、グループにしたり、関連するメニューをアップロードしたりすることで、さらに拡張したりすることができます。

カスタマイズがハッペンのどこに

[]IDEエクステンション:] Nxコンソール(VSコード、JetBrains)は、ワークスペースレベルの設定ファイル(例、)、または[)をサポートし、カスタムタスクを定義することができます。
[Nx Console 設定:]] 拡張子内で、”お気に入り” とカスタムコマンドパレットを設定できます。
]キーバインドとマクロ:[などのツールを使用してNxコマンドをチェーンできます。
[カスタムスクリプト:[]] Nxコマンドを呼び出すnpmスクリプトを定義し、それらをUI要素に結びます。

これらのレイヤーを活用することで、ローカル開発からCI/CDのステップまで全てをカバーする、包括的なツールバーを構築できます。

カスタムNxツールバーを作成するステップバイステップガイド

1. カスタマイズのためのワークスペースを用意して下さい

UI要素を追加する前に、ワークスペースがきれいで整理されていることを確認してください。 [を実行して、プロジェクト依存関係を視覚化し、既存のターゲット構成のを確認します。 IDEの最新のNxコンソール拡張をインストールします。 VSコードでは、これは、カスタム追加の基礎として役立つコマンドパレットやプロジェクトエクスプローラなどの強力な機能が含まれています。

2. ほとんどのフリークエントコマンドを定義する

チームが毎日複数の回を実行しているコマンドをリストします。一般的な例:

[ (ウォッチモード)
[ (単位テスト)
[]
[]
[(依存性可視化)

コマンドを10つまで優先します。このリストは、ツールバーとメニューエントリのベースとなります。

3. Nx Console の組み込み「お気に入り」を使用する

Nx Console 拡張機能では、特定のプロジェクトやターゲットをお気に入りとしてマークすることができます。Nx Console サイドバーのプロジェクトを右クリックし、「お気に入りに追加」を選択します。お気に入りは、上部の別のセクションに表示され、ワンクリックアクセスを提供します。これは、ツールバーのカスタマイズの最も単純な形式です。設定ファイルは必要ありません。詳細な制御については、カスタムタスクを [またはで作成できます。

4. ワークスペース構成でカスタムタスクを作成する

複数の Nx コマンドを連続または並列で実行するカスタムタスクを定義します。例えば、アプリの ] に次のタスクを追加します。

"fastserve": {
 "executor": "nx:run-commands",
 "options": {
 "commands": [
 "nx build shared-ui",
 "nx serve frontend"
 ],
 "parallel": false
 }
}

これで、カスタムツールバー(Nx Console または CLI 経由で)はを使うことができます。また、タスク.json を使用して VS コードのメニュー項目を追加することもできますが、Nx Console のネイティブなアプローチはクリーナーです。

5. タスクグループでカスタムメニューを作成

より大きなチームでは、グループ関連のコマンドを単一のメニューにグループ化します。 Nx の [ を特定の設定で使用します。例えば、lint を実行し、フォーマットチェック、ユニットテストを実行する「プレコミット」メニューを作成します。このスクリプトをトップレベルの npm スクリプトとして説明し、Nx Console ツールバーに「お気に入り」として追加するか、カスタムタスクのアプローチを使用して Nx Console ツールバーにピン留めることができます。

6.テストおよび反復

設定後、新しいツールバーまたはメニューから各コマンドを実行します。出力が正しいことを確認し、既存のワークフローが破綻するわけではありません。同僚にテストを依頼してください。フラッシュアイは、多くの場合、不足しているステップをキャッチしたり、ラベルを混同したりします。実際の使用頻度を反映するために注文を調整します。

高度なカスタマイズ技術

IDE のキーバインドおよびマクロの使用

ツールバーの横に、キーボードショートカットをカスタムNxタスクに割り当てることができます。 VSコードでは、[]を開き、キーボードショートカットをのようなコマンドに結合してNx CLI文字列と結合します。複雑なシーケンスでは、「macros」のような拡張を使用して、複数のアクションを1つのキーストロークでトリガーします。たとえば、Ctrl + Shift + Tを押すと、テストスイートを実行し、新しいターミナルでテストカバレッジレポートを開きます。

外部ツールの統合

ローカル開発 URL でブラウザーを開き、Lighthouse 監査を実行したり、ステージング環境にデプロイするボタンを追加できます。カスタム実行者やシェルスクリプトで Nx のを使用します。例えば、"Deploy to Staging" ツールバーボタンはを実行できます。カスタム npm スクリプトでこれをラップして、お気に入りとして追加します。

チーム間で構成を分ける

ワークスペースリポジトリにそれらを保存することにより、カスタムツールバーとメニューチームアグノスティックを作ります。 []のカスタムタスクを定義するか、または共有。意図した使用をREADMEまたは専用に文書化します。新しい開発者がリポジトリをクローンするとき、彼らは同じワークフローを取得します。

実世界事例:フルスタック開発ツールバー

Angular Frontend、Node.js バックエンド、共有型のライブラリを含む Monorepo 用のツールバーを設計してみましょう。ツールバーには以下が含まれます。

[] ] の開始 - を別のターミナルタブで実行します。
クイックテスト - を実行します(最も頻繁に変更されたlib)。
]Lint Fix - を影響を受けたプロジェクト全体で実行します。
[]ビルド&エクスポート[]] - フロントエンドを構築し、静的ファイルをにコピーします。
[Deploy] - rsyncを介して、未入力の変更、ビルド、およびアップロードをチェックするカスタムデプロイスクリプトを実行します。

各ボタンは、それぞれのプロジェクト[のカスタムターゲットとして作成され、Nx Consoleのお気に入りでピン留めされます。「Deploy」ボタンには、Nx を使用する事前フライトチェックが複数ステップで実行されます。

維持可能なカスタマイズのためのベストプラクティス

[ クリアー:[]]] 記述ラベルは「DAYSスタートオール」のような(絵文字で素早く視覚認識) です。
[]スコープを省略:[]]]は、ツールバーを10-12項目下に保持して、混乱を避ける。グループ二次コマンドを1つのメニューにグループ化します。
ドキュメント自動生成:] スクリプトを使用して、マークダウンテーブルを生成します。
Version Control:] 常にカスタム設定をコミットし、すべてのチームメンバーのメリットを常に提供します。
[Periodic Review:]]] 毎月、プルーン未使用コマンドを行ない、毎日使用から出現する新しいものを追加します。

一般的な落札とテムを避ける方法

[] ハッシュコードパス:] は、Nxの[ と]] を使用して、設定をポータブルに保つための変数。
[]オーバーエンジニアリング:[]]]は、週に1回だけ実行するコマンドのカスタムツールバーを追加しないでください。高頻度のアクションに固執します。
[]:[]]]を解除すると、カスタムターゲットをテストします。 ]を使用して、互換性を確認します。
[]チームフィードバックを無視する:[)ツールバーが実際の痛みのポイントを解決するのを確実にするためにあなたのチームを調査する、想像力のないもの。

生産性向上の計測

カスタムツールバーとメニューを実行した後、時間の節約を追跡します。簡単なメトリック:カスタマイズの前に、典型的なコマンドチェーン(例えば、ビルド+テスト+リント)を実行するために何秒かかりますか? それから、ワンクリックで時間を測定します。開発者が1日あたりの20のそのようなチェーンを実行すると、それは毎日保存された3分以上ですが、10のチーム全体で合成されると、それは週あたりの1時間です。より重要なコンテキストを削減し、より良いコマンドを削減します。

さらなる読書のための外部リソース

コンテンツ

カスタムNxツールバーとメニューは単なる贅沢ではありません。それは、開発チームの効率性を最適化する実用的な投資です。Nx Consoleのお気に入りやカスタムタスクを活用して、高頻度のコマンドを慎重に選択し、IDEマクロと統合することで、摩擦を最小限に抑えるワークスペースを構築することができます。開始する:最も迷惑な毎日コマンドを選択し、ツールバーボタンにそれらをオンにします。それから、実際の使用パターンに基づいて拡大します。あなたの将来のセルフとあなたのチームメイトは、あなたの生産性を向上し、あなたの焦点を合わせることを絞ったことを感謝します。