Pesquisa de site

typescript - Visual Studio Code compilar ao salvar

Como posso configurar o Visual Studio Code para compilar arquivos TypeScript ao salvar?

Vejo que é possível configurar uma tarefa para compilar o arquivo em foco usando $ {file} como argumento. Mas eu gostaria que isso fosse feito quando um arquivo fosse salvo.

Resposta #1

Atualização de maio de 2018:

A partir de maio de 2018, você não precisa mais criar tsconfig.json manualmente ou configurar o task runner.

  1. Execute tsc --init na pasta do seu projeto para criar o arquivo tsconfig.json (se você ainda não tiver um).
  2. Pressione Ctrl+Shift+B para abrir uma lista de tarefas no VS Code e selecione tsc: watch - tsconfig.json.
  3. Concluído! Seu projeto é recompilado a cada salvamento de arquivo.

Você pode ter vários arquivos tsconfig.json no seu espaço de trabalho e executar várias compilações ao mesmo tempo, se quiser (por exemplo, frontend e backend separadamente).

Resposta original:

Você pode fazer isso com comandos de Build:

Crie um tsconfig.json simples com "watch": true (isso instruirá o compilador a observar todos os arquivos compilados):

{
    "compilerOptions": {
        "target": "es5",
        "out": "js/script.js",
        "watch": true
    }
}

Observe que o array files é omitido, por padrão todos os arquivos *.ts em todos os subdiretórios serão compilados. Você pode fornecer quaisquer outros parâmetros ou alterar target/out, apenas certifique-se de que watch esteja definido como true.

Configure sua tarefa (Ctrl+Shift+P -> Configurar Executor de Tarefas):

{
    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "silent",
    "isShellCommand": true,
    "problemMatcher": "$tsc"
}

Agora pressione Ctrl+Shift+B para compilar o projeto. Você verá a saída do compilador na janela de saída (Ctrl+Shift+U).

O compilador irá compilar os arquivos automaticamente quando salvos. Para parar a compilação, pressione Ctrl+P -> > Tarefas: Encerrar Tarefa em Execução

Eu criei um modelo de projeto especificamente para esta resposta: typescript-node-basic

Resposta #2

Se você quiser evitar ter que usar CTRL+SHIFT+B e, em vez disso, quiser que isso ocorra sempre que você salvar um arquivo, você pode vincular o comando ao mesmo atalho da ação de salvar:

[
    {
        "key": "ctrl+s",          
        "command": "workbench.action.tasks.build" 
    }
]

Isso vai no seu keybindings.json - (acesse isso usando Arquivo -> Preferências -> Atalhos de Teclado).

Resposta #3

Se pressionar Ctrl+Shift+B parecer muito esforço, você pode ativar o "Auto Save" (Arquivo > Auto Save) e usar o NodeJS para monitorar todos os arquivos do seu projeto, e executar o TSC automaticamente.

Abra um prompt de comando do Node.JS, mude o diretório para a pasta raiz do seu projeto e digite o seguinte;

tsc -w

E voilà, cada vez que o VS Code salvar automaticamente o arquivo, o TSC irá recompilá-lo.

Esta técnica é mencionada em um post de blog;

http://www.typescriptguy.com/getting-started/angularjs-typescript/

Role para baixo até "Compilar ao salvar"

Artigos relacionados