Visual Studio Code com NVDA
Apresentação
O Visual Studio Code (VS Code) é amplamente reconhecido como uma das ferramentas mais versáteis e poderosas para desenvolvedores de software. Com sua interface rica em funcionalidades, suporte a uma ampla gama de linguagens de programação e uma vasta biblioteca de extensões, o VS Code destaca-se como a escolha preferencial de muitos profissionais. Entretanto, a acessibilidade dessa ferramenta é um aspecto fundamental que, muitas vezes, não recebe a devida atenção. Para pessoas com deficiência visual, utilizar um ambiente de desenvolvimento pode representar um desafio significativo. É aqui que o NVDA (NonVisual Desktop Access), um leitor de tela de código aberto, desempenha um papel crucial.
Este artigo tem como objetivo fornecer um guia abrangente sobre como utilizar o VS Code de maneira eficiente e acessível com o suporte do NVDA. Exploramos os principais aspectos e funcionalidades do VS Code, desde a navegação básica até a personalização avançada do ambiente de trabalho, passando pela instalação e gestão de extensões, utilização de terminais integrados e, claro, a proficiência no uso de atalhos de teclado.
Cada seção foi estruturada para oferecer uma visão clara e precisa de como o NVDA interage com o VS Code, proporcionando orientações passo a passo que visam facilitar o acesso e otimizar a produtividade de pessoas com deficiência visual no ambiente de desenvolvimento. Mais do que um simples manual, este artigo busca ser uma referência prática e acessível, capaz de auxiliar desenvolvedores com e sem deficiência visual a explorar todo o potencial do VS Code de forma inclusiva e eficaz.
Ao final deste texto, espera-se que as pessoas estejam não apenas familiarizadas com o VS Code e suas funcionalidades, mas também confiantes em sua capacidade de utilizar essa poderosa ferramenta de desenvolvimento de forma eficaz, acessível e alinhada às suas necessidades individuais. O objetivo é garantir que todas as pessoas, independentemente de suas habilidades visuais, possam participar plenamente do processo de desenvolvimento de software, contribuindo de maneira significativa e produtiva para a comunidade de tecnologia.
-
Leitor de telas: NVDA - primeiros passos
Disponível em: Leitor de telas: NVDA - primeiros passos -
Usando o Windows 11 com o NVDA
Disponível em: Usando o Windows 11 com o NVDA -
Computação para iniciantes
Disponível em: Computação para iniciantes
O último artigo é especialmente indicado para quem tem interesse em aprender a programar futuramente. A leitura desses artigos é fundamental para o entendimento completo deste guia. Caso você já tenha conhecimento básico sobre o NVDA e o Windows 11 com o NVDA, pode avançar para a próxima seção.
Download do Visual Studio Code
Para baixar o Visual Studio Code, acesse o site oficial: https://code.visualstudio.com/ e procure pelo botão de download.
Instalação do Visual Studio Code
Após o download, vá até a pasta de downloads do seu computador pelo Explorador de Arquivos e localize o arquivo de instalação, que geralmente tem um nome como "VSCodeSetup-x64-1.61.2.exe" (o número da versão pode variar).
Para instalar:
-
Executar o instalador:
- Para evitar problemas durante a instalação, é recomendável executar o instalador como administrador. Para isso, clique com o botão direito do mouse no arquivo (ou pressione Shift + F10) e procure por "Executar como administrador" no menu de contexto. Quando encontrar, pressione Enter.
-
Seguir as instruções de instalação:
- Pressione Alt + N para avançar para a próxima tela e siga as instruções de instalação.
- Pressione Alt + A para aceitar os termos de uso e a licença.
- Pressione Alt + N para avançar para continuar a instalação.
- Pressione Alt + I para iniciar a instalação.
- Dica: Você também pode navegar pelos botões usando a tecla Tab e pressionar Enter para selecioná-los.
Após a instalação, o Visual Studio Code estará disponível no menu Iniciar e um atalho será criado na área de trabalho. Para abrir o programa, pressione a tecla Windows para abrir o menu iniciar, digite "Visual Studio Code" e pressione a tecla Enter para abrir o programa.
O que é o Visual Studio Code?
O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft. Gratuito e de código aberto, é um dos editores mais populares entre desenvolvedores de software. É multiplataforma, estando disponível para Windows, macOS e Linux.
Características principais:
- Leve e rápido: Ideal para o desenvolvimento ágil e produtivo.
- Acessível para o NVDA: Permite que pessoas com deficiência visual utilizem o editor eficientemente.
- Suporte a várias linguagens: Oferece suporte a uma ampla gama de linguagens de programação como JavaScript, Python, C++, Java, PHP, entre outras.
- Extensível: Possui uma vasta biblioteca de extensões que permitem personalizar e estender suas funcionalidades.
A interface do VS Code é simples e intuitiva, dividida em várias áreas, cada uma com um propósito específico. A navegação é baseada em comandos de teclado, o que torna o VS Code acessível para pessoas com deficiência visual que utilizam leitores de tela como o NVDA.
NVDA e Visual Studio Code
O NVDA (NonVisual Desktop Access) consegue ler e interagir com a interface do VS Code. Assim como no Windows, a navegabilidade baseia-se em comandos de teclado e não em movimentos de mouse. Pode parecer um pouco complicado no início, mas com a prática, você se acostuma e se torna mais ágil.
Dica: Não se esqueça que o conhecimento básico em NVDA e a familiaridade com o uso do NVDA no Windows (preferencialmente no Windows 11) são essenciais.
Abrindo e configurando o Visual Studio Code
Para abrir o VS Code:
-
Pelo menu Iniciar:
- Pressione a tecla Windows para abrir o menu Iniciar.
- Digite "Visual Studio Code" e pressione a tecla Enter para abrir o programa.
-
Pela área de trabalho:
- Pressione Windows + D para ir para a área de trabalho.
- Navegue com as setas ou pressione a letra "V" até encontrar o ícone do VS Code.
- Pressione Enter para abrir o programa.
Primeira execução:
- Ao abrir o programa pela primeira vez, pode ser exibida uma tela de boas-vindas ou de notas sobre atualizações.
- Para navegar entre as opções, use as setas para cima e para baixo.
-
Para fechar a tela de boas-vindas:
- Pressione Ctrl + W para fechar a guia atual.
- Para verificar se a guia foi fechada, pressione Insert + Tab se o NVDA disser "grupo 1 do editor vazio seção com foco", significa que não há mais abas abertas.
Navegação básica no Visual Studio Code com NVDA
O VS Code possui áreas distintas que organizam sua interface:
-
Barra de Atividades (Seletor de Exibição):
- Localizada à esquerda.
- Contém ícones para acessar diferentes painéis, como Explorador de Arquivos, Buscar, Controle de Versão (Git), Depuração, Extensões, entre outros.
-
Marco Principal:
- Área central onde os arquivos abertos e a edição de código são exibidos.
-
Barra de Status:
- Localizada na parte inferior.
- Exibe informações sobre o projeto e o editor, como nome do arquivo, linguagem, posição do cursor, notificações, entre outros.
Alternando (navegando) entre as áreas:
-
Pressione F6: A cada pressionamento, o foco é movido para a próxima
área.
- Barra de Status: O NVDA dirá "Barra de Status nenhum problema botão" se não houver notificações.
- Barra de Atividades: O NVDA dirá "seletor de exibição ativo guia".
- Marco Principal: O NVDA dirá "principal marco 1 de grupo do editor vazio seção".
Mais informações sobre essas áreas e como navegar entre elas serão abordadas nas próximas seções deste guia.
Acessando menus
Na parte superior do VS Code, há uma barra de menus que pode ser acessada pressionando a tecla Alt. As opções do menu são:
- Arquivo submenu (Alt + A) 1 de 8
- Editar submenu (Alt + D) 2 de 8
- Seleção submenu (Alt + S) 3 de 8
- Ver submenu (Alt + V) 4 de 8
- Acessar submenu (Alt + C) 5 de 8
- Executar submenu (Alt + E) 6 de 8
- Terminal submenu (Alt + T) 7 de 8
- Ajuda submenu (Alt + J) 8 de 8
Observação: A maneira como as opções do menu foram apresentadas é como o NVDA as lê. Ou seja, ele diz o nome da opção no menu, a tecla de atalho para acessá-la e a posição dela no menu.
É possível usar as setas (para a esquerda e para a direita) para navegar entre as opções, ou acessar diretamente um submenu pressionando a tecla de atalho correspondente, como Alt + A para o submenu Arquivo.
Explorando a interface do Visual Studio Code com NVDA
A partir de agora serão exploradas as áreas do VS Code e como navegar entre elas com detalhes, desde as opções que existem dentro dos menus até a edição de arquivos.
Menus do Visual Studio Code com NVDA
A seguir estão as opções dos menus e submenus do VS Code, além de como acessá-los:
-
Arquivo submenu (Alt + A) 1 de 8
-
Novo Arquivo de Texto (Ctrl + N) 1 de 22:
Abre um novo arquivo de texto no editor de código. -
Novo Arquivo (Ctrl + Alt + Windows + N) 2 de 22:
Abre um novo arquivo no editor de código, não necessariamente de texto. -
Nova Janela (Ctrl + Shift + N) 3 de 22:
Abre uma nova janela do Visual Studio Code. -
Nova Janela com Perfil submenu 4 de 22:
Abre uma nova janela do Visual Studio Code com um perfil específico. O perfil é uma configuração personalizada do VS Code que permite ter várias janelas do VS Code com diferentes configurações. Você pode ter um perfil para desenvolvimento web, outro para desenvolvimento mobile, outro para desenvolvimento de jogos, etc. Essa opção abre um submenu com as opções de perfis disponíveis. Se não existir nenhum perfil criado, ao pressionar seta para a direita nessa opção o NVDA dirá "novo perfil 1 de 1" e você poderá criar um novo perfil caso deseje. Se não quiser criar um novo perfil, pressione a seta para a esquerda e o NVDA dirá "nova janela com perfil submenu 4 de 22". Então você poderá continuar navegando pelas opções do submenu de Arquivo com a seta para baixo. -
Abrir o Arquivo... (Ctrl + O) 5 de 22:
Abre um arquivo existente no editor de código. -
Abrir Pasta... (Ctrl + K Ctrl + O) 6 de 22:
Abre uma pasta no explorador de arquivos. Observação: a forma de pressionar atalhos como Ctrl + K Ctrl + O é pressionar a primeira tecla no caso o Ctrl e em seguida pressionar a segunda tecla no caso o K e em seguida a terceira tecla no caso O. -
Abrir Workspace a partir do Arquivo... 7 de 22:
Abre um workspace (espaço de trabalho) a partir de um arquivo, isso quer dizer que você pode abrir um arquivo e transformá-lo em um workspace. Um workspace é um conjunto de arquivos e pastas que você pode abrir e editar no VS Code. Por exemplo, você pode ter um workspace para um projeto de site, outro para um projeto de aplicativo, outro para um projeto de jogo, etc. -
Abrir Recente submenu 8 de 22:
Abre um submenu com os arquivos e pastas abertos recentemente no VS Code. Para acessar o submenu Abrir Recente, pressione a seta para a direita e o NVDA dirá "Reabrir o editor fechado (Ctrl + Shift + T) 1 de 7". Isso significa que a primeira opção do submenu Abrir Recente é Reabrir o editor fechado, ou seja, reabrir o último arquivo fechado no VS Code. As outras opções do submenu Abrir Recente são outros arquivos e pastas abertos recentemente no editor de código e a última opção é "Limpar recentemente aberto" que limpa a lista de arquivos e pastas abertos recentemente. Se você pressionar a seta para baixo, o NVDA irá se mover para a próxima opção do submenu Abrir Recente até chegar na última opção. Se você pressionar a seta para a esquerda, o NVDA irá se mover de volta para as opções do menu Arquivo com o foco em "Abrir Recente submenu 8 de 22". -
Adicionar Pasta ao Workspace... 9 de 22:
Adiciona uma pasta ao workspace. Isso quer dizer que você pode adicionar uma pasta ao workspace para que ela seja exibida no explorador de arquivos e você possa acessar os arquivos e pastas dessa pasta no VS Code. -
Salvar Workspace como... 10 de 22:
Salva o workspace atual como um novo workspace. Isso quer dizer que você pode salvar o workspace atual com um novo nome e em um novo local. -
Duplique Espaço de Trabalho 11 de 22:
Duplica o workspace atual. Isso quer dizer que você pode duplicar o workspace atual e trabalhar em uma cópia do workspace. Isso seria útil se você quisesse fazer alterações no workspace sem afetar o original. -
Salvar (Ctrl + S) 12 de 22:
Salva o arquivo atual. Isso quer dizer que você pode salvar as alterações feitas no arquivo atual. -
Salvar Como... (Ctrl + Shift + S) 13 de 22:
Salva o arquivo atual com um novo nome e em um novo local. Isso quer dizer que você pode salvar o arquivo atual com um nome diferente e em uma pasta diferente ou até mesmo em um novo formato. -
Salvar Tudo (Ctrl + K S) 14 de 22:
Salva todos os arquivos abertos no editor de código. Isso quer dizer que você pode salvar todas as alterações feitas nos arquivos abertos de uma só vez. Isso é útil quando você tem vários arquivos abertos e deseja salvar as alterações em todos eles. -
Compartilhar submenu 15 de 22:
Abre um submenu com opções para compartilhar, nesse submenu você pode exportar o perfil atual de configurações do VS Code e na segunda opção pode importar um perfil de configurações do VS Code. -
Salvamento Automático não marcado 16 de 22:
Marca o salvamento automático do arquivo atual. Isso quer dizer que você pode ativar o salvamento automático para que o arquivo seja salvo automaticamente a cada alteração feita. Isso é útil para evitar a perda de dados em caso de falha de energia ou travamento do computador. -
Preferências submenu 17 de 22:
Abre um submenu com opções de preferências do VS Code. Esse submenu pode ser acessado pressionando a seta para a direita na opção Preferências. As opções do submenu Preferências são:-
Perfil (Padrão) submenu 1 de 9:
Abre um submenu com opções de perfis de configurações do VS Code. O VS Code possui um perfil padrão que é o perfil de configurações padrão do editor de código. Nesse submenu você pode criar um novo perfil, editar um perfil existente, excluir um perfil, definir um perfil como padrão, importar um perfil, exportar um perfil, redefinir um perfil, redefinir todas as configurações e abrir o arquivo de configurações do perfil. -
Configurações (Ctrl + ,) 2 de 9:
Abre o arquivo de configurações do VS Code. Nesse arquivo você pode definir as configurações do editor de código, como a cor do tema, o tamanho da fonte, a indentação, a codificação, preferências de acessibilidade etc. -
Extensões (Ctrl + Shift + X) 3 de 9:
Abre a guia de extensões do VS Code. Nessa guia você pode buscar e instalar extensões para o editor de código, como temas, snippets, linters, debuggers, entre outras. -
Atalhos de Teclado (Ctrl + K Ctrl + S) 4 de 9:
Abre a lista de atalhos de teclado do VS Code. Nessa lista você pode ver todos os atalhos de teclado disponíveis no editor de código e também pode pesquisar por atalhos específicos. Isso é útil para memorizar os atalhos de teclado mais utilizados e para se tornar mais produtivo no VS Code. -
Configurar snippets 5 de 9:
Serve para configurar snippets no VS Code. Snippets são pedaços de código que podem ser inseridos no editor de código com um atalho de teclado. Por exemplo, você pode criar um snippet para inserir um bloco de código HTML, um bloco de código CSS, um bloco de código JavaScript, etc. Isso é útil para economizar tempo e digitar menos código manualmente. -
Tarefas 6 de 9:
Abre a lista de tarefas do VS Code. Nessa lista você pode criar e gerenciar tarefas, como a execução de scripts, a compilação de código, a execução de testes, entre outras. Isso é útil para automatizar tarefas repetitivas e para aumentar a produtividade no VS Code. -
Temas submenu 7 de 9:
Abre um submenu com opções de temas do VS Code. Nesse submenu você pode escolher tema de cores (Ctrl + K Ctrl + T), tema de ícone de arquivo e tema do ícone do produto. O tema de cores é a cor do editor de código (é aqui que você pode escolher um tema de alto contraste, Dark, Light, etc), o tema de ícone de arquivo é o ícone que é exibido ao lado do nome do arquivo no explorador de arquivos e o tema do ícone do produto é o ícone do VS Code que é exibido na barra de tarefas do Windows. -
Configurações de Backup e Sincronização 8 de 9:
Abre as configurações de backup e sincronização do VS Code. Nesse menu você pode configurar o backup e a sincronização das configurações do VS Code. Isso é útil para manter as configurações do editor de código sincronizadas entre diferentes computadores e para fazer backup das configurações em caso de perda de dados. -
Configurações de Serviços Online 9 de 9:
Abre as configurações de serviços online do VS Code. Nesse menu você pode configurar os serviços online do VS Code, como a integração com o GitHub, o Azure, o Docker, entre outros. Isso é útil para integrar o VS Code com serviços online e para facilitar o desenvolvimento de aplicativos e sites.
-
Perfil (Padrão) submenu 1 de 9:
-
Reverter Arquivo 18 de 22:
Reverte o arquivo atual para a última versão salva. Isso quer dizer que se você fez alterações no arquivo e não quer salvá-las, você pode reverter o arquivo para a última versão salva. -
Fechar o Editor (Ctrl + F4) 19 de 22:
Fecha o editor de código. Isso quer dizer que você pode fechar o arquivo e o editor de código. -
Fechar Pasta (Ctrl + K F) 20 de 22:
Fecha a pasta aberta no explorador de arquivos. Isso quer dizer que você pode fechar a pasta e o explorador de arquivos. -
Fechar Janela (Alt + F4) 21 de 22:
Fecha a janela do Visual Studio Code. Isso quer dizer que você pode fechar a janela do VS Code. -
Sair 22 de 22:
Fecha o Visual Studio Code.
Para sair do submenu Arquivo, pressione a tecla Esc e o NVDA dirá "Arquivo submenu (Alt + A) 1 de 8" isso significa que o foco voltou para o menu Arquivo e você pode continuar navegando pelas opções do menu com a seta para a direita.
-
Novo Arquivo de Texto (Ctrl + N) 1 de 22:
-
Editar submenu (Alt + D) 2 de 8
-
Desfazer (Ctrl + Z) 1 de 12:
Reverte a última ação realizada no editor de código. Por exemplo se você deletou um bloco de código e quer recuperá-lo, você pode pressionar Ctrl + Z para desfazer a ação. -
Refazer (Ctrl + Y) 2 de 12:
Refaz a última ação desfeita no editor de código. Por exemplo se você se arrependeu de desfazer uma ação, você pode pressionar Ctrl + Y para refazer a ação. -
Recortar (Ctrl + X) 3 de 12:
Recorta o texto selecionado no editor de código e o coloca na área de transferência. -
Copiar (Ctrl + C) 4 de 12:
Copia o texto selecionado no editor de código e o coloca na área de transferência. -
Colar (Ctrl + V) 5 de 12:
Cola o conteúdo da área de transferência na posição do cursor dentro do editor de código. -
Localizar (Ctrl + F) 6 de 12:
Abre a caixa de diálogo de localizar no editor de código. Nessa caixa de diálogo você pode buscar por um texto específico no arquivo. -
Substituir (Ctrl + H) 7 de 12:
Abre a caixa de diálogo de substituir no editor de código. Nessa caixa de diálogo você pode substituir um texto específico por outro no arquivo atual. -
Localizar nos Arquivos... (Ctrl + Shift + F) 8 de 12:
Abre a busca global no VS Code, permitindo localizar texto em todos os arquivos do projeto. -
Substituir nos Arquivos... (Ctrl + Shift + H) 9 de 12:
Abre a barra de busca e substituição global, permitindo localizar e substituir texto em todos os arquivos do projeto. Isso é útil para fazer a mesma alteração em vários arquivos ao mesmo tempo. -
Ativar/Desativar o Comentário de Linha (Ctrl + ;) 10 de 12:
Comenta ou descomenta a linha atual no editor de código. Isso é útil para adicionar comentários ao código e para desativar temporariamente uma linha de código. -
Ativar/Desativar o Comentário de Bloco (Shift + Alt + A) 11 de 12:
Comenta ou descomenta o bloco de código selecionado no editor de código. Isso é útil para adicionar comentários a um bloco de código e para desativar temporariamente um bloco de código. -
Emmet: Expandir Abreviação (Tab)
Expande a abreviação do Emmet no editor de código. O Emmet é um conjunto de abreviações que permitem escrever código HTML e CSS de forma mais rápida e eficiente. Por exemplo, você pode digitar "html:5" e pressionar Tab para expandir a abreviação em um esqueleto de documento HTML5. Isso é útil para escrever código HTML e CSS mais rapidamente.
Para sair do submenu "Editar", pressione a tecla Esc, e o NVDA dirá "Editar submenu (Alt + D) 2 de 8", indicando que o foco voltou para o menu "Editar". A partir daí, você pode continuar navegando pelas outras opções do menu usando a seta para a direita ou para a esquerda.
-
Desfazer (Ctrl + Z) 1 de 12:
-
Seleção submenu (Alt + S) 3 de 8
-
Selecionar Tudo (Ctrl + A) 1 de 16:
Seleciona todo o texto no editor de código. Se você tiver um arquivo aberto no VS Code e quiser selecionar todo o texto, você pode pressionar Ctrl + A para selecionar todo o texto. -
Expandir a Seleção (Shift + Alt + Right Arrow) 2 de 16:
Expande a seleção para a direita no editor de código. Isso quer dizer que se você tiver um texto selecionado e quiser expandir a seleção para a direita, você pode pressionar Shift + Alt + Seta para a direita que ele vai selecionando palavra por palavra no texto no sentido da seta para a direita (Right Arrow). -
Reduzir a Seleção (Shift + Alt + Left Arrow) 3 de 16:
Reduz a seleção para a esquerda no editor de código. Isso quer dizer que se você tiver um texto selecionado e quiser reduzir a seleção para a esquerda, você pode pressionar Shift + Alt + Seta para a esquerda que ele vai desselecionando palavra por palavra no texto no sentido da seta para a esquerda (Left Arrow). -
Copiar Linha para Cima (Shift + Alt + Up Arrow) 4 de 16:
Copia a linha atual para cima no editor de código. Isso quer dizer que se você tiver o cursor em uma linha e quiser copiar essa linha para cima, você pode pressionar Shift + Alt + Seta para cima. -
Copiar Linha para Baixo (Shift + Alt + Down Arrow) 5 de 16:
Copia a linha atual para baixo no editor de código. Isso quer dizer que se você tiver o cursor em uma linha e quiser copiar essa linha para baixo, você pode pressionar Shift + Alt + Seta para baixo. -
Mover Linha para Cima (Alt + Up Arrow) 6 de 16:
Move a linha atual para cima no editor de código. Isso significa que se você estiver com o cursor em uma linha e quiser mover essa linha para cima, você pode pressionar Alt + Seta para cima. -
Mover Linha para Baixo (Alt + Down Arrow) 7 de 16:
Move a linha atual para baixo no editor de código. Isso significa que se você estiver com o cursor em uma linha e quiser mover essa linha para baixo, você pode pressionar Alt + Seta para baixo. -
Duplicar a Seleção 8 de 16:
Duplica a seleção atual, criando uma cópia exatamente abaixo da seleção original. Isso é útil para duplicar um bloco de código ou uma linha de código no editor. -
Adicionar Cursor Acima (Ctrl + Alt + Up Arrow) 9 de 16:
Adiciona um novo cursor na linha acima da posição atual do cursor, útil para edição em múltiplas linhas ao mesmo tempo. -
Adicionar Cursor Abaixo (Ctrl + Alt + Down Arrow) 10 de 16:
Adiciona um novo cursor na linha abaixo da posição atual do cursor. Lembrando que Down Arrow (usada no atalho) é a seta para baixo. -
Adicionar Cursores nas Extremidades da Linha (Shift + Alt + I) 11 de
16:
Adiciona cursores em todas as extremidades de linhas dentro da seleção atual, permitindo edição simultânea. -
Adicionar Próxima Ocorrência (Ctrl + D) 12 de 16:
Seleciona a próxima ocorrência do texto ou código selecionado atualmente, permitindo edição em múltiplas ocorrências. -
Adicionar Ocorrência Anterior 13 de 16:
Seleciona a ocorrência anterior do texto ou código selecionado, similar à opção anterior, mas navegando para cima. -
Selecionar Todas as Ocorrências (Ctrl + Shift + L) 14 de 16:
Seleciona todas as ocorrências do texto ou código selecionado no documento atual. Isso é útil para edição em múltiplas ocorrências ao mesmo tempo. Por exemplo, se você quiser alterar todas as ocorrências de uma palavra em um arquivo, você pode selecionar a palavra e pressionar Ctrl + Shift + L para selecionar todas as ocorrências da palavra no arquivo. -
Alternar para Ctrl + Clique para Múltiplos Cursores 15 de 16:
Ativa ou desativa o modo de múltiplos cursores usando o comando Ctrl + Clique. Com isso ativado, você pode clicar em diferentes locais no documento e criar múltiplos cursores para edição simultânea. -
Modo de Seleção de Coluna 16 de 16:
Habilita o modo de seleção de coluna, que permite selecionar conteúdo em uma área retangular de texto, em vez de selecionar linha por linha.
-
Selecionar Tudo (Ctrl + A) 1 de 16:
-
Ver submenu (Alt + V) 4 de 8
-
Paleta de Comandos... (Ctrl + Shift + P) 1 de 14:
Abre a paleta de comandos, onde você pode digitar para acessar rapidamente qualquer comando ou configuração do VS Code. -
Abrir o Modo de Exibição... 2 de 14:
Abre um submenu onde você pode selecionar diferentes modos de exibição no VS Code, como o terminal integrado ou o depurador. -
Aparência 3 de 14:
Abre um submenu onde você pode ajustar a aparência do VS Code, incluindo opções para alternar o tema de cores, o layout de ícones e outros elementos visuais. -
Layout do Editor 4 de 14:
Abre um submenu que permite ajustar a disposição das janelas do editor, como dividir a tela em várias partes ou alterar o layout dos painéis. -
Explorador (Ctrl + Shift + E) 5 de 14:
Abre ou foca no explorador de arquivos, onde você pode navegar pelas pastas e arquivos do seu projeto. -
Pesquisar (Ctrl + Shift + F) 6 de 14:
Abre a barra de pesquisa global, permitindo que você busque texto em todos os arquivos do projeto. -
Controle do Código-Fonte (Ctrl + Shift + G) 7 de 14:
Abre ou foca na visão de controle de código-fonte, onde você pode gerenciar versões, commits e outras ações de controle de versão (por exemplo, Git). -
Executar (Ctrl + Shift + D) 8 de 14:
Abre ou foca no painel de execução, onde você pode iniciar depurações ou execuções de código. -
Extensões (Ctrl + Shift + X) 9 de 14:
Abre o painel de extensões, onde você pode procurar, instalar, desinstalar ou gerenciar as extensões do VS Code. -
Problemas (Ctrl + Shift + M) 10 de 14:
Abre o painel de problemas, que mostra erros, avisos e outras mensagens do código. -
Saída (Ctrl + Shift + U) 11 de 14:
Abre o painel de saída, onde você pode ver as saídas de várias operações, como compilação ou logs de execução. -
Console de Depuração (Ctrl + Shift + Y) 12 de 14:
Abre o console de depuração, onde você pode ver a saída do depurador e interagir com ele durante as sessões de depuração. -
Terminal (Ctrl + `) 13 de 14:
Abre o terminal integrado, onde você pode executar comandos de shell diretamente no VS Code. -
Quebra de Texto (Alt + Z) 14 de 14:
Alterna a quebra de linha no editor de código, permitindo que o texto ultrapasse o limite da tela ou seja quebrado em várias linhas.
-
Paleta de Comandos... (Ctrl + Shift + P) 1 de 14:
-
Acessar submenu (Alt + C) 5 de 8
-
Voltar (Alt + Left Arrow) 1 de 19:
Navega para a última posição do cursor antes da mudança de contexto, permitindo que você retorne rapidamente à posição anterior no código. -
Avançar (Alt + Right Arrow) 2 de 19:
Refaz o movimento do cursor que foi desfeito com a opção "Voltar", navegando para a próxima posição. -
Localização da Última Edição (Ctrl + K Ctrl + Q) 3 de 19:
Move o cursor para a última posição de edição no arquivo atual, permitindo que você retome rapidamente o trabalho onde parou. -
Alternar Editor 4 de 19:
Abre um submenu onde você pode alternar entre diferentes editores abertos no VS Code. -
Alternar Grupo 5 de 19:
Abre um submenu onde você pode alternar entre diferentes grupos de editores no VS Code. -
Ir para Arquivo... (Ctrl + P) 6 de 19:
Abre um painel de busca onde você pode digitar para abrir rapidamente um arquivo no projeto atual. -
Ir para o Símbolo no Workspace... (Ctrl + T) 7 de 19:
Abre um painel de busca onde você pode digitar para navegar até um símbolo (como uma função ou variável) em todo o workspace. -
Ir para Símbolo no Editor... (Ctrl + Shift + O) 8 de 19:
Abre um painel de busca onde você pode digitar para navegar até um símbolo (como uma função ou variável) no arquivo atual. -
Ir para Definição (F12) 9 de 19:
Move o cursor para a definição do símbolo (como uma função ou variável) atualmente selecionado. -
Ir para Declaração 10 de 19:
Move o cursor para a declaração do símbolo atualmente selecionado. -
Ir para Definição de Tipo 11 de 19:
Move o cursor para a definição do tipo do símbolo atualmente selecionado, útil em linguagens fortemente tipadas. -
Ir para Implementações (Ctrl + F12) 12 de 19:
Navega para as implementações de uma interface ou classe abstrata. -
Ir para Referências (Shift + F12) 13 de 19:
Exibe todas as referências do símbolo atualmente selecionado no projeto. -
Ir para Linha/Coluna... (Ctrl + G) 14 de 19:
Abre uma caixa de diálogo onde você pode digitar o número da linha ou coluna para mover o cursor diretamente para essa posição. -
Ir para Colchetes (Ctrl + Shift + ]) 15 de 19:
Move o cursor para o colchete correspondente mais próximo, como o de uma função ou bloco de código. -
Próximo Problema (F8) 16 de 19:
Move o cursor para o próximo problema (erro ou aviso) no arquivo ou projeto. -
Problema Anterior (Shift + F8) 17 de 19:
Move o cursor para o problema anterior no arquivo ou projeto. -
Próxima Alteração (Alt + F3) 18 de 19:
Navega para a próxima alteração no arquivo, útil para revisão de mudanças em controle de versão. -
Alteração Anterior (Shift + Alt + F3) 19 de 19:
Navega para a alteração anterior no arquivo. Ou seja, se você estiver em uma alteração e quiser voltar para a anterior, você pode pressionar Shift + Alt + F3.
-
Voltar (Alt + Left Arrow) 1 de 19:
-
Executar submenu (Alt + E) 6 de 8
-
Iniciar a Depuração (F5) 1 de 17:
Inicia o processo de depuração do código atualmente aberto no VS Code. Isso significa que o código será executado passo a passo, permitindo a inspeção de variáveis e o fluxo de execução. -
Executar sem Depuração (Ctrl + F5) 2 de 17:
Executa o código sem iniciar a depuração. Isso permite rodar o código rapidamente sem parar em pontos de interrupção. -
Interromper a Depuração (Shift + F5) 3 de 17:
Para o processo de depuração atual. Isso significa que a execução do código será interrompida e a depuração será finalizada. -
Reiniciar a Depuração (Ctrl + Shift + F5) 4 de 17:
Reinicia o processo de depuração desde o início, mantendo as mesmas configurações e pontos de interrupção. -
Abrir as Configurações 5 de 17:
Abre as configurações de depuração do projeto atual. Aqui, você pode ajustar as configurações específicas para a depuração do seu código. -
Adicionar Configuração... 6 de 17:
Adiciona uma nova configuração de depuração ao projeto. Isso é útil para definir como o código será depurado em diferentes ambientes ou situações. -
Contornar (F10) 7 de 17:
Avança para a próxima instrução de código sem entrar em funções. Isso é útil para passar por cima de chamadas de função sem entrar em seu código interno. -
Intervir (F11) 8 de 17:
Entra na próxima instrução de código, incluindo funções. Isso permite ver o fluxo de execução dentro de funções chamadas. -
Sair (Shift + F11) 9 de 17:
Sai da função atual e retorna ao código chamador. Isso é útil para concluir a depuração dentro de uma função e continuar a depuração no nível superior. -
Continuar (F5) 10 de 17:
Continua a execução do código até que o próximo ponto de interrupção seja encontrado. Isso permite avançar rapidamente durante a depuração. -
Ativar/Desativar o Ponto de Interrupção (F9) 11 de 17:
Alterna o ponto de interrupção na linha atual. Se um ponto de interrupção já estiver definido, ele será removido, e se não estiver, será adicionado. -
Novo Ponto de Interrupção 12 de 17:
Abre um submenu onde você pode definir novos tipos de pontos de interrupção, como pontos de interrupção condicionais, de função, ou de exceção. -
Habilitar Todos os Pontos de Interrupção 13 de 17:
Habilita todos os pontos de interrupção definidos no código atual. -
Desabilitar Todos os Pontos de Interrupção 14 de 17:
Desabilita todos os pontos de interrupção definidos, permitindo a execução do código sem interrupções. -
Remover Todos os Pontos de Interrupção 15 de 17:
Remove todos os pontos de interrupção definidos no código, limpando todas as interrupções. -
Instalar Depuradores Adicionais... 16 de 17:
Abre uma opção para instalar depuradores adicionais, permitindo depuração em outras linguagens ou ambientes. -
Mostrar Configurações (Ctrl + ,) 17 de 17:
Abre as configurações gerais do Visual Studio Code, permitindo ajustes nas preferências do editor.
-
Iniciar a Depuração (F5) 1 de 17:
-
Terminal submenu (Alt + T) 7 de 8
-
Novo Terminal (Ctrl + Shift + `) 1 de 14:
Abre um novo terminal integrado no VS Code. Isso permite executar comandos de shell diretamente dentro do editor, sem precisar alternar para outro aplicativo. -
Dividir o Terminal (Ctrl + Shift + 5) 2 de 14:
Divide o terminal atual em duas partes, permitindo que você trabalhe com dois terminais simultaneamente na mesma janela. -
Executar a Tarefa... 3 de 14:
Abre uma lista de tarefas configuradas no VS Code para que você possa escolher e executar uma delas. Tarefas são scripts ou comandos que você pode configurar para automatizar processos. -
Executar Tarefa de Build... (Ctrl + Shift + B) 4 de 14:
Executa a tarefa de build configurada para o projeto. Isso geralmente envolve a compilação do código ou a execução de scripts de build. -
Executar Arquivo Ativo 5 de 14:
Executa o arquivo atualmente ativo no editor. Isso é útil para rapidamente rodar o código que você está editando sem precisar sair do editor. -
Executar Texto Selecionado 6 de 14:
Executa o texto que está selecionado no editor como um comando no terminal. Isso é útil para testar rapidamente pequenas partes do código. -
Mostrar Tarefas em Execução... 7 de 14:
Mostra todas as tarefas que estão atualmente em execução no VS Code. Você pode monitorar o progresso ou gerenciar as tarefas diretamente. -
Reiniciar Tarefa em Execução... 8 de 14:
Reinicia uma tarefa que está atualmente em execução. Isso é útil se você precisar reexecutar uma tarefa sem precisar pará-la manualmente primeiro. -
Terminar a Tarefa... 9 de 14:
Termina uma tarefa que está atualmente em execução. Isso é útil para interromper uma tarefa que não é mais necessária ou que está demorando muito para concluir. -
Configurar Tarefas... 10 de 14:
Abre as configurações de tarefas, onde você pode definir, editar ou remover tarefas personalizadas que podem ser executadas no VS Code. -
Configurar Tarefa de Build Padrão... 11 de 14:
Define a tarefa de build padrão para o projeto. Isso permite que você configure qual tarefa será executada quando você acionar um build rápido.
-
Novo Terminal (Ctrl + Shift + `) 1 de 14:
-
Ajuda submenu (Alt + J) 8 de 8
-
Bem-vindo 1 de 17:
Abre a página de boas-vindas do VS Code, que fornece informações introdutórias e atalhos úteis para novos usuários. -
Mostrar Todos os Comandos (Ctrl + Shift + P) 2 de 17:
Abre a paleta de comandos, onde você pode digitar para acessar rapidamente qualquer comando ou configuração do VS Code. -
Documentação 3 de 17:
Abre a documentação oficial do Visual Studio Code, onde você pode encontrar guias detalhados sobre o uso do editor. -
Editor Playground 4 de 17:
Abre uma área de teste dentro do VS Code, onde você pode experimentar diferentes funcionalidades do editor sem afetar seu código real. -
Mostrar Notas de Versão 5 de 17:
Abre as notas de versão mais recentes do VS Code, mostrando as mudanças, correções e novos recursos introduzidos nas atualizações. -
Referência de Atalhos do Teclado (Ctrl + K Ctrl + R) 6 de 17:
Abre uma referência completa de todos os atalhos de teclado disponíveis no VS Code, permitindo que você os consulte e os memorize. -
Tutoriais em Vídeo 7 de 17:
Abre uma lista de tutoriais em vídeo que ensinam como usar diferentes recursos e funcionalidades do VS Code. -
Dicas e Truques 8 de 17:
Abre uma página com dicas e truques para melhorar sua eficiência e produtividade ao usar o VS Code. -
Junte-se a nós no YouTube 9 de 17:
Abre o canal oficial do Visual Studio Code no YouTube, onde você pode encontrar vídeos tutoriais e outras informações. -
Pesquisar Solicitações de Recursos 10 de 17:
Permite que você pesquise por solicitações de recursos feitas pela comunidade para ver quais funcionalidades podem ser adicionadas ao VS Code no futuro. -
Relatar Problema 11 de 17:
Abre um formulário para que você possa relatar problemas ou bugs que encontrou ao usar o VS Code. -
Exibir Licença 12 de 17:
Mostra a licença sob a qual o Visual Studio Code é distribuído, permitindo que você leia os termos legais. -
Política de Privacidade 13 de 17:
Abre a política de privacidade do VS Code, onde você pode ver como seus dados são tratados e protegidos. -
Ativar/Desativar Ferramentas para Desenvolvedores 14 de 17:
Alterna as ferramentas de desenvolvimento do VS Code, permitindo que você acesse funcionalidades avançadas de depuração e inspeção. -
Abrir o Explorador de processos 15 de 17:
Abre o explorador de processos, onde você pode monitorar e gerenciar os processos em execução dentro do VS Code. -
Verificar se há Atualizações... 16 de 17:
Verifica se há atualizações disponíveis para o VS Code e permite que você as instale. -
Sobre 17 de 17:
Exibe informações sobre a versão atual do VS Code, incluindo número da versão e detalhes do sistema.
-
Bem-vindo 1 de 17:
Em resumo, esse é o menu principal do Visual Studio Code, que fica na parte superior da janela e contém várias opções para acessar diferentes funcionalidades e configurações do editor como pode ser observado na lista anterior. Evidente que o menu foi descrito de forma resumida, não abordando todos os detalhes de cada opção nem os submenus de cada item interno do menu principal.
Recomenda-se fortemente que você explore o menu principal do VS Code por conta própria e experimente as diferentes opções para se familiarizar com o editor e descobrir como ele pode ser personalizado para atender às suas necessidades. Consulte a documentação oficial do Visual Studio Code para obter mais informações sobre alguma opção específica ou funcionalidade do editor.
Barra de Atividades ou Seletor de Exibição do VS Code
Como já foi dito anteriormente nesse texto, o Visual Studio Code possui uma barra de atividades ou seletor de exibição que fica na parte esquerda da tela e permite que você navegue entre as diferentes visualizações e painéis do editor. para chegar na barra de atividades pressione F6 repetidamente até que o NVDA anuncie "Seletor de exibição ativo guia". Use as teclas de Seta para Cima e Seta para Baixo para mover o foco entre os diferentes ícones na Barra de Atividades.
Os componentes da barra de atividades ou seletor de exibição do VS Code são:
-
Explorador de Arquivos
-
Descrição:
Exibe a estrutura de pastas e arquivos do projeto atual, permitindo que você navegue e gerencie os arquivos. -
Como acessar:
Pressione Ctrl + Shift + E para focar no Explorador de Arquivos e o NVDA anunciará "Explorador de Arquivos árvore". -
Interação:
Você pode navegar pelos diretórios (pastas) e arquivos usando as setas (para cima e para baixo) e selecionar arquivos com Enter. Por exemplo, imagine que você tenha um arquivo chamado "index.html" e deseja abri-lo. Para isso, navegue até o arquivo usando as seta para baixo e pressione a tecla Enter para abri-lo. -
Criação de um novo arquivo:
- Pressione Ctrl + Shift + E para focar no Explorador de Arquivos.
- Pressione Shift + Tab até encontrar o botão "New File" (Novo Arquivo) e pressione Enter.
- Digite o nome do arquivo, por exemplo "index.html" ou "script.js", e pressione Enter para criar o novo arquivo.
-
Criação de uma nova pasta:
- Pressione Ctrl + Shift + E para focar no Explorador de Arquivos.
- Pressione Shift + Tab até encontrar o botão "New Folder" (Nova Pasta) e pressione Enter.
- Digite o nome da pasta, por exemplo "images" ou "styles", e pressione Enter para criar a nova pasta.
-
Descrição:
-
Buscar
-
Descrição:
Ferramenta para pesquisar texto em arquivos do projeto atual, permitindo a localização de termos específicos. -
Como acessar:
Pressione Ctrl + Shift + F para focar na Pesquisa. Assim é possível pesquisar por um termo específico em todos os arquivos do projeto. Se você deseja pesquisar e substituir um termo específico em todos os arquivos do projeto, pressione Ctrl + Shift + H Isso abrirá a Pesquisa, mas dessa vez com a opção de substituir o termo pesquisado. -
Interação:
Digite o termo de pesquisa e pressione Enter para iniciar a pesquisa. Use as setas para cima e para baixo para navegar pelos resultados. Pressione Enter em um resultado para o abrir. No caso da Pesquisa e Substituição, digite o termo de pesquisa, depois pressione Tab para ir para o campo de substituição, digite o termo de substituição e pressione Enter para substituir o termo. Use Shift + Tab para voltar ao campo de pesquisa.
-
Descrição:
-
Controle de Versão (Git)
-
Descrição:
Essa opção permite que você gerencie o controle de versão do projeto com o Git diretamente do VS Code. Git é um sistema de controle de versão que é amplamente utilizado por desenvolvedores para rastrear e gerenciar as alterações no código-fonte de um projeto sem perder o histórico. O Git é a ferramenta de controle de versão mais popular e amplamente utilizada no mundo do desenvolvimento de software. Essa opção permite que você faça commits (salvar alterações), pull (atualizar o código do repositório remoto), push (enviar alterações para o repositório remoto), entre outras operações diretamente do VS Code. -
Como acessar:
Pressione Ctrl + Shift + G para focar no Controle de Versão. Assim é possível ver as alterações nos arquivos do projeto e fazer commits, pull, push, entre outras operações do Git. -
Interação:
Use as setas para cima e para baixo para navegar pelas alterações nos arquivos. Pressione Enter para abrir o arquivo e ver as alterações. Pressione Tab para ir para a área de mensagens de commit, digite a mensagem de commit e pressione Ctrl + Enter para fazer o commit. Pressione Tab até encontrar o botão de pull, push, entre outras operações e pressione Enter para executar a operação desejada e enviar as alterações para o repositório remoto. -
Observação:
Para usar o Controle de Versão (Git) no VS Code, é necessário que você tenha o Git instalado no seu computador e que o diretório do projeto seja um repositório Git. Evidentemente, você também precisa ter uma conta no GitHub, GitLab, Bitbucket ou outro serviço de hospedagem de repositórios Git para enviar suas alterações para um repositório remoto. Conhecimentos básicos de Git são necessários para usar essa funcionalidade. Se você desconhece o Git completamente, recomenda-se que você estude o Git antes de tentar usar essa funcionalidade. Existe uma documentação chamada "Começando - O Básico do Git" que pode ser acessada em: Começando - O Básico do Git. Ps: Não garantimos a acessibilidade total da página de documentação do Git.
-
Descrição:
-
Depuração
-
Descrição:
Ferramenta para depurar o código do projeto atual, permitindo que você inspecione variáveis, veja o fluxo de execução e encontre erros no código. Depurar é o mesmo que "debugar" o código, ou seja, encontrar e corrigir erros no código. -
Como acessar:
Pressione Ctrl + Shift + D para focar na Depuração. Assim é possível iniciar a depuração do código e inspecionar as variáveis. -
Interação:
Use as setas para cima e para baixo para navegar pelas opções de depuração. Pressione Enter para selecionar uma opção. Por exemplo, se você deseja iniciar a depuração do código, pressione Enter na opção "Iniciar a Depuração (F5)".
-
Descrição:
-
Extensões
-
Descrição:
Permite que você instale e gerencie extensões no VS Code. Extensões são pacotes de software que adicionam funcionalidades extras ao editor, como suporte a novas linguagens de programação, temas visuais, snippets de código (trechos de código reutilizáveis), entre outros recursos. -
Como acessar:
Pressione Ctrl + Shift + X para focar nas Extensões. Assim é possível pesquisar e instalar novas extensões no VS Code. -
Interação:
Na região de extensões, você pode pesquisar por extensões usando o campo de pesquisa, navegar pelas extensões recomendadas, populares ou instaladas. Use as setas para cima e para baixo para navegar pelas extensões. Pressione Enter para abrir a página da extensão e ver mais detalhes. Pressione Tab para ir para o botão de instalação e pressione Enter para instalar a extensão. Se você deseja desinstalar uma extensão, pressione Tab até encontrar o botão de desinstalação e pressione Enter para desinstalar a extensão. Se você deseja ativar ou desativar uma extensão, é só pressionar Tab até encontrar o botão de ativação e pressionar Enter para ativar ou desativar a extensão.
-
Descrição:
-
Copilot (se estiver disponível)
-
Descrição:
O Copilot é uma extensão de IA (Inteligência Artificial) desenvolvida pela GitHub e OpenAI que ajuda a escrever código fornecendo sugestões de código, snippets e documentação diretamente no editor. O Copilot é alimentado por um modelo de linguagem de IA treinado em milhões de linhas de código-fonte de código aberto. -
Como acessar:
Se o Copilot estiver disponível, ele aparecerá como um ícone na Barra de Atividades. Pressione Ctrl + Shift + P para abrir a Paleta de Comandos, digite "Copilot: Chat" e pressione a seta para baixo para procurar a opção Chat: Focar no Modo de Exibição GitHub Copilot e pressione Enter para abrir o Copilot chat no VS Code. -
Interação:
Use o Copilot chat para interagir com o assistente de IA e obter ajuda na escrita de código. Você pode digitar perguntas, solicitar sugestões de código, snippets ou documentação, e o Copilot responderá com as informações solicitadas.
Quando o chat for aberto, o foco estará no campo de digitação de mensagens. Digite sua pergunta ou solicitação e pressione Enter para enviar a mensagem. O Copilot responderá com as informações solicitadas.
Ao lado do campo de digitação de mensagens, você encontrará um botão de "iniciar chat por voz" que permite que você use a voz para interagir com o Copilot. Pressione Enter para ativar o chat por voz e fale sua pergunta ou solicitação. O Copilot responderá com as informações solicitadas. Para desativar o chat por voz, pressione Enter novamente no botão de "iniciar chat por voz".
Depois do botão de "iniciar chat por voz", você encontrará um botão de "anexar contexto" que permite que você forneça informações adicionais ao Copilot para ajudá-lo a entender melhor o contexto da sua pergunta ou solicitação. Pressione Enter para ativar o botão de "anexar contexto" e uma caixa de pesquisa será exibida. Digite o nome do arquivo do seu projeto que você quer que o Copilot leve em consideração e pressione Enter para anexar o contexto. O Copilot responderá com as informações solicitadas considerando os arquivos que você anexou como contexto.
-
Descrição:
Esses são os principais componentes da barra de atividades ou seletor de exibição do Visual Studio Code. No entanto, a barra de atividades pode conter outros ícones ou opções dependendo das extensões que você tiver instalado no editor.
No fim da barra de atividades, pode ser que não seja lido pelo NVDA, mas é possível de se encontrar duas opções usando a seta para baixo, passando por todos os ícones da barra de atividades. As opções são: "Contas" e "Configurações" ou "Gerenciar". A opção "Contas" permite que você faça login ou logout da sua conta da Microsoft, GitHub ou outra conta que você tenha vinculado ao VS Code. A opção "Configurações" ou "Gerenciar" permite que você acesse as configurações do editor, onde você pode personalizar o VS Code de acordo com suas preferências.
Principal marco
Anteriormente nesse texto, foi mencionado que o Visual Studio Code possui um marco principal, mas o que é um marco? Ou melhor, o que é um marco principal? Um marco é um elemento HTML que define uma região de conteúdo de importância principal em uma página ou aplicativo da web. O marco principal é um marco especial que define o conteúdo principal de uma página ou aplicativo da web. Ele é usado para identificar o conteúdo principal de uma página e é frequentemente usado por leitores de tela para navegar rapidamente até o conteúdo mais importante.
Mas, como assim "web"? O Visual Studio Code é um editor de código-fonte, não é uma página web. Sim, é verdade que o VS Code é um editor de código-fonte, mas ele é construído com Electron, que é uma estrutura de desenvolvimento de aplicativos de área de trabalho multiplataforma baseada em tecnologias web, como HTML, CSS e JavaScript. Isso significa que o VS Code é essencialmente uma aplicação web encapsulada em um aplicativo de área de trabalho. Por isso, ele ainda possui elementos HTML, como marcos, que são usados para estruturar o conteúdo da interface do usuário.
No Visual Studio Code, o marco principal é usado para identificar a área de edição de código, onde você pode escrever, editar e visualizar o código-fonte do projeto. O marco principal é uma parte essencial do editor, pois é onde a maior parte do trabalho de desenvolvimento é feito. Ao navegar pelo VS Code com um leitor de tela, você pode usar o marco principal para pular rapidamente para a área de edição de código e começar a trabalhar no código do projeto.
Componentes do Marco Principal:
- Editor de Código: Esta é a área onde você escreve, edita e visualiza o código. O editor ocupa a maior parte do Marco Principal e é o foco principal ao editar arquivos.
- Guias abertas: As guias representam arquivos ou documentos abertos. Você pode ter várias guias abertas ao mesmo tempo, permitindo alternar rapidamente entre diferentes arquivos.
- Divisão de Editores (Grupos): O VS Code permite dividir o editor em diferentes grupos, permitindo que você visualize e edite múltiplos arquivos lado a lado.
Navegação e Interação com o Marco Principal
-
Navegar entre guias:
- Ctrl + Tab: Use esta combinação de teclas para alternar (trocar) entre as guias de arquivos abertas no editor. O NVDA anunciará o nome do arquivo da guia selecionada.
- Ctrl + Sft + Tab: Voltar para a guia anterior.
- Ctrl + PgUp e Ctrl + PgDown: Navega entre as guias de forma linear (uma por vez). Por exemplo, imagine que você tenha três guias abertas no editor: "index.html", "style.css" e "script.js". Se você estiver na guia "index.html" e pressionar Ctrl + PgDown, você irá para a guia "style.css". Pressionando novamente Ctrl + PgDown, você irá para a guia "script.js". Para voltar, pressione Ctrl + PgUp. Isso é útil quando você tem muitas guias abertas e quer navegar entre elas de forma sequencial.
- Ctrl + W: Fecha a guia atualmente ativa (se você tiver mais de uma guia aberta). O NVDA anunciará o nome do próximo arquivo em foco após o fechamento da guia.
-
Navegar entre divisões de editores (grupos):
- Ctrl + 1, Ctrl + 2, Ctrl + 3, etc.: Use esta combinação de teclas para alternar entre os diferentes grupos de editores. Por exemplo, se você tiver dividido o editor em dois grupos (divisões), pressione Ctrl + 1 para focar no primeiro grupo e Ctrl + 2 para focar no segundo grupo.
- Ctrl + \: Use esta combinação de teclas para dividir o editor em dois grupos (divisões) verticalmente. O NVDA anunciará "Dividir editor para o lado direito".
- Ctrl + Sft + \: Use esta combinação de teclas para dividir o editor em dois grupos (divisões) horizontalmente. O NVDA anunciará "Dividir editor para baixo".
- Ctrl + Alt + Seta para a Direita ou Seta para a Esquerda: Move o editor ativo para o próximo ou anterior grupo. Exemplo: se você tem dois grupos abertos e o foco está no grupo da esquerda, pressione Ctrl + Alt + Seta para a Direita para mover o editor para o grupo da direita.
- Ctrl + W: Fecha o editor ativo (se você tiver mais de um grupo aberto). O NVDA anunciará o nome do próximo arquivo em foco após o fechamento do editor.
-
Navegar e interagir com o editor de código:
- Setas Esquerda/Direita: Move o cursor ao longo da linha, caractere por caractere.
- Setas para Cima/Baixo: Move o cursor entre as linhas. O NVDA anunciará o conteúdo da linha em foco.
- Home: Move o cursor para o início da linha atual.
- End: Move o cursor para o final da linha atual.
- Ctrl + Home: Move o cursor para o início do documento.
- Ctrl + End: Move o cursor para o final do documento.
- Ctrl + F: Abre a busca dentro do arquivo atual.
- Ctrl + H: Abre a busca com opção de substituição dentro do arquivo atual.
- F3: Encontra a próxima ocorrência do termo buscado.
- Shift + F3: Encontra a ocorrência anterior do termo buscado.
-
Navegar e interagir com texto:
- Shift + Seta para Esquerda/Direita: Seleciona o texto caractere por caractere.
- Shift + Seta para Cima/Baixo: Seleciona o texto linha por linha.
- Ctrl + Shift + Seta para Esquerda/Direita: Seleciona o texto palavra por palavra.
- Ctrl + Shift + Seta para Cima/Baixo: Seleciona o texto parágrafo por parágrafo.
- Ctrl + A: Seleciona todo o texto no arquivo.
- Ctrl + X: Recorta o texto selecionado.
- Ctrl + C: Copia o texto selecionado.
- Ctrl + V: Cola o texto da área de transferência no local do cursor.
- Ctrl + Z: Desfaz a última ação.
- Ctrl + Y: Refaz a última ação desfeita.
- NVDA + Barra de Espaço: Use este comando para alternar entre o Modo de Foco e o Modo de Navegação do NVDA. No editor de código, o Modo de Foco deve estar ativado para que você possa interagir diretamente com o texto e utilizar os atalhos de teclado mencionados.
Essas são algumas das principais teclas de atalho que você pode usar para navegar e interagir com o marco principal do Visual Studio Code. Existem muitas outras teclas de atalho disponíveis no editor, que podem ser usadas para realizar diferentes tarefas, como abrir arquivos, salvar alterações, executar comandos, entre outras operações. Você pode consultar a documentação oficial do VS Code para obter uma lista completa de atalhos de teclado disponíveis que te interessam.
Barra de Status
A Barra de Status é uma área na parte inferior da janela do Visual Studio Code que exibe informações úteis sobre o projeto atual, como o nome do arquivo aberto, a codificação do arquivo, a posição do cursor, o modo de inserção, a quantidade de linhas e colunas, entre outras informações.
Componentes da Barra de Status:
- Nome do arquivo: Exibe o nome do arquivo atualmente aberto no editor. Por exemplo, se você tiver um arquivo chamado "index.html" aberto, o nome do arquivo será exibido na Barra de Status.
- Linguagem de programação: Exibe a linguagem de programação do arquivo atualmente aberto no editor. Por exemplo, se você estiver editando um arquivo Go, a linguagem de programação Go será exibida na Barra de Status.
- Número da linha e coluna: Exibe a posição atual do cursor em termos de linha e coluna. Isso significa que a linha e a coluna em que o cursor está posicionado são exibidas na Barra de Status. Por exemplo, se o cursor estiver na linha 10 e na coluna 5, a posição será exibida como "Ln 10, Col 5".
- Configuração do Arquivo: Exibe a codificação do arquivo atualmente aberto no editor. Por exemplo, se o arquivo estiver codificado em UTF-8, a codificação UTF-8 será exibida na Barra de Status.
- Tipo de fim de linha: Exibe o tipo de fim de linha do arquivo atualmente aberto no editor. Tipo de fim de linha refere-se à forma como os caracteres de fim de linha são representados em um arquivo de texto. Existem três tipos de fim de linha comuns: LF (Line Feed), CR (Carriage Return) e CRLF (Carriage Return Line Feed). O tipo de fim de linha é exibido na Barra de Status para que você saiba como os caracteres de fim de linha estão sendo tratados no arquivo. Isso é útil ao trabalhar com arquivos de texto que podem ter sido criados em diferentes sistemas operacionais, como Windows, macOS ou Linux.
-
Espaços e tabulações:
Exibe a quantidade de espaços e tabulações usadas no arquivo atualmente aberto
no editor. Isso é útil para garantir a consistência na formatação do código e
evitar problemas de indentação. O que é identação? Indentação é o recuo de um
bloco de código em relação ao bloco pai. A indentação é usada para tornar o
código mais legível e organizado, facilitando a compreensão da estrutura do
código e a identificação de blocos de código aninhados. Por exemplo: se você tem
um bloco de código dentro de outro bloco de código, é comum recuar o bloco
interno para indicar que ele faz parte do bloco externo. Isso torna mais fácil
visualizar a estrutura do código e entender a relação entre os diferentes
blocos.
A quantidade de espaços e tabulações usadas no arquivo é exibida na Barra de Status para que você possa verificar se a formatação do código está correta e fazer ajustes conforme necessário.
Pessoa com deficiência visual precisa saber identar o código? Sim, a indentação é uma prática recomendada na programação que ajuda a tornar o código mais legível e organizado. A indentação é usada para estruturar o código, destacar a hierarquia dos blocos de código e facilitar a compreensão da lógica do programa. Uma boa indentação torna o código mais fácil de ler, entender e manter, o que é essencial para o desenvolvimento de software de qualidade. É importante que pessoas com deficiência visual também tenham o mesmo acesso a essas práticas recomendadas para que possam escrever código de forma eficaz e colaborar com outras pessoas no desenvolvimento de software, pois hoje em dia ninguém trabalha sozinho em um projeto de software. - Notificações: Exibe notificações sobre o status do projeto, como mensagens de erro, avisos, ou informações sobre a execução de tarefas. As notificações são exibidas na Barra de Status para que você possa ficar informado sobre o que está acontecendo no projeto e tomar as ações necessárias para corrigir problemas ou concluir tarefas. Outras notificações podem incluir mensagens de extensões, atualizações de extensões, mensagens de depuração, entre outras informações relevantes para o desenvolvimento do projeto.
Navegação e Interação com a Barra de Status
- Acessando a Barra de Status: Pressione F6 repetidamente até que o NVDA anuncie "Barra de Status". O foco estará agora em um dos componentes da Barra de Status.
- Movendo-se Entre os Componentes: Use as teclas Seta para a Direita e Seta para a Esquerda para navegar pelos diferentes componentes da Barra de Status. O NVDA anunciará cada componente conforme você se move por eles, indicando o nome do componente e, quando aplicável, o estado atual (como o número da linha e coluna ou a codificação do arquivo).
-
Interagindo com os Componentes:
- Enter: Pressione Enter em qualquer componente que seja interativo para acessar mais opções ou para modificar o estado do componente (por exemplo, mudar a codificação ou o tipo de final de linha).
- Tab: Dentro de menus ou listas que se abrem ao pressionar Enter, use Tab para navegar entre as opções.
- Setas para Cima/Baixo: Use as setas para cima/baixo para selecionar opções em menus contextuais, como ao mudar a codificação do arquivo ou o tipo de final de linha.
- Esc: Pressione Esc para sair de um menu ou lista sem fazer alterações.
Exemplo de Uso
- Verificar a Posição do Cursor: Navegue até o componente "Número de Linhas e Colunas" na Barra de Status usando as setas. O NVDA dirá algo como "Ln 12, Col 34", indicando que o cursor está na linha 12, coluna 34.
- Mudar a Codificação do Arquivo: Navegue até o componente "Codificação do Arquivo", pressione Enter para abrir as opções de codificação, use as setas para selecionar a nova codificação e pressione Enter para confirmar.
- Responder a Notificações: Se houver uma notificação, navegue até o componente "Notificações" e pressione Enter para visualizar os detalhes. Se necessário, use Tab para explorar as opções de ação relacionadas à notificação.
A Barra de Status do Visual Studio Code oferece uma visão geral importante do estado atual do arquivo e do ambiente de desenvolvimento. Com o NVDA, você pode navegar facilmente por essa área e interagir com os diferentes componentes para ajustar configurações ou responder a notificações, garantindo uma experiência de desenvolvimento mais fluida e eficiente.
Editando arquivos
Uma das tarefas mais comuns ao trabalhar com o Visual Studio Code é editar arquivos de código-fonte. O editor de código do VS Code oferece uma ampla gama de recursos e funcionalidades para facilitar a edição e a manipulação de arquivos, tornando o processo de desenvolvimento mais eficiente e produtivo.
Criando um novo arquivo
Pressione Ctrl + N para criar um novo arquivo. O NVDA irá anunciar "novo arquivo sem título", indicando que o novo arquivo foi criado e está pronto para edição.
Agora, precisamos salvar o arquivo como um arquivo HTML. Para isso, pressione Ctrl + S para abrir a caixa de diálogo "Salvar como". O NVDA irá anunciar "Salvar como" e você poderá digitar o nome do arquivo, como "index.html". Pressione Enter para salvar o arquivo.
Agora que o arquivo foi salvo, você pode começar a escrever o código HTML. Digite o seguinte código no arquivo:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>Meu Primeiro Site</title>
-
</head>
-
<body>
-
<h1>Olá, Mundo!</h1>
-
</body>
-
</html>
Observação: Não é preciso entender a fundo o código HTML neste momento, este será assunto de um próximo artigo. Entenda apenas que este é um código HTML básico que cria uma página web simples com um título e um cabeçalho.
No momento o importante é digitar o código no arquivo e salvar as alterações. Para isso, pressione Ctrl + S para salvar o arquivo. O NVDA irá anunciar "Salvo" para confirmar que as alterações foram salvas com sucesso.
Navegando pelo código-fonte com o NVDA
Agora que o código HTML está pronto, vamos aprender a navegar por ele utilizando o NVDA:
-
Movendo-se entre linhas:
Use as Setas para Cima e para Baixo para mover o cursor entre as linhas do código. O NVDA irá anunciar o conteúdo de cada linha conforme você navega. Um ponto de atenção é que o NVDA vai ler tudo que tem na linha, no começo pode parecer um pouco cansativo, mas com o tempo você vai se acostumar. Uma dica é criar um perfil no NVDA para programação, onde você pode configurar para que ele leia apenas o que você desejar, recomenda-se que nesse perfil a opção "grau de pontuação" esteja em "tudo" para ir aprendendo como o código é escrito. Depois, com mais prática, você pode mudar para "alguns" ou "nenhum". -
Movendo-se dentro de uma linha:
Use as Setas para a Esquerda e para a Direita para mover o cursor entre os caracteres da linha. O NVDA irá anunciar cada caractere conforme você navega. -
Ir para o início ou fim de uma linha:
Pressione Home para mover o cursor para o início da linha atual, ou End para ir ao final da linha. O NVDA anunciará a nova posição do cursor. -
Navegando por palavras:
Use Ctrl + Seta para a Direita para mover o cursor para a próxima palavra, ou Ctrl + Seta para a Esquerda para a palavra anterior. O NVDA anunciará cada palavra que você está navegando. -
Selecionando texto:
Para selecionar texto, pressione Shift enquanto pressiona a seta correspondente à direção que deseja selecionar. Por exemplo, para selecionar um caractere à direita, pressione Shift + Seta para a Direita. Para selecionar uma palavra à esquerda, pressione Shift + Ctrl + Seta para a Esquerda. Para selecionar uma linha inteira, pressione Shift + Seta para Cima ou Seta para Baixo. O NVDA irá anunciar o texto selecionado conforme você navega.
Com as alterações salvas e o código HTML pronto, o arquivo pode ser fechado pressionando Ctrl + W. O NVDA irá anunciar o nome do próximo arquivo em foco após o fechamento do arquivo.
Navegando entre arquivos
O Visual Studio Code permite que você abra vários arquivos ao mesmo tempo e alternar entre eles facilmente. Isso é útil quando você está trabalhando em um projeto com vários arquivos ou precisa consultar diferentes partes do código simultaneamente.
Para abrir um arquivo existente, pressione Ctrl + O para abrir a caixa de diálogo "Abrir Arquivo". O NVDA irá anunciar "Abrir Arquivo" e você poderá digitar o nome do arquivo que deseja abrir. Pressione Enter para confirmar a seleção do arquivo.
Para abrir outro arquivo, repita o processo acima. O VS Code manterá os arquivos abertos em guias na parte superior do editor, permitindo que você alternar entre eles facilmente.
Com vários arquivos abertos no VS Code, você pode navegar entre eles facilmente usando as teclas de atalho:
- Ctrl + Tab: Use esta combinação de teclas para alternar entre as guias de arquivos abertas no editor. O NVDA anunciará o nome do arquivo da guia selecionada.
- Ctrl + Sft + Tab: Voltar para a guia anterior.
- Ctrl + PgUp e Ctrl + PgDown: Navega entre as guias de forma linear (uma por vez). Por exemplo, imagine que você tenha três guias abertas no editor: "index.html", "style.css" e "script.js". Se você estiver na guia "index.html" e pressionar Ctrl + PgDown, você irá para a guia "style.css". Pressionando novamente Ctrl + PgDown, você irá para a guia "script.js". Para voltar, pressione Ctrl + PgUp. Isso é útil quando você tem muitas guias abertas e quer navegar entre elas de forma sequencial para saver quais arquivos estão abertos.
- Ctrl + 1, Ctrl + 2, Ctrl + 3, etc.: Se você tem vários arquivos abertos e deseja ir diretamente para um deles, você pode usar Ctrl + 1, Ctrl + 2, Ctrl + 3, etc., para focar diretamente na primeira, segunda, terceira aba, e assim por diante. O NVDA irá anunciar o nome do arquivo correspondente.
- Ctrl + W: Fecha a guia atualmente ativa (se você tiver mais de uma guia aberta). O NVDA anunciará o nome do próximo arquivo em foco após o fechamento da guia.
- Ctrl + K, Ctrl + W: Se você deseja fechar todos os arquivos abertos de uma vez, pressione Ctrl + K seguido de W. O NVDA irá confirmar o fechamento de todas as abas, deixando o VS Code com um espaço de trabalho vazio.
Outra maneira de navegar entre arquivos é utilizando o Explorador de Arquivos integrado no VS Code:
- Acessando o Explorador de Arquivos: Pressione Ctrl + Shift + E para abrir o Explorador de Arquivos. O NVDA anunciará "Explorador de Arquivos árvore", indicando que o foco está no painel do explorador.
- Navegando entre arquivos: Use as setas para cima e para baixo para navegar entre os arquivos e pastas no Explorador de Arquivos. O NVDA irá anunciar o nome do arquivo ou pasta conforme você navega.
- Abrindo um arquivo: Quando o arquivo desejado estiver selecionado, pressione Enter para abri-lo no editor. O NVDA anunciará o nome do arquivo aberto e o foco será movido para a área de edição.
- Reabrindo um arquivo fechado recentemente: Pressione Ctrl + Shift + T para reabrir o último arquivo fechado. O NVDA anunciará o nome do arquivo ao reabri-lo, permitindo que você retome o trabalho no ponto em que parou.
Com essas técnicas, você pode navegar facilmente entre os arquivos abertos no Visual Studio Code, alternando entre guias de arquivos e usando o Explorador de Arquivos para acessar e abrir arquivos no editor. Isso torna mais fácil gerenciar vários arquivos e pastas em um projeto, permitindo que você trabalhe de forma mais eficiente e produtiva.
Terminais integrados
O Visual Studio Code possui um terminal integrado que permite executar comandos de terminal diretamente no editor. Isso é útil para realizar tarefas de desenvolvimento como compilar código, executar scripts, gerenciar repositórios Git, entre outras operações, sem precisar sair do ambiente de desenvolvimento.
-
Acessando o terminal integrado:
Pressione Ctrl + ` (tecla acento grave, localizada ao lado do número 1 no teclado) para abrir o terminal integrado. O NVDA anunciará "Terminal", seguido do nome do shell padrão que está sendo usado (por exemplo, "PowerShell", "Bash", ou "Command Prompt"). -
Confirmando que o terminal está ativo:
Após abrir o terminal, o foco estará automaticamente na linha de comando do terminal. O NVDA irá anunciar algo como "Terminal 1: Shell", confirmando que o terminal está ativo e pronto para receber comandos. -
Executando comandos no terminal:
Para executar um comando, simplesmente digite o comando desejado e pressione Enter. Por exemplo, você pode digitar ls (no Linux ou macOS) ou dir (no Windows) para listar o conteúdo do diretório atual. O NVDA irá anunciar o comando enquanto você o digita e, após pressionar Enter, ele lerá a saída do comando. -
Lendo a saída do terminal:
Use Shift + Seta para Cima ou Shift + Seta para Baixo para navegar linha por linha através da saída do terminal. O NVDA lerá cada linha conforme você navega. -
Navegando entre múltiplos terminais:
Para alternar entre terminais abertos, use Ctrl + ` para abrir a lista de terminais disponíveis e Ctrl + Seta para Cima ou Ctrl + Seta para Baixo para mover o foco entre eles. O NVDA anunciará o nome do terminal ativo e o número de terminais abertos. -
Navegando pelo texto no terminal:
Para mover o cursor dentro da linha de comando, use as Setas para Esquerda e Direita. O NVDA anunciará o caractere ou palavra conforme você se move. -
Copiando e colando no terminal:
Use Ctrl + C para copiar texto e Ctrl + V para colar. O NVDA confirmará com "Copiado para a área de transferência" ou "Colado". -
Criando uma nova pasta:
Digite mkdir nome_da_pasta e pressione Enter. O NVDA lerá a linha de comando enquanto você a digita e confirmará a execução do comando. -
Navegando para um diretório específico:
Digite cd nome_da_pasta e pressione Enter. O NVDA confirmará que você mudou para o novo diretório. -
Listando arquivos no diretório atual:
No Windows, digite dir e pressione Enter; no Linux ou macOS, digite ls. O NVDA lerá a saída do comando, que consiste na lista de arquivos e pastas no diretório atual. -
Criando um novo arquivo:
Para criar um novo arquivo, digite touch novo_arquivo.txt (no Linux ou macOS) e pressione Enter. Isso criará um novo arquivo no diretório atual. -
Visualizando o conteúdo de um arquivo:
Digite cat nome_do_arquivo.txt (Linux ou macOS) ou type nome_do_arquivo.txt (Windows) e pressione Enter. O NVDA lerá o conteúdo do arquivo linha por linha. -
Abrindo um novo terminal:
Pressione Ctrl + Shift + ` para abrir um novo terminal. O NVDA anunciará "Terminal 2 de 2: Shell". -
Dividindo o terminal:
Pressione Ctrl + Shift + 5 para dividir o terminal. O NVDA anunciará "Terminal dividido". -
Fechando um terminal:
Para fechar o terminal ativo, pressione Ctrl + W. O NVDA confirmará o fechamento. -
Alternando entre o terminal e o editor de código:
Pressione Ctrl + ` para alternar entre o terminal e o editor de código. O NVDA anunciará onde o foco está. -
Copiando comandos do editor de código para o terminal:
Selecione o texto no editor, copie-o com Ctrl + C e cole-o no terminal com Ctrl + V. O NVDA confirmará as ações. -
Autocompletar comandos:
Pressione Tab para autocompletar comandos no terminal. O NVDA anunciará as sugestões disponíveis. -
Histórico de comandos:
Use Seta para Cima e Seta para Baixo para percorrer o histórico de comandos. O NVDA anunciará os comandos conforme você navega. -
Procurando na saída do terminal:
Use Ctrl + F para abrir a caixa de pesquisa no terminal e digitar o termo desejado. O NVDA destacará a palavra ou frase.
O terminal integrado do Visual Studio Code oferece uma maneira conveniente de executar comandos de terminal diretamente no editor, sem a necessidade de alternar entre diferentes aplicativos. Com o NVDA, você pode interagir com o terminal de forma eficiente, executando comandos, navegando pela saída e gerenciando múltiplos terminais para facilitar o desenvolvimento de software.
Usando extensões
As extensões são uma parte fundamental do Visual Studio Code, pois permitem estender e personalizar o editor de acordo com suas necessidades e preferências. Existem milhares de extensões disponíveis no Marketplace do VS Code, que oferecem recursos adicionais, suporte para diferentes linguagens de programação, integração com ferramentas externas, temas personalizados e muito mais.
Para trabalhar com extensões no Visual Studio Code, você pode seguir estes procedimentos:
-
Abrindo o painel de extensões:
Pressione Ctrl + Shift + X. O NVDA anunciará "Extensões", seguido pelo número de extensões instaladas e uma breve descrição da interface. -
Confirmando que o painel de extensões está ativo:
Após pressionar o atalho, o foco estará na barra de pesquisa de extensões, onde você pode buscar novas extensões para instalar. O NVDA confirmará isso ao anunciar "Campo de pesquisa de extensões". -
Pesquisando uma extensão:
No campo de pesquisa que está ativo, digite o nome ou palavra-chave da extensão que deseja instalar. Por exemplo, para instalar uma extensão de suporte à linguagem Python, digite "Python" e pressione Enter. O NVDA lerá os resultados da pesquisa conforme eles aparecem. -
Navegando pelos resultados da pesquisa:
Use as Setas para Cima e Setas para Baixo para navegar pelos resultados. O NVDA anunciará o nome da extensão, sua classificação por estrelas, o número de downloads e uma breve descrição. -
Selecionando e instalando uma extensão:
Quando encontrar a extensão desejada, pressione Enter para abrir a página de detalhes da extensão. O NVDA lerá o nome da extensão, seguido de uma descrição mais detalhada e as ações disponíveis (como instalar ou avaliar a extensão). Para instalar, pressione Tab até encontrar o botão "Instalar" e, em seguida, pressione Enter. O NVDA anunciará "Instalando", e após a conclusão, confirmará com "Instalação concluída". -
Verificando a instalação:
Após a instalação, a extensão estará disponível para uso. O NVDA anunciará "Instalada" no botão de instalação, que agora pode ter mudado para "Desinstalar" ou "Desativar", confirmando que a extensão foi instalada corretamente. -
Visualizando extensões instaladas:
Pressione Ctrl + Shift + X para abrir o painel de extensões. Em seguida, pressione Tab até o NVDA anunciar "Extensões instaladas". Este é o local onde todas as extensões atualmente instaladas estão listadas. -
Navegando pelas extensões instaladas:
Use as Setas para Cima e Setas para Baixo para navegar pela lista de extensões instaladas. O NVDA anunciará o nome de cada extensão, seguido por sua descrição e ações disponíveis. -
Desinstalando ou desativando uma extensão:
Para desinstalar uma extensão, selecione a extensão desejada na lista e pressione Enter para abrir a página de detalhes. Em seguida, pressione Tab até encontrar o botão "Desinstalar" e pressione Enter. O NVDA confirmará a remoção da extensão. Se você preferir desativar a extensão temporariamente, localize o botão "Desativar" usando a tecla Tab e pressione Enter. O NVDA anunciará que a extensão foi desativada. -
Atualizando extensões:
Quando há atualizações disponíveis para uma extensão, o NVDA anunciará isso ao navegar pelas extensões instaladas. Para atualizar uma extensão, selecione a extensão na lista e pressione Enter para abrir a página de detalhes. Pressione Tab até encontrar o botão "Atualizar" e pressione Enter. O NVDA confirmará a atualização. -
Acessando as configurações da extensão:
Após instalar uma extensão, muitas delas oferecem opções de configuração. Para acessar essas opções, vá até a extensão instalada no painel de extensões e pressione Enter para abrir a página de detalhes. Pressione Tab até encontrar o botão "Gerenciar" e, em seguida, pressione Enter. Isso abrirá um submenu com opções como "Configurações", "Documentação" e "Atalhos de teclado". -
Ajustando as configurações:
Se a extensão oferece opções de configuração, selecionar "Configurações" levará você às configurações específicas da extensão. O NVDA lerá cada configuração conforme você navega com as Setas para Cima e Baixo. -
Consultando a documentação da extensão:
Para acessar a documentação, vá até a extensão instalada no painel de extensões e pressione Enter. Em seguida, pressione Tab até encontrar o botão "Documentação" e pressione Enter. O NVDA abrirá uma nova aba com as informações detalhadas sobre a extensão. -
Visualizando extensões recomendadas:
No painel de extensões, pressione Tab até o NVDA anunciar "Extensões recomendadas". Esta seção contém uma lista de extensões sugeridas com base nas suas atividades ou no tipo de projeto em que você está trabalhando. -
Instalando extensões recomendadas:
Navegue pelas extensões recomendadas com as Setas para Cima e Baixo. Se encontrar algo interessante, siga os mesmos passos de instalação descritos anteriormente. -
Explorando extensões populares:
Se desejar ver as extensões mais populares, pressione Tab até o NVDA anunciar "Extensões populares". Aqui você encontrará extensões amplamente utilizadas e bem avaliadas pela comunidade de desenvolvedores. -
Verificando a compatibilidade:
Algumas extensões podem não ser compatíveis com a versão específica do VS Code que você está usando. O NVDA normalmente anunciará uma mensagem de aviso se uma extensão não for compatível. -
Utilizando comandos de extensões:
Muitas extensões adicionam comandos específicos que podem ser acessados pela Paleta de Comandos (pressionando Ctrl + Shift + P). O NVDA anunciará os comandos disponíveis conforme você digita. -
Sincronizando suas extensões:
Se você trabalha em múltiplos dispositivos, pode ser útil sincronizar suas extensões e configurações entre eles. Pressione Ctrl + Shift + P, digite "Sync: Turn On" e pressione Enter. O NVDA guiará você pelos passos para configurar a sincronização.
As extensões são uma parte essencial do Visual Studio Code, pois permitem personalizar o editor de acordo com suas preferências e necessidades específicas. Com o NVDA, você pode navegar pelo Marketplace de extensões, instalar, gerenciar e configurar extensões para aprimorar sua experiência de desenvolvimento de software.
Atalhos úteis
No VS Code, é essencial conhecer os atalhos de navegação para aumentar a eficiência durante o trabalho. Para abrir um novo arquivo, pressione Ctrl + N, e o NVDA anunciará "Novo arquivo sem título", indicando que o editor está pronto para uso. Se você deseja abrir um arquivo existente, use Ctrl + O, o que abrirá o diálogo "Abrir arquivo", e o NVDA dirá o caminho atual. Após navegar até o arquivo desejado, pressione Enter para abri-lo. Para salvar um arquivo, utilize Ctrl + S, e o NVDA confirmará a ação com "Salvo". Caso queira salvar com um novo nome ou local, pressione Ctrl + Shift + S para abrir o diálogo "Salvar como". Para fechar o arquivo ativo, use Ctrl + W, e o NVDA anunciará o nome do próximo arquivo em foco. Para alternar entre arquivos abertos, pressione Ctrl + Tab para ir ao próximo arquivo ou Ctrl + Shift + Tab para voltar ao anterior, e o NVDA informará o nome de cada arquivo conforme você alterna.
Ao navegar e editar código, as setas são muito úteis. As Setas Esquerda/Direita movem o cursor caractere por caractere na linha atual, enquanto as Setas para Cima/Baixo movem o cursor entre as linhas, com o NVDA lendo o conteúdo da linha em foco. Para mover-se mais rapidamente, use Ctrl + Seta para a Direita/Esquerda para avançar palavra por palavra, ou Home/End para ir ao início ou fim da linha. Se precisar selecionar texto, segure Shift e use as setas para selecionar caractere por caractere ou linha por linha. Para buscar ou substituir texto, pressione Ctrl + F para abrir a caixa de busca, e o NVDA anunciará "Pesquisar". Para substituir texto, use Ctrl + H e o NVDA guiará pelos campos de busca e substituição. Para ir diretamente a uma linha específica, Ctrl + G abre a caixa de diálogo "Ir para Linha", onde você pode digitar o número da linha desejada.
Quando se trata de gerenciamento do editor, você pode dividir a janela de várias formas. Use Ctrl + \\ para dividir o editor verticalmente e Ctrl + Shift + \\ para dividi-lo horizontalmente, com o NVDA anunciando a ação. Você pode alternar entre grupos de editores com Ctrl + 1, 2 ou 3, e o NVDA indicará o grupo em foco. Para fechar um grupo de editores, Ctrl + W funciona da mesma forma, e o NVDA confirmará o fechamento.
Se estiver trabalhando em um projeto, Ctrl + Shift + E foca no Explorador de Arquivos, com o NVDA anunciando "Explorador de Arquivos árvore", e você pode navegar usando as setas. Para executar comandos rapidamente, use Ctrl + Shift + P para abrir a Paleta de Comandos, onde o NVDA lerá cada comando conforme você navega. Para alternar entre o editor de código e o terminal integrado, utilize Ctrl + `, e o NVDA informará onde está o foco.
Durante a depuração de código, alguns atalhos são especialmente úteis. F5 inicia a depuração, com o NVDA anunciando "Iniciando depuração", e Shift + F5 a interrompe, confirmando a ação. Para avançar no código sem entrar em funções, pressione F10, e o NVDA anunciará a próxima linha. Caso queira entrar em funções, use F11, e o NVDA guiará durante a depuração.
Você pode personalizar atalhos de teclado para adaptá-los ao seu fluxo de trabalho. Pressione Ctrl + K, Ctrl + S para abrir a lista de atalhos de teclado, e o NVDA lerá cada um conforme você navega. Para alterar um atalho, selecione-o e pressione Enter para editar, e o NVDA confirmará a mudança após a modificação.
Por fim, para melhorar sua produtividade, memorize os atalhos mais utilizados, como os de navegação básica e busca, pois o uso frequente fortalecerá sua memória. Explore novos atalhos pela Paleta de Comandos e utilize múltiplos cursores com Ctrl + Alt + Seta para Cima/Baixo para editar várias linhas ao mesmo tempo, com o NVDA indicando que múltiplos cursores estão ativos.
Considerações finais
O Visual Studio Code (VS Code) é uma poderosa ferramenta de desenvolvimento que, quando combinada com o leitor de telas NVDA, oferece uma experiência acessível e eficiente para pessoas com deficiência visual. Ao longo deste texto, exploramos diversas funcionalidades e tópicos importantes que tornam o VS Code não apenas utilizável, mas também otimizado para desenvolvedoras e desenvolvedores que navegam e trabalham no ambiente de desenvolvimento com o suporte do NVDA.
Iniciamos pela abertura e configuração do VS Code, destacando a importância de se familiarizar com a interface, as áreas principais e a navegação básica. A organização da interface em áreas como o Seletor de Exibição, o Marco Principal e a Barra de Status permite que as pessoas usuárias do NVDA possam rapidamente localizar e interagir com as diferentes partes do editor, tornando o fluxo de trabalho mais fluido e menos dependente de alternâncias desnecessárias entre janelas.
Exploramos também a navegação entre arquivos e a utilização do terminal integrado, ambos essenciais para um trabalho eficiente no desenvolvimento de software. A capacidade de alternar rapidamente entre diferentes arquivos abertos e executar comandos diretamente no terminal integrado, sem sair do VS Code, é uma das maiores vantagens dessa ferramenta, permitindo que o código seja editado e testado em tempo real.
As extensões, outro ponto fundamental, foram abordadas como a chave para expandir as funcionalidades do VS Code. Com o NVDA, é possível explorar, instalar e gerenciar extensões de forma acessível, garantindo que o ambiente de desenvolvimento esteja sempre alinhado com as necessidades específicas de cada projeto.
Por fim, a importância dos atalhos de teclado não pode ser subestimada. A eficiência no uso do VS Code está intimamente ligada à proficiência em seus atalhos, que permitem realizar desde tarefas simples, como salvar um arquivo, até operações mais complexas, como depuração e navegação avançada entre o código. A personalização desses atalhos, adaptando o ambiente às preferências individuais, é um passo final que pode maximizar a produtividade e a satisfação no uso da ferramenta.
Em suma, o Visual Studio Code, em conjunto com o NVDA, provou ser um ambiente de desenvolvimento acessível, robusto e altamente personalizável. A familiaridade com as áreas do editor, a proficiência em navegação e comandos, a utilização estratégica de extensões e a maestria nos atalhos de teclado formam a base para um fluxo de trabalho eficiente, acessível e produtivo para pessoas com deficiência visual no desenvolvimento de software. O contínuo aprendizado e adaptação dessas ferramentas garante que o VS Code permaneça um aliado poderoso na jornada de desenvolvimento de cada pessoa usuária.
Referências
- Visual Studio Code - Documentação oficial. Disponível em: Documentação do VS Code
- Visual Studio Code - Atalhos de teclado. Disponível em: Atalhos de teclado do VS Code
- Visual Studio Code - Configurações do editor. Disponível em: Configurações do editor no VS Code