Desenvolver código JavaScript e TypeScript no Visual Studio sem projetos ou soluções

Com o Visual Studio 2017 ou posterior, é possível desenvolver o código sem projetos nem soluções, o que permite que você abra uma pasta de códigos e comece a trabalhar imediatamente com o suporte avançado do editor, como IntelliSense, pesquisa, refatoração, depuração, entre outros. Além desses recursos, as Ferramentas Node.js para Visual Studio adicionam suporte para criação de arquivos TypeScript, o gerenciamento de pacotes npm e a execução de scripts npm.

Para começar, selecione Arquivo>Abrir>Pasta na barra de ferramentas. O Gerenciador de Soluções exibe todos os arquivos na pasta, e você pode abrir qualquer um dos arquivos para começar a editar. Em segundo plano, o Visual Studio indexa os arquivos para habilitar recursos de npm, build e depuração.

Dica

Para usar um projeto Abrir Pasta, tente criar uma solução de acordo com o código Node.js existente. Em alguns cenários, esse método fornece melhor suporte a recursos no Visual Studio. Para criar o projeto, escolha Arquivo > Novo Projeto > JavaScript > Do código Node.js Existente e escolha a pasta do projeto como a origem.

Pré-requisitos

  • Visual Studio 2017 versão 15.8 ou versões posteriores
  • A carga de trabalho de Desenvolvimento do Node.js do Visual Studio deve ser instalada

Integração com npm

Se a pasta que você abrir contiver um arquivo package.json, clique com o botão direito do mouse em package.json para mostrar um menu de contexto (menu de atalho) específico do npm.

npm menu in Solution Explorer

No menu de atalho, você pode gerenciar os pacotes instalados pelo npm da mesma maneira que você gerencia pacotes de npm ao usar um arquivo de projeto.

Além disso, o menu também permite a execução de scripts definidos no elemento scripts no package.json. Esses scripts usarão a versão do Node.js disponível na variável de ambiente PATH. Os scripts são executados em uma nova janela. Essa é uma ótima maneira de executar scripts de build ou de execução.

Build e depuração

package.json

Se o package.json na pasta especificar um elemento main, o comando Depurar estará disponível no menu de atalho com clique do botão direito do mouse para package.json. Se você clicar nele, o node.exe será iniciado com o script especificado como seu argumento.

Arquivos JavaScript

Você pode depurar arquivos JavaScript clicando com o botão direito do mouse em um arquivo e selecionando Depurar no menu de atalho. Isso inicia o node.exe com esse arquivo JavaScript como seu argumento.

Observação

Se você não vir a opção de menu Depurar, talvez seja necessário criar o projeto a partir do código Node.js existente, conforme descrito anteriormente.

Arquivos TypeScript e tsconfig.json

Se não houver nenhum tsconfig.json presente na pasta, você poderá clicar com o botão direito do mouse em um arquivo TypeScript para ver os comandos do menu de atalho para criar e depurar esse arquivo. Ao usar esses comandos, você cria ou depura usando tsc.exe com as opções padrão. (É necessário criar o arquivo antes de depurar).

Observação

Ao compilar o código TypeScript, é usada a versão mais recente instalada no C:\Program Files (x86)\Microsoft SDKs\TypeScript.

Se houver um arquivo tsconfig presente na pasta, você poderá clicar com o botão direito do mouse em um arquivo TypeScript para ver um comando de menu para depurar esse arquivo TypeScript. A opção somente será exibida se não houver nenhum outFile especificado em tsconfig.json. Se houver um outFile especificado, você poderá depurar esse arquivo clicando com o botão direito do mouse em tsconfig.json e selecionando a opção correta. O arquivo tsconfig.json também oferece uma opção de build para permitir que você especifique as opções do compilador.

Observação

Encontre mais informações sobre o tsconfig.json na Página do manual do TypeScript tsconfig.json.

Testes de Unidade

Você pode habilitar a integração de teste de unidade no Visual Studio especificando uma raiz de teste em seu package.json:

{
    // ...
    "vsTest":{
        "testRoot": "./tests"
    }
    // ...
}

O executor de teste enumera os pacotes instalados localmente para determinar a estrutura de teste a ser usada. Se nenhuma das estruturas com suporte for reconhecida, o executor de teste padrão será ExportRunner. As outras estruturas com suporte são:

Depois de abrir o Gerenciador de Testes (escolha Teste>Windows>Gerenciador de Testes), o Visual Studio detecta e exibe os testes.

Observação

O executor de teste enumerará somente os arquivos JavaScript na raiz do teste. Se o aplicativo for escrito em TypeScript, você precisará criá-los primeiro.