Navegar pela Visualização de código

Na Visualização de código, é possível ver outros arquivos do projeto, pular para vários locais do documento e pesquisar no código.

Procurar arquivos

Quando o Google Web Designer está na Visualização de código, o painel Arquivos à esquerda exibe uma lista de arquivos e subpastas na pasta do projeto. O painel é atualizado automaticamente para refletir as mudanças na lista.

Abrir arquivos

Selecione um arquivo no painel para abri-lo em uma nova guia. É possível acessar os seguintes tipos de arquivo:

• Arquivos de origem .html criados pelo Google Web Designer
• Outros arquivos .html*
• .css*
• .js*
• .json*
• .svg*
• .xml*

^{*Somente para edição na Visualização de código}

Também é possível abrir arquivos de imagem (.jpg/.jpeg, .png e .gif) para visualização. Passe o mouse sobre o nome do arquivo de imagem no painel "Arquivos" para ver uma miniatura.

Os arquivos que o Google Web Designer não consegue abrir ficam destacados em cinza.

Para abrir arquivos de outros projetos ou pastas, use o comando de menu Arquivo > Abrir...

Filtrar a lista de arquivos

Insira parte de um nome de arquivo no campo Filtrar arquivos  para mostrar somente os resultados correspondentes.

Ocultar o painel "Arquivos"

Clique no botão Recolher no canto superior direito do painel "Arquivos" para ocultar a lista de documentos. Clique no botão Expandir para abrir o painel novamente.

Navegar pelo documento

Se você selecionar um elemento na Visualização de design e mudar para a de código, o cursor será posicionado no código relevante para o elemento selecionado.

Ir para uma linha

Clique no número da linha ou coluna na barra de rodapé para inserir um novo valor e pressione Enter.

Usar o minimapa

O minimapa no lado direito da janela exibe uma versão em miniatura de todo o documento na Visualização de código. A parte do código visível no editor é destacada no minimapa.

Clique no minimapa para ir à parte correspondente do documento ou arraste para cima e para baixo a fim de usar a rolagem.

É possível desativar o minimapa nas suas preferências.

Pesquisar no código

Para encontrar texto:

1. Acesse Editar > Localizar ou pressione Ctrl+F (Windows) ou ⌘+F (Mac) para abrir a barra de pesquisa na parte inferior da janela.
2. Digite o termo de pesquisa no campo Localizar...
3. Ative as opções de pesquisa que você quer:
   • Expressões regulares (.*)
   • Diferenciar maiúsculas de minúsculas (Aa)
   • Palavras inteiras ()
   • Restringir à seleção ()
4. O Google Web Designer exibe o número total de correspondências e destaca a primeira delas após a posição do cursor.
   • Para encontrar a próxima correspondência: clique em ou pressione Ctrl+G (Windows) ou ⌘+G (Mac).
   • Para encontrar a correspondência anterior: clique em ou pressione Shift+Ctrl+G (Windows) ou Shift+⌘+G (Mac).
   • Para selecionar todas as correspondências e editá-las simultaneamente: clique em Localizar tudo.

Pressione Esc ou clique no X para fechar a barra de pesquisa.

Para localizar e substituir texto:

1. Acesse Editar > Localizar/Substituir ou pressione Ctrl+Shift+F (Windows) ou ⌘+Shift+F (Mac) para abrir a barra de pesquisa e substituição na parte inferior da janela.
2. Insira o termo de pesquisa no campo Localizar... e o texto substituto no campo Substituir...
3. É possível usar as mesmas opções de localização acima, além de substituir o texto:
   • Para substituir a correspondência atual e encontrar a próxima, clique em Substituir.
   • Para substituir todas as correspondências, clique em Substituir tudo.

Alternar para a Visualização de design

Clique na Visualização de design no canto superior direito da janela.