Abrindo arquivos de código-fonte no Visual Studio Code

O experimento Arquivos de código aberto no Visual Studio Code permite que você use o DevTools do Microsoft Edge, mas edite seus arquivos no Visual Studio Code em vez de no editor de código da ferramenta DevTools Sources.

Ao usar esse experimento, se você usar o Visual Studio Code e usar o DevTools para alterar suas regras CSS, não precisará mais usar o editor de código na ferramenta Fontes do DevTools. Você pode simplesmente usar o editor de código no Visual Studio Code. Quando você ativar esse experimento, os arquivos locais receberão um tratamento diferente.

Configurando a edição de arquivos locais no Visual Studio Code

Primeiro, selecioneExperimentos>de configurações> do DevTools >Abra os arquivos de código no Visual Studio Code e, em seguida, reinicie o DevTools.

Com esse experimento habilitado, suponha que, no Microsoft Edge, você vá para um servidor local (como http://localhost ou http://127.0.0.1) ou abra um arquivo local.

Microsoft Edge com um arquivo local aberto

Ao abrir o DevTools, você é solicitado a identificar sua pasta raiz. Você pode recusar selecionando Fechar (x) ou selecionando o Don't show again botão. Você pode obter mais informações selecionando o Learn more link.

Ferramentas de desenvolvedor mostrando uma barra de informações solicitando que você identifique sua pasta raiz

Se você selecionar o botão Definir pasta raiz , o sistema operacional solicitará que você navegue até a pasta e selecione-a.

Escolhendo o local da pasta raiz usando o gerenciador de arquivos do seu sistema operacional

Depois de selecionar uma pasta raiz, você precisa conceder ao DevTools acesso total à pasta. Acima da barra de ferramentas, um prompt com os botões Permitir ou Negar pergunta se você deseja conceder permissão ao DevTools para acessar a pasta.

DevTools solicitando acesso à pasta

Depois de conceder a permissão, a pasta selecionada é adicionada como um Workspace no DevTools, na guia Workspace da ferramenta Fontes . Isso significa que qualquer arquivo editado no DevTools agora é aberto no Microsoft Visual Studio Code em vez de na ferramenta Fontes. Como indicador, mostramos um linked ícone ao lado do nome do arquivo. Neste exemplo, selecionaremos o base.css link na ferramenta Estilos .

Selecionar um link de arquivo na ferramenta Estilos abre o arquivo no Visual Studio Code

O DevTools abre uma instância do Visual Studio Code e mostra todos os arquivos na pasta raiz. O DevTools também abre o arquivo que você selecionou, rolou até a linha correta do seletor CSS.

O Visual Studio Code é aberto com os arquivos da pasta raiz e o arquivo selecionado aberto

Todas as alterações feitas no arquivo no DevTools agora serão sincronizadas com o Visual Studio Code. Por exemplo, se você alterar o background to be green para os estilos do corpo, a mesma regra CSS será adicionada automaticamente ao base.css arquivo no editor de código do Visual Studio Code.

As alterações no código na ferramenta Estilos agora são refletidas no código-fonte no Visual Studio Code

Alterar as configurações do workspace

Para alterar o comportamento dos arquivos de código aberto no experimento do Visual Studio Code, vá para a página Configurações do DevTools clicando em Configurações (o ícone de engrenagem) ou pressionando Shift+? e, em seguida, selecione a página Workspace:

O painel de configurações do espaço de trabalho mostrando várias opções

A página Configurações>do Workspace lista seus workspaces, juntamente com as seguintes opções de configuração:

Controle de interface do usuário Descrição
Caixa de seleção Arquivos de código aberto no Visual Studio Code Define se deseja abrir arquivos de código aberto no Visual Studio Code.
Caixa de seleção Salvar alterações do DevTools no disco Salva automaticamente as alterações do DevTools no disco.
Caixa de texto padrão de exclusão de pasta Exclui automaticamente pastas de uma pasta de espaço de trabalho.
Adicionar botão próximo às pastas excluídas Exclui uma pasta de um workspace específico.
Botão Adicionar pasta Adiciona um workspace adicional.
  • Last updated on