ImageOptimizer - Mettre à jour une extension Visual Studio étape par étape

Ce guide montre toutes les étapes requises pour ajouter la prise en charge de Visual Studio 2022 tout en conservant la prise en charge de Visual Studio 2019 à l’aide de l’extension Image Optimizer comme étude de cas.
Il s’agit d’un guide complet avec des liens git commit vers chaque étape, mais vous êtes libre de voir la demande de tirage finalisée ici : https://github.com/madskristensen/ImageOptimizer/pull/46.

Nous avons également des exemples supplémentaires à la fin de ce guide.

Étape 1 : Moderniser le projet

Voir Moderniser le projet.

git commit e052465

Tout d’abord, nous faisons passer le projet de test unitaire VSIX à .NET 4.7.2 sous la page des propriétés des projets :

L’optimiseur d’image a référencé certains anciens packages personnalisés 14.* et 15.*, au lieu de cela, nous allons installer le Microsoft.VisualStudio.Sdk package NuGet qui consolide toutes nos références requises.

-  <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>

La création du projet réussit et nous obtenons quelques avertissements de threading. Nous corrigeons ces avertissements en ctrl cliquant et . en utilisant IntelliSense pour ajouter les lignes de basculement de thread manquantes.

Étape 2 : refactoriser le code source dans un projet partagé

Consultez les projets partagés.

La prise en charge de Visual Studio 2022 nécessite l’ajout d’un nouveau projet partagé qui contiendra le code source de l’extension qui sera partagé entre les projets Visual Studio 2019 et Visual Studio 2022 VSIX.

1. Ajouter un nouveau projet partagé à votre solution

   git commit abf249d

   

2. Ajoutez une référence au projet partagé à votre projet VSIX.

   git commit e8e941e

   

3. Déplacez vos fichiers de code source (cs, xaml, resx) vers le nouveau projet partagé, à l’exception des éléments suivants :

   • source.extension.vsixmanifest
   • Fichiers de métadonnées d’extension (icônes, licences, notes de publication, etc.)
   • Fichiers VSCT
   • Fichiers liés
   • Outils ou bibliothèques externes qui doivent être inclus dans VSIX

   git commit f31f051

   

4. Déplacez maintenant toutes les métadonnées, fichiers VSCT, fichiers liés et outils/bibliothèques externes vers un emplacement partagé et ajoutez-les en tant qu’éléments liés au projet VSIX. Ne pas supprimer source.extension.vsixmanifest.

   git commit 73ba920 - Déplacement de fichiers

   git commit d5e36b2 - Ajout d’outils/bibliothèques externes

   1. Pour ce projet, nous devons déplacer l’icône d’extension, le fichier VSCT et les outils externes vers notre nouveau dossier ImageOptimizer\Resources. Copiez-les dans le dossier partagé et supprimez-les du projet VSIX.
   2. Ajoutés en tant qu’éléments liés et si les éléments sont déjà liés peuvent rester tels qu’ils sont (licence par exemple).
   3. Vérifiez que l’action de génération et d’autres propriétés sont correctement définies dans les fichiers liés ajoutés en sélectionnant chacune d’elles et en case activée la fenêtre de l’outil de propriétés. Pour notre projet, nous avons dû définir les éléments suivants :

      • Définir icon.png l’action de génération sur Content et marquer Include dans VSIX sur true

      • Définir ImageOptimizer.vsct l’action de génération sur VSCTComplile et inclure dans VSIX sur false

      • Définissez toutes les actions de génération des fichiers sous Resources\ToolsContent et marquées Include dans VSIX sur true

        

      • En outre, ImageOptimizer.cs est une dépendance de ImageOptimizer.vsct, pour cela, nous devons ajouter manuellement cette dépendance au fichier 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>
        

      • Si la fenêtre de l’outil de propriétés vous empêche de définir une action de génération spécifique, vous pouvez modifier manuellement le csproj comme indiqué ci-dessus et définir l’action de génération en fonction des besoins.

5. Générez votre projet pour valider vos modifications et résoudre les erreurs/problèmes. Consultez la section Questions fréquentes (FAQ ) pour connaître les problèmes courants.

Étape 3 : Ajouter un projet VSIX Visual Studio 2022

Voir Ajouter une cible Visual Studio 2022.

1. Ajoutez un nouveau projet VSIX à votre solution.

2. Supprimez tout code source supplémentaire dans le nouveau projet, à l’exception de source.extension.vsixmanifest.

   

3. Ajoutez une référence à votre projet partagé.

   git commit dd49cb2

   

4. Ajoutez les fichiers liés à partir de votre projet VSIX Visual Studio 2019 et vérifiez que leurs propriétés « Action de génération » et « Inclure dans VSIX » correspondent. Copiez également votre source.extension.vsixmanifest fichier, nous le modifierons ultérieurement pour prendre en charge Visual Studio 2022.

   git commit 98c43ee

   

5. Une tentative de build indique que nous ne disposons pas d’une référence à System.Windows.Forms. Il vous suffit de l’ajouter à notre projet Visual Studio 2022 et de le reconstruire.

   git commit de71ccd

   + <Reference Include="System.Windows.Forms" />
   

6. Mise à niveau Microsoft.VisualStudio.SDK et Microsoft.VSSDK.BuildTools références de package aux versions de Visual Studio 2022.

   git commit d581fc3

   Remarque

   Il s’agit des dernières versions disponibles lors de la création de ce guide. Il est recommandé d’obtenir les dernières versions disponibles.

   -<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. Modifiez votre source.extension.vsixmanifest fichier pour refléter le ciblage de Visual Studio 2022.

   validation git 9d393c7

   1. Définissez la <InstallationTarget> balise pour refléter Visual Studio 2022 et indiquez une charge utile amd64 :

      <InstallationTarget Id="Microsoft.VisualStudio.Community" Version="[17.0,18.0)">
          <ProductArchitecture>amd64</ProductArchitecture>
      </InstallationTarget>
      

   2. Modifiez la configuration requise pour inclure uniquement Visual Studio 2022 et versions ultérieures :

      - <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" />
      

Et on a fini !

Avec cela, la génération produit désormais à la fois Visual Studio 2019 et Visual Studio 2022 VSIXes.

Autres exemples

• Outils ProPower
  • PeekF1
    • Permet d’afficher un aperçu dans un navigateur web avec des informations d’aide sur la classe/l’objet sélectionné.
  • FixMixedTabs
    • Analyse vos documents et remplace les onglets par des espaces ou inversement

Étapes suivantes

Préparez-vous à mettre à jour votre extension en lisant ce guide de démarrage à la fin.