ImageOptimizer - Visual Studio 拡張機能をステップ バイ ステップで更新する

このガイドでは、ケース スタディとして Image Optimizer 拡張機能を使用して Visual Studio 2019 のサポートを維持しながら、Visual Studio 2022 サポートを追加するために必要なすべての手順を示します。
これは、各手順への Git コミット リンクを含む完全なガイドを意図していますが、完成した PR については、こちら (https://github.com/madskristensen/ImageOptimizer/pull/46) から自由に確認できます。

このガイドの最後には、追加のサンプルも用意されています。

手順 1 - プロジェクトを最新化する

プロジェクトの最新化に関するページを参照してください。

git コミット e052465

まず、VSIX と単体テスト プロジェクトを、プロジェクトのプロパティ ページの下の .NET 4.7.2 にバンプします。

Framework version bump

Image Optimizer では、いくつかの古いカスタム 14.* および 15.* パッケージが参照されています。ここでは代わりに、必要なすべての参照を統合する Microsoft.VisualStudio.Sdk NuGet パッケージをインストールします。

-  <ItemGroup>
-    <PackageReference Include="Madskristensen.VisualStudio.SDK">
-      <Version>14.0.0-beta4</Version>
-    </PackageReference>
-    <PackageReference Include="Microsoft.VSSDK.BuildTools">
-      <Version>15.8.3247</Version>
-      <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
-      <PrivateAssets>all</PrivateAssets>
-    </PackageReference>
-  </ItemGroup>

+  <ItemGroup>
+    <PackageReference Include="Microsoft.VisualStudio.SDK">
+      <Version>16.9.31025.194</Version>
+    </PackageReference>
+  </ItemGroup>

プロジェクトのビルドに成功すると、スレッド化に関する警告がいくつか示されます。 これらの警告を修正するには、ctrl. をクリックし、Intellisense を使用して欠落しているスレッド切り替え行を追加します。

手順 2 - ソース コードを共有プロジェクトにリファクターする

共有プロジェクトに関するページを参照してください。

Visual Studio 2022 をサポートするには、Visual Studio 2019 と Visual Studio 2022 VSIX プロジェクト間で共有される拡張機能のソース コードを含む新しい共有プロジェクトを追加する必要があります。

  1. ソリューションに新しい共有プロジェクトを追加する

    Git コミット abf249d

    Add shared project

  2. VSIX プロジェクトに共有プロジェクトへの参照を追加します。

    Git コミット e8e941e

    Add shared project reference

  3. 次のものを除き、ソース コード ファイル (cs、xaml、resx) を新しい共有プロジェクトに移動します。

    • source.extension.vsixmanifest
    • 拡張機能メタデータ ファイル (アイコン、ライセンス、リリース ノートなど)
    • VSCT ファイル
    • リンク ファイル
    • VSIX に含める必要がある外部ツールまたはライブラリ

    Git コミット f31f051

    Move files to shared project

  4. 次に、すべてのメタデータ、VSCT ファイル、リンク ファイル、および外部ツールやライブラリを共有の場所に移動し、それらをリンクされた項目として VSIX プロジェクトに追加して戻します。 source.extension.vsixmanifest は削除しないでください。

    Git コミット 73ba920 - ファイルの移動

    Git コミット d5e36b2 - 外部ツールやライブラリの追加

    1. このプロジェクトでは、拡張機能アイコン、VSCT ファイル、および外部ツールを新しいフォルダー ImageOptimizer\Resources に移動する必要があります。 それらを共有フォルダーにコピーし、VSIX プロジェクトから削除します。
    2. それらをリンクされた項目として追加して戻し、項目が既にリンクされている場合は、それらの項目 (ライセンスなど) をそのまま保持できます。
    3. [ビルド アクション] と他のプロパティが、追加されたリンク ファイルで正しく設定されていることを確認します。その場合、各ファイルを選択し、プロパティ ツール ウィンドウを確認します。 プロジェクトでは、次の設定を行う必要がありました。
      • icon.png [ビルド アクション] を Content に設定し、マークされた [VSIX に含める] を true に設定する

      • ImageOptimizer.vsct [ビルド アクション] を VSCTComplile に設定し、[VSIX に含める] を false に設定する

      • Resources\Tools の下にあるファイルのすべての [ビルド アクション] を Content に設定し、マークされた [VSIX に含める] を true に設定する

        Add linked files to VSIX project

      • さらに、ImageOptimizer.csImageOptimizer.vsct の依存関係であるため、この依存関係を csproj ファイルに手動で追加する必要があります。

        - <Content Include="..\SharedFiles\ImageOptimizer.vsct">
        -   <Link>ImageOptimizer.vsct</Link>
        - </Content>
        - <Compile Include="..\SharedFiles\ImageOptimizer.cs">
        -   <Link>ImageOptimizer.cs</Link>
        - </Compile>
        
        + <VSCTCompile Include="..\SharedFiles\ImageOptimizer.vsct">
        +   <ResourceName>Menus.ctmenu</ResourceName>
        +   <Generator>VsctGenerator</Generator>
        +   <LastGenOutput>..\SharedFiles\ImageOptimizer.cs</LastGenOutput>
        + </VSCTCompile>
        + <Compile Include="..\SharedFiles\ImageOptimizer.cs">
        +   <AutoGen>True</AutoGen>
        +   <DesignTime>True</DesignTime>
        +   <DependentUpon>..\SharedFiles\ImageOptimizer.vsct</DependentUpon>
        + </Compile>
        
      • プロパティ ツール ウィンドウにより特定の [ビルド アクション] の設定が妨げられる場合は、上記のように csproj を手動で変更し、必要に応じて [ビルド アクション] を設定できます。

  5. プロジェクトをビルドして変更を確認し、エラーや問題を修正します。 一般的な問題については、よく寄せられる質問に関するセクションを確認してください。

手順 3 - Visual Studio 2022 VSIX プロジェクトを追加する

Visual Studio 2022 のターゲットの追加に関するページを参照してください。

  1. ソリューションに新しい VSIX プロジェクトを追加します。

  2. source.extension.vsixmanifest. を除き、新しいプロジェクト内の追加のソース コードを削除します

    Create a new VSIX project

  3. 共有プロジェクトへの参照を追加します。

    Git コミット dd49cb2

    Add reference to shared project

  4. Visual Studio 2019 VSIX プロジェクトからリンク ファイルを追加し、[ビルド アクション] および [VSIX に含める] プロパティが一致することを確認します。 また、source.extension.vsixmanifest ファイルをコピーします。これは、Visual Studio 2022 をサポートするために後で変更します。

    Git コミット 98c43ee

    Add Linked files to VSIX project

  5. 試行されたビルドでは、System.Windows.Forms への参照が欠落していることが示されます。 それを Visual Studio 2022 プロジェクトに追加し、リビルドするだけです。

    Git コミット de71ccd

    + <Reference Include="System.Windows.Forms" />
    
  6. Microsoft.VisualStudio.SDK および Microsoft.VSSDK.BuildTools パッケージ参照を Visual Studio 2022 バージョンにアップグレードします。

    Git コミット d581fc3

    Note

    これらは、このガイドが作成された時点で使用可能な最新バージョンです。 使用可能な最新バージョンを取得することをお勧めします。

    -<PackageReference Include="Microsoft.VisualStudio.SDK" Version="16.0.206" />
    +<PackageReference Include="Microsoft.VisualStudio.SDK" Version="17.0.0-preview-1-31216-1036" />
    -<PackageReference Include="Microsoft.VSSDK.BuildTools" Version="16.10.32" />
    +<PackageReference Include="Microsoft.VSSDK.BuildTools" Version="17.0.63-Visual Studio 2022-g3f11f5ab" />
    
  7. source.extension.vsixmanifest ファイルを編集し、ターゲットの Visual Studio 2022 が反映されるようにします。

    Git コミット 9d393c7

    1. <InstallationTarget> タグを設定し、Visual Studio 2022 が反映され、amd64 ペイロードが示されるようにします。

      <InstallationTarget Id="Microsoft.VisualStudio.Community" Version="[17.0,18.0)">
          <ProductArchitecture>amd64</ProductArchitecture>
      </InstallationTarget>
      
    2. 前提条件を変更し、Visual Studio 2022 以降のみが含まれるようにします。

      - <Prerequisite Id="Microsoft.VisualStudio.Component.CoreEditor" Version="[15.0,)" DisplayName="Visual Studio core editor" />
      + <Prerequisite Id="Microsoft.VisualStudio.Component.CoreEditor" Version="[17.0,)" DisplayName="Visual Studio core editor" />
      

完了です。

これで、ビルド時に Visual Studio 2019 と Visual Studio 2022 VSIX の両方が生成されるようになりました。

その他のサンプル

  • ProPower ツール
    • PeekF1
      • 選択されたクラスやオブジェクトに関するヘルプ情報を使用して、Web ブラウザーをピークできるようにします。
    • FixMixedTabs
      • ドキュメントをスキャンし、タブをスペース (またはその逆) に置き換えます

次のステップ

この開始から終了までのガイドを読んで、拡張機能を更新する準備を行います。