Compilação do Visual Studio Code ao salvar

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

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

Atualização de maio de 2018:

Desde maio de 2018, você não precisa mais criar tsconfig.jsonmanualmente ou configurar o corredor de tarefas.

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

Você pode ter vários tsconfig.jsonarquivos no seu espaço de trabalho e executar várias compilações ao mesmo tempo, se desejar (por exemplo, front-end e back-end separadamente).

Resposta original:

Você pode fazer isso com os comandos Build:

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

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

Observe que a filesmatriz é omitida; por padrão, todos os *.tsarquivos em todos os subdiretórios serão compilados. Você pode fornecer outros parâmetros ou alterar target/ out, apenas verifique se watchestá definido como true.

Configure sua tarefa ( Ctrl+Shift+P-> Configure Task Runner):

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

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

O compilador compilará os arquivos automaticamente quando salvos. Para interromper a compilação, pressione Ctrl+P->> Tasks: Terminate Running Task

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

Se você deseja evitar ter que usar CTRL+ SHIFT+ Be, em vez disso, deseja que isso ocorra sempre que você salvar um arquivo, vincule o comando ao mesmo atalho da ação de salvar:

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

Isso ocorre em keybindings.json - (vá para Arquivo usando> Preferências -> Atalhos do teclado).

Se pressionar Ctrl+ Shift+ Bparecer muito trabalhoso, você pode ativar "Salvar automaticamente" (Arquivo> Salvar automaticamente) e usar o NodeJS para assistir a todos os arquivos em seu projeto e executar o TSC automaticamente.

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

tsc -w

E pronto, sempre que o VS Code salvar automaticamente o arquivo, o TSC o recompilará.

Essa técnica é mencionada em uma postagem do blog;

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

Role para baixo até "Compilar ao salvar"

Escreva uma extensão

Agora que o vscode é extensível, é possível conectar-se ao evento on save por meio de uma extensão. Uma boa visão geral das extensões de gravação para VSCode pode ser encontrada aqui: https://code.visualstudio.com/docs/extensions/overview

Aqui está um exemplo simples que apenas chama echo $filepathe gera stdout em um diálogo de mensagem:

import * as vscode from 'vscode';
import {exec} from 'child_process';

export function activate(context: vscode.ExtensionContext) {

    vscode.window.showInformationMessage('Run command on save enabled.');

    var cmd = vscode.commands.registerCommand('extension.executeOnSave', () => {

        var onSave = vscode.workspace.onDidSaveTextDocument((e: vscode.TextDocument) => {

            // execute some child process on save
            var child = exec('echo ' + e.fileName);
            child.stdout.on('data', (data) => {
                vscode.window.showInformationMessage(data);
            });
        });
        context.subscriptions.push(onSave);
    });

    context.subscriptions.push(cmd);
}

