ImageOptimizer – Atualizar uma extensão do Visual Studio passo a passo

Este guia mostrará todas as etapas necessárias para adicionar suporte ao Visual Studio 2022, mantendo o suporte do Visual Studio 2019 usando a extensão otimizador de imagem como um estudo de caso.
Este deve ser um guia completo com links de confirmação do git para cada etapa, mas você pode ver a PR finalizada aqui: https://github.com/madskristensen/ImageOptimizer/pull/46.

Também temos exemplos adicionais no final deste guia.

Etapa 1 – Modernizar o projeto

Confira Modernizar o projeto.

git commit e052465

Primeiro, elevamos o projeto de teste de unidade e VSIX para o .NET 4.7.2 na página de propriedades dos projetos:

O Otimizador de Imagem referenciou alguns pacotes 14.* e 15.* personalizados antigos, em vez disso, instalaremos o pacote NuGet Microsoft.VisualStudio.Sdk que consolida todas as nossas referências necessárias.

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

A criação do projeto foi bem-sucedida e recebemos alguns avisos de threading. Corrigimos esses avisos clicando em ctrl e ., e usando o Intellisense para adicionar as linhas de comutação de thread ausentes.

Etapa 2 – Refatorar o código-fonte em um projeto compartilhado

Confira Projetos compartilhados.

O suporte ao Visual Studio 2022 requer a adição de um novo projeto compartilhado que conterá o código-fonte da extensão que será compartilhado entre os projetos vsIX do Visual Studio 2019 e do Visual Studio 2022.

1. Adicionar um novo projeto compartilhado à sua solução

   git commit abf249d

   

2. Adicione uma referência ao projeto compartilhado ao seu projeto VSIX.

   git commit e8e941e

   

3. Mova seus arquivos de código-fonte (cs, xaml, resx) para o novo projeto compartilhado exceto para o seguinte:

   • source.extension.vsixmanifest
   • Arquivos de metadados de extensão (ícones, licenças, notas de versão etc.)
   • Arquivos VSCT
   • Arquivos vinculados
   • Ferramentas ou bibliotecas externas que precisam ser incluídas no VSIX

   git commit f31f051

   

4. Agora mova todos os metadados, arquivos VSCT, arquivos vinculados e ferramentas/bibliotecas externas para um local compartilhado e adicione-os novamente como itens vinculados ao projeto VSIX. Não remova o source.extension.vsixmanifest.

   git commit 73ba920 – Mover arquivos

   git commit d5e36b2 – Adicionando ferramentas/bibliotecas externas

   1. Para este projeto, precisamos mover o ícone de extensão, o arquivo VSCT e as ferramentas externas para nossa nova pasta ImageOptimizer\Resources. Copie-os para a pasta compartilhada e remova-os do projeto VSIX.
   2. Adicionados novamente como itens vinculados e se os itens já estiverem vinculados, os itens poderão permanecer como estão (licença, por exemplo).
   3. Valide se a Ação de Build e outras propriedades são definidas corretamente nos arquivos vinculados adicionados selecionando cada uma delas e verificando a janela de ferramentas de propriedades. Para nosso projeto, tivemos que definir o seguinte:

      • Defina a ação de build icon.png como Content e marque a opção de incluir no VSIX para true

      • Defina a ação de compilação ImageOptimizer.vsct como VSCTComplile e inclua no VSIX como false

      • Defina todas as Ações de Compilação dos arquivos em Resources\Tools como Content e marque a opção Incluir no VSIX como true

        

      • Além disso, ImageOptimizer.cs é uma dependência de ImageOptimizer.vsct, para isso, precisamos adicionar manualmente essa dependência ao arquivo 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>
        

      • Se a janela de ferramentas de propriedades impedir que você defina uma Ação de Build específica, você poderá modificar manualmente o csproj conforme feito acima e definir a Ação de Build conforme necessário.

5. Crie seu projeto para validar suas alterações e corrigir erros/problemas. Verifique a seção Perguntas frequentes para problemas comuns.

Etapa 3 – Adicionar um projeto VSIX do Visual Studio 2022

Confira Adicionar alvo do Visual Studio 2022.

1. Adicione um novo projeto VSIX à sua solução.

2. Remover qualquer código-fonte adicional no novo projeto, exceto para source.extension.vsixmanifest.

   

3. Adicione uma referência ao seu projeto compartilhado.

   git commit dd49cb2

   

4. Adicione os arquivos vinculados do projeto VSIX do Visual Studio 2019 e valide se as propriedades "Ação de Build" e "Incluir no VSIX" correspondem. Além disso, copie seu arquivo de source.extension.vsixmanifest, vamos modificá-lo mais tarde para dar suporte ao Visual Studio 2022.

   git commit 98c43ee

   

5. Uma tentativa de compilação mostra que está faltando uma referência a System.Windows.Forms. Basta adicioná-lo ao nosso projeto do Visual Studio 2022 e compilar novamente.

   git commit de71ccd

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

6. Atualize as referências de pacote Microsoft.VisualStudio.SDK e Microsoft.VSSDK.BuildTools para as versões do Visual Studio 2022.

   git commit d581fc3

   Nota

   Estas são as versões mais recentes disponíveis quando este guia foi criado. É recomendável que você obtenha as versões mais recentes disponíveis.

   -<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. Edite seu arquivo source.extension.vsixmanifest para refletir o direcionamento do Visual Studio 2022.

   git commit 9d393c7

   1. Defina a etiqueta <InstallationTarget> para refletir o Visual Studio 2022 e indicar um payload amd64.

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

   2. Modifique o pré-requisito para incluir apenas o Visual Studio 2022 e superior:

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

Terminamos!

Com isso, o build agora produz VSIXes para o Visual Studio 2019 e o Visual Studio 2022.

Outros exemplos

• ProPower Tools
  • PeekF1
    • Permite visualizar informações de ajuda em um navegador da Web sobre a classe/objeto selecionado.
  • FixMixedTabs
    • Examina os documentos e substitui as tabulações por espaços ou vice-versa

Próximas etapas

Prepare-se para atualizar sua extensão lendo este guia do início ao fim.