Código de Visual Studio compilar al guardar

¿Cómo puedo configurar Visual Studio Code para compilar archivos de mecanografía al guardar?

Veo que es posible configurar una tarea para construir el archivo en foco usando el ${file}como argumento. Pero me gustaría que esto se haga cuando se guarde un archivo.

Actualización de mayo de 2018:

A partir de mayo de 2018, ya no necesita crear tsconfig.jsonmanualmente o configurar el corredor de tareas.

1. Ejecútelo tsc --initen la carpeta de su proyecto para crear el tsconfig.jsonarchivo (si aún no tiene uno).
2. Presione Ctrl+Shift+Bpara abrir una lista de tareas en VS Code y seleccione tsc: watch - tsconfig.json.
3. ¡Hecho! Su proyecto se recompila en cada archivo guardado.

Puede tener varios tsconfig.jsonarchivos en su espacio de trabajo y ejecutar múltiples compilaciones a la vez si lo desea (por ejemplo, frontend y backend por separado).

Respuesta original:

Puedes hacer esto con los comandos Build:

Cree un simple tsconfig.jsoncon "watch": true(esto le indicará al compilador que vea todos los archivos compilados):

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

Tenga en cuenta que filesse omite la matriz, de forma predeterminada *.tsse compilarán todos los archivos en todos los subdirectorios. Puede proporcionar cualquier otro parámetro o cambio target/ out, solo asegúrese de que watchesté configurado en true.

Configure su tarea ( Ctrl+Shift+P-> Configure Task Runner):

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

Ahora presione Ctrl+Shift+Bpara construir el proyecto. Verá la salida del compilador en la ventana de salida ( Ctrl+Shift+U).

El compilador compilará archivos automáticamente cuando se guarde. Para detener la compilación, presione Ctrl+P->> Tasks: Terminate Running Task

He creado una plantilla de proyecto específicamente para esta respuesta: typescript-node-basic

Si desea evitar tener que usar CTRL+ SHIFT+ By, en cambio, desea que esto ocurra cada vez que guarde un archivo, puede vincular el comando al mismo atajo que la acción de guardar:

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

Esto va en su keybindings.json - (diríjase a esto usando Archivo -> Preferencias -> Atajos de teclado).

Si presionar Ctrl+ Shift+ Bparece un gran esfuerzo, puede activar "Guardar automáticamente" (Archivo> Guardar automáticamente) y usar NodeJS para ver todos los archivos en su proyecto, y ejecutar TSC automáticamente.

Abra un símbolo del sistema Node.JS, cambie el directorio a la carpeta raíz del proyecto y escriba lo siguiente;

tsc -w

Y bueno, cada vez que VS Code auto guarda el archivo, TSC lo recompilará.

Esta técnica se menciona en una publicación de blog;

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

Desplácese hacia abajo hasta "Compilar al guardar"

Escribir una extensión

Ahora que vscode es extensible, es posible conectarse al evento on save mediante una extensión. Puede encontrar una buena descripción general de las extensiones de escritura para VSCode aquí: https://code.visualstudio.com/docs/extensions/overview

Aquí hay un ejemplo simple que solo llama echo $filepathy emite stdout en un diálogo de mensaje:

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);
}

(También se hace referencia en esta pregunta SO: https://stackoverflow.com/a/33843805/20489 )

Extensión VSCode existente

Si solo desea instalar una extensión existente, aquí hay una que escribí disponible en la galería VSCode: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

El código fuente está disponible aquí: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

He luchado mucho para obtener el comportamiento que quiero. Esta es la mejor y más fácil manera de hacer que los archivos TypeScript se compilen al guardar, en la configuración que quiero, solo ESTE archivo (el archivo guardado). Es un task.json y un keybindings.json.

En lugar de crear un solo archivo y vincular Ctrl + S para activar esa compilación, recomendaría iniciar tsc en modo de observación utilizando el siguiente archivo task.json:

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

Esto una vez construirá todo el proyecto y luego reconstruirá los archivos que se guardan independientemente de cómo se guardan (Ctrl + S, guardado automático, ...)

Actualizado

En tus tsconfig.json

"compileOnSave": true, // change to true

Si el problema persiste, realice una de las siguientes acciones:

Reinicie su editor o cambie cualquier ruta, revísela y guarde la aplicación. Comenzará a compilarse. es decir

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

Implementé la compilación al guardar con la tarea gulp usando gulp-typescript y compilación incremental. Esto permite controlar la compilación lo que quieras. Observe mi variable tsServerProject, en mi proyecto real también tengo tsClientProject porque quiero compilar mi código de cliente sin ningún módulo especificado. Como sé, no puedes hacerlo con 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/'));

}

Seleccione Preferencias -> Configuración del espacio de trabajo y agregue el siguiente código. Si tiene habilitada la recarga en caliente, los cambios se reflejarán inmediatamente en el navegador

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

Estado actual de este problema:

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

Puedo decir que con la última versión de TypeScript 1.8.X y 1.0 del código de Visual Studio, la técnica que mostré es obsoleta. Simplemente use un tsconfig.json en el nivel raíz de su proyecto y todo funciona automáticamente para la verificación de sintaxis. Luego use tsc -w en la línea de comando para ver / recompilar automáticamente. Leerá el mismo archivo tsconfig.json para ver las opciones y la configuración de la compilación ts.

// tsconfig.json

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

Una forma extremadamente simple de autocompilar al guardar es escribir lo siguiente en el terminal:

tsc main --watch

donde main.tsesta tu nombre de archivo

Tenga en cuenta que esto solo se ejecutará mientras este terminal esté abierto, pero es una solución muy simple que se puede ejecutar mientras edita un programa.

Debe aumentar el límite de relojes para solucionar el problema de recompilación al guardar, abrir terminal e ingresar estos dos comandos:

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

Para que los cambios sean persistentes incluso después de reiniciar, ejecute también este comando:

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

Probé los métodos anteriores, pero el mío dejó de compilar automáticamente cuando lo consideró necesario, debido a que el número máximo de archivos a observar ha superado el límite.

ejecutar cat /proc/sys/fs/inotify/max_user_watchescomando

si muestra menos recuento de archivos, incluidos node_modules, abra el archivo /etc/sysctl.confcon privilegios de raíz y agregue

fs.inotify.max_user_watches=524288 en el archivo y guardar

ejecute nuevamente el comando cat para ver el resultado. ¡Funcionará! ¡Ojalá!

Uso tareas automáticas en la carpeta (debería funcionar VSCode> = 1.30) en .vscode / task.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
        }
    }
 ]
}

Si esto todavía no funciona en la carpeta del proyecto abierto, intente Ctrl + shift + P y Tareas: Administre Tareas automáticas en la carpeta y elija "Permitir tareas automáticas en la carpeta" en la carpeta principal del proyecto o la carpeta en ejecución.