(Também mencionado nesta questão do SO: https://stackoverflow.com/a/33843805/20489 )

Extensão VSCode existente

Se você deseja instalar apenas uma extensão existente, aqui está uma que eu escrevi disponível na galeria VSCode: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

O código fonte está disponível aqui: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Eu lutei muito para conseguir o comportamento que desejo. Essa é a maneira mais fácil e melhor de compilar os arquivos TypeScript ao salvar, na configuração desejada, apenas ESTE arquivo (o arquivo salvo). É um task.json e um keybindings.json.

Em vez de criar um único arquivo e vincular Ctrl + S para acionar essa compilação, recomendo iniciar o tsc no modo de observação usando o seguinte arquivo task.json:

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

Isso criará o projeto inteiro e reconstruirá os arquivos que são salvos independentemente de como eles são salvos (Ctrl + S, salvamento automático, ...)

Atualizada

Na tua tsconfig.json

"compileOnSave": true, // change to true

se o problema persistir, siga um destes procedimentos:

Reinicie seu editor ou altere qualquer rota, reverta-o novamente e salve o aplicativo. Vai começar a compilar. ie

const routes: Routes = [
  {
    path: '', // i.e. remove , (comma) and then insert it and save, it'll start compile
    component: VersionsComponent
  }
]

Eu implementei a compilação ao salvar com a tarefa gulp usando gulp-typescript e construção incremental. Isso permite controlar a compilação o que você quiser. Observe minha variável tsServerProject, no meu projeto real também tenho tsClientProject porque quero compilar meu código de cliente sem nenhum módulo especificado. Como eu sei, você não pode fazê-lo com código vs.

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    sourcemaps = require('gulp-sourcemaps');

var tsServerProject = ts.createProject({
   declarationFiles: false,
   noExternalResolve: false,
   module: 'commonjs',
   target: 'ES5'
});

var srcServer = 'src/server/**/*.ts'

gulp.task('watch-server', ['compile-server'], watchServer);
gulp.task('compile-server', compileServer);

function watchServer(params) {
   gulp.watch(srcServer, ['compile-server']);
}

function compileServer(params) {
   var tsResult = gulp.src(srcServer)
      .pipe(sourcemaps.init())
      .pipe(ts(tsServerProject));

   return tsResult.js
      .pipe(sourcemaps.write('./source-maps'))
      .pipe(gulp.dest('src/server/'));

}

Selecione Preferências -> Configurações da área de trabalho e adicione o seguinte código: Se você tiver o Hot reload ativado, as alterações serão refletidas imediatamente no navegador.

{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.js.map": true,
        "**/*.js": {"when": "$(basename).ts"}
    },
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000
}

Status atual deste problema:

https://github.com/Microsoft/vscode/issues/7015

Posso dizer que com a versão mais recente do TypeScript 1.8.X e 1.0 do código do Visual Studio, a técnica que mostrei é obsoleta. Basta usar um tsconfig.json no nível raiz do seu projeto e tudo funciona automaticamente para verificação de sintaxe. Em seguida, use tsc -w na linha de comando para assistir / recompilar automaticamente. Ele lerá o mesmo arquivo tsconfig.json para obter opções e configuração da compilação ts.

// tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "ES5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "inlineSourceMap": true
    },
    "exclude": [ "node_modules" ]
} 

Uma maneira extremamente simples de compilar automaticamente ao salvar é digitar o seguinte no terminal:

tsc main --watch

Onde main.tsestá o seu nome de arquivo.

Observe que isso só funcionará enquanto este terminal estiver aberto, mas é uma solução muito simples que pode ser executada enquanto você estiver editando um programa.

Você precisa aumentar o limite de relógios para corrigir o problema de recompilação ao salvar, Abrir terminal e inserir estes dois comandos:

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

Para tornar as alterações persistentes mesmo após a reinicialização, execute este comando também:

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

tentei os métodos acima, mas o meu parou de compilar automaticamente quando pareceu, devido ao número máximo de arquivos a serem observados ultrapassando o limite.

executar cat /proc/sys/fs/inotify/max_user_watchescomando.

se estiver mostrando menos arquivos, incluindo node_modules, abra o arquivo /etc/sysctl.confcom privilégios de root e adicione

fs.inotify.max_user_watches=524288 no arquivo e salve

execute novamente o comando cat para ver o resultado. Vai funcionar! esperançosamente!

Eu uso tarefas automáticas executadas na pasta (deve funcionar VSCode> = 1.30) em .vscode / tasks.json

{
 "version": "2.0.0",
 "tasks": [
    {
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "option": "watch",
        "presentation": {
            "echo": true,
            "reveal": "silent",
            "focus": false,
            "panel": "shared"
        },
        "isBackground": true,
        "runOptions": {"runOn": "folderOpen"},
        "problemMatcher": [
            "$tsc-watch"
        ],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
 ]
}

Se isso ainda não funcionar na pasta do projeto aberta, tente Ctrl + shift + P e Tarefas: Gerenciar tarefas automáticas na pasta e escolha "Permitir tarefas automáticas na pasta" na pasta principal do projeto ou na pasta em execução.