Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Nesta breve introdução ao editor de código no Visual Studio, veremos algumas das maneiras pelas quais o Visual Studio facilita a escrita, a navegação e a compreensão do código.
Sugestão
Se você ainda não instalou o Visual Studio, vá para a página de downloads do Visual Studio para instalá-lo gratuitamente. Para obter mais informações sobre como obter o serviço de linguagem para TypeScript, consulte Suporte a TypeScript.
Este artigo pressupõe que você já esteja familiarizado com o desenvolvimento JavaScript. Se não estiver, sugerimos que consulte primeiro um tutorial, como Criar uma aplicação Node.js e Express .
Adicionar um novo arquivo de projeto
Você pode usar o IDE para adicionar novos arquivos ao seu projeto.
Com o projeto aberto no Visual Studio, clique com o botão direito do mouse em uma pasta ou no nó do projeto no Gerenciador de Soluções (painel direito) e escolha Adicionar>Novo Item.
Se não vir todos os modelos de item, escolha Mostrar Todos os Modelose, em seguida, escolha o modelo de item.
Na caixa de diálogo Novo Arquivo , na categoria Geral , escolha o tipo de arquivo que deseja adicionar, como Arquivo JavaScript, e escolha Abrir.
O novo arquivo é adicionado ao seu projeto e é aberto no editor.
Use o IntelliSense para completar palavras
O IntelliSense é um recurso inestimável quando você está codificando. Ele pode mostrar informações sobre membros disponíveis de um tipo ou detalhes de parâmetros para diferentes sobrecargas de um método. No código a seguir, quando você digita Router(), você vê os tipos de argumento que você pode passar. Isso é chamado de ajuda de assinatura.
Você também pode usar o IntelliSense para completar uma palavra depois de digitar caracteres suficientes para desambiguá-la. Se você colocar o cursor após a data cadeia de caracteres no código e digitar geta seguir, o IntelliSense mostrará funções definidas anteriormente no código ou definidas em uma biblioteca de terceiros que você adicionou ao seu projeto.
O IntelliSense também pode mostrar informações sobre tipos quando você passa o mouse sobre elementos de programação.
Para fornecer informações do IntelliSense, o serviço de linguagem pode usar os arquivos d.ts do TypeScript e comentários JSDoc. Para as bibliotecas JavaScript mais comuns, os arquivos d.ts são adquiridos automaticamente. Para obter mais detalhes sobre como as informações do IntelliSense são adquiridas, consulte JavaScript IntelliSense.
Verificar sintaxe
O serviço de linguagem usa ESLint para fornecer verificação de sintaxe e alinhamento. Se você precisar definir opções para verificação de sintaxe no editor, selecione Opções de Ferramentas>>JavaScript/TypeScript>Linting. As opções de linting apontam para o ficheiro de configuração ESLint global.
No código a seguir, você verá realce de sintaxe verde (rabiscos verdes) na expressão. Passe o cursor sobre o destaque de sintaxe.
A última linha desta mensagem informa que o serviço linguístico esperava uma vírgula (,). O rabisco verde indica um aviso. Rabiscos vermelhos indicam um erro.
No painel inferior, você pode clicar na guia Lista de Erros para ver o aviso e a descrição, juntamente com o nome do arquivo e o número da linha.
Você pode corrigir esse código adicionando a vírgula (,) antes de "data".
Para obter informações adicionais sobre linterização, consulte Linting.
Comentar o código
A barra de ferramentas, que é a linha de botões sob a barra de menus no Visual Studio, pode ajudar a torná-lo mais produtivo à medida que codifica. Por exemplo, você pode alternar o modo de conclusão do IntelliSense (IntelliSense é um auxílio de codificação que exibe uma lista de métodos correspondentes, entre outras coisas), aumentar ou diminuir um recuo de linha ou comentar o código que você não deseja compilar. Nesta seção, comentaremos alguns códigos.
Selecione uma ou mais linhas de código no editor e, em seguida, escolha o botão Comentar as linhas selecionadas na 
. Se preferir usar o teclado, pressione Ctrl+KCtrl+C.
Os caracteres // de comentário JavaScript são adicionados ao início de cada linha selecionada para comentar o código.
Recolher blocos de código
Se precisar simplificar a visualização de algumas regiões do código, poderá desdobrá-las. Escolha a pequena caixa cinza com o sinal de menos dentro dela na margem da primeira linha de uma função. Ou, se você for um usuário de teclado, coloque o cursor em qualquer lugar no código do construtor e pressione Ctrl+M, Ctrl+M.
O bloco de código é reduzido apenas à primeira linha, seguido de uma reticência (...). Para expandir o bloco de código novamente, clique na mesma caixa cinza que agora tem um sinal de mais ou pressione Ctrl+MCtrl+M novamente. Esse recurso é chamado de Estrutura de Tópicos e é especialmente útil quando você está recolhendo funções longas ou classes inteiras.
Ver definições
O editor do Visual Studio facilita a inspeção da definição de um tipo, função, etc. Uma maneira é navegar até o arquivo que contém a definição, por exemplo, escolhendo Ir para Definição em qualquer lugar onde o elemento de programação é referenciado. Uma maneira ainda mais rápida de não desviar seu foco do arquivo em que você está trabalhando é usar Peek Definition. Vamos espreitar a definição do método render no exemplo abaixo.
Clique com o botão direito do rato em render e escolha Espiar Definição no menu de contexto. Ou pressione Alt+F12.
Uma janela pop-up aparece com a definição do render método. Pode deslocar-se dentro da janela pop-up, ou até verificar a definição de outro tipo a partir do código que está a visualizar.
Feche a janela de definição espiada escolhendo a pequena caixa com um "x" no canto superior direito da janela pop-up.
Ver dicas de incrustação
A partir da versão 17.12 do Visual Studio 2022, as anotações embutidas apresentam informações adicionais sobre o código-fonte renderizado inline. Isso geralmente é usado para mostrar tipos inferidos, nomes de parâmetros e outras informações implícitas do seu código diretamente no editor.
Para configurar dicas de incrustação:
Vá para Ferramentas > Opções > Editor de Texto > Todos os Idiomas > Sugestões de Incrustação e selecione uma opção para visualizar sugestões de incrustação.
Vá para Ferramentas > Opções > Editor de Texto > JavaScript/TypeScript > Advanced > General e configure as dicas de incrustação que deseja ocultar ou mostrar.
Por padrão, a maioria dessas opções está desativada.
Use trechos de código
O Visual Studio fornece trechos de código úteis que você pode usar para gerar rápida e facilmente blocos de código comumente usados.
Trechos de código estão disponíveis para diferentes linguagens de programação, incluindo JavaScript. Vamos adicionar um for loop ao seu arquivo de código.
Coloque o cursor onde deseja inserir o trecho, clique com o botão direito do mouse e escolha Inserir trecho>.
Uma caixa Inserir trecho aparece no editor. Escolha Geral e, em seguida, clique duas vezes no item para na lista.
Isso adiciona o trecho de for loop ao seu código:
for (var i = 0; i < length; i++) {
}
Você pode examinar os trechos de código disponíveis para o seu idioma ao escolher Editar>IntelliSense>Inserir Fragmentoe, em seguida, escolher a pasta do seu idioma.
Configurar o editor de texto
Você pode configurar outras opções do editor de texto para JavaScript e TypeScript escolhendo Opções de Ferramentas >> Editor de Texto > JavaScript/TypeScript.
As opções disponíveis incluem propriedades para controlar a formatação, validação de código e muitos outros aspetos do editor de texto.