> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Buscar e substituir

O Editor de Código oferece três formas de localizar arquivos e trechos de código no tema, além de uma função de substituição em massa para renomear classes, componentes ou qualquer texto repetido.

***

## Formas de navegação

Ao abrir o editor, você verá no canto inferior do painel lateral os três modos de navegação disponíveis:

<img src="https://mintcdn.com/yampi/sub76dNdr71z2UAb/images/editor-codigo/editor-c%C3%B3digo-tela-inicial.png?fit=max&auto=format&n=sub76dNdr71z2UAb&q=85&s=528707158b3b6c805bb65697bc228583" alt="" width="1497" height="806" data-path="images/editor-codigo/editor-código-tela-inicial.png" />

| Modo                      | Atalho             | Quando usar                                                                            |
| ------------------------- | ------------------ | -------------------------------------------------------------------------------------- |
| **Explorar**              | `Ctrl + Shift + E` | Navegar pela árvore de pastas quando você já sabe onde o arquivo está.                 |
| **Pesquisar em Arquivos** | `Ctrl + Shift + F` | Buscar por um trecho de código, classe CSS ou nome de componente em todos os arquivos. |
| **Ir até Arquivo**        | `Ctrl + P`         | Abrir um arquivo rapidamente pelo nome, sem precisar navegar pela árvore.              |

<Note>
  No macOS, substitua `Ctrl` por `Cmd` em todos os atalhos.
</Note>

***

## Pesquisando em arquivos

A busca em arquivos é o recurso mais poderoso do editor. Ela varre o conteúdo de todos os arquivos do tema e retorna cada ocorrência com o trecho destacado.

<Steps>
  <Step title="Abrir o painel de busca">
    Clique no ícone de lupa no painel lateral ou use o atalho `Ctrl + Shift + F`.
  </Step>

  <Step title="Digitar o termo">
    Digite o termo que deseja localizar. Os resultados são atualizados em tempo real, agrupados por pasta e arquivo, com a contagem total exibida no topo.

    <img src="https://mintcdn.com/yampi/sub76dNdr71z2UAb/images/editor-codigo/editor-c%C3%B3digo-busca-produto.png?fit=max&auto=format&n=sub76dNdr71z2UAb&q=85&s=ef11c1b587a7c2b4d37bbba467898b9a" alt="" width="1497" height="806" data-path="images/editor-codigo/editor-código-busca-produto.png" />

    No exemplo acima, a busca por `box-product` retornou **73 resultados em 22 arquivos** — incluindo estilos SCSS, componentes Vue e templates Twig.
  </Step>

  <Step title="Refinar a busca por tipo de arquivo">
    Para reduzir o escopo, use o campo **Arquivos a incluir** com um padrão glob. Por exemplo, `*.vue` limita a busca apenas a componentes Vue:

    <img src="https://mintcdn.com/yampi/sub76dNdr71z2UAb/images/editor-codigo/editor-c%C3%B3digo-busca-produto-vue.png?fit=max&auto=format&n=sub76dNdr71z2UAb&q=85&s=55337708ddd57fd0b48ab0f5912d2b82" alt="" width="1497" height="806" data-path="images/editor-codigo/editor-código-busca-produto-vue.png" />

    A mesma busca por `box-product`, agora filtrada para `*.vue`, retorna apenas **5 resultados em 3 arquivos**.

    <Tip>
      Você pode combinar padrões com vírgula (ex.: `*.vue, *.twig`) ou usar caminhos parciais (ex.: `components/product/**`) para restringir ainda mais a busca.
    </Tip>
  </Step>

  <Step title="Abrir o resultado">
    Clique em qualquer ocorrência para abrir o arquivo na linha correspondente.
  </Step>
</Steps>

***

## Substituindo conteúdo

A substituição funciona em conjunto com a busca: você define o termo a localizar, o termo de troca e aplica a substituição arquivo por arquivo ou em todas as ocorrências de uma vez.

<Steps>
  <Step title="Expandir o painel de substituição">
    Com o painel de busca aberto, clique na seta `>` à esquerda do campo de pesquisa para revelar o campo de substituição logo abaixo.
  </Step>

  <Step title="Informar os termos">
    No campo superior, digite o termo a localizar. No campo inferior, digite o novo valor que substituirá o termo encontrado.

    Os resultados exibem uma prévia da alteração: o termo original aparece riscado e o novo valor é destacado ao lado.

    <img src="https://mintcdn.com/yampi/sub76dNdr71z2UAb/images/editor-codigo/editor-codigo-substituir.png?fit=max&auto=format&n=sub76dNdr71z2UAb&q=85&s=c52c3e8aad30730cd56d98cd29e118e1" alt="" width="1495" height="805" data-path="images/editor-codigo/editor-codigo-substituir.png" />

    No exemplo acima, a classe `classe-antiga` será substituída por `classe-nova` no arquivo `MeuComponente.vue`.
  </Step>

  <Step title="Aplicar a substituição">
    Você pode substituir as ocorrências de duas formas:

    * **Por resultado individual** — passe o mouse sobre uma ocorrência na lista de resultados e clique no ícone de substituir ao lado dela (atalho `Ctrl + Shift + 1`).
    * **Por arquivo** — clique no resultado para abrir o arquivo, selecione as alterações que deseja aplicar e use o atalho `Ctrl + Shift + 1` dentro do arquivo.
  </Step>

  <Step title="Salvar o arquivo">
    A substituição altera o conteúdo do arquivo, mas a mudança só é persistida após salvar. Os arquivos modificados ficam marcados com um ponto ao lado do nome na aba.

    <img src="https://mintcdn.com/yampi/sub76dNdr71z2UAb/images/editor-codigo/editor-codigo-substitituir-concluido.png?fit=max&auto=format&n=sub76dNdr71z2UAb&q=85&s=d762dcd25b15299cb5edfdb4383971c8" alt="" width="1497" height="806" data-path="images/editor-codigo/editor-codigo-substitituir-concluido.png" />

    Clique em **Salvar arquivo** no canto superior direito (ou use `Ctrl + S` / `Cmd + S`) para confirmar a alteração.
  </Step>
</Steps>

***

## Opções avançadas da busca

Ao lado do campo de busca, três botões alteram o comportamento da pesquisa:

| Botão | Significado                                                                                                                   |
| ----- | ----------------------------------------------------------------------------------------------------------------------------- |
| `Aa`  | **Diferenciar maiúsculas e minúsculas** — `Product` deixa de ser equivalente a `product`.                                     |
| `ab`  | **Palavra inteira** — busca o termo apenas quando ele aparece como uma palavra completa (busca `product`, ignora `products`). |
| `.*`  | **Expressão regular** — interpreta o termo como regex (ex.: `product-(card\|info)`).                                          |