typescript - tecnicas - Código de Visual Studio compilar al guardar

tecnicas de estudio auditivo

Question

¿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 ${file} como argumento. Pero me gustaría que esto se haga cuando se guarde un archivo.

Answer 1

Actualización de mayo de 2018:

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

1. Ejecute tsc --init en su carpeta de proyecto para crear el archivo tsconfig.json (si aún no tiene uno).
2. Presione Ctrl + Shift + B para 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 archivos tsconfig.json 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 tsconfig.json simple con "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 la matriz de files se omite, de forma predeterminada se *.ts todos los archivos *.ts en todos los subdirectorios. Puede proporcionar cualquier otro parámetro o cambiar el target / out , solo asegúrese de que watch esté configurado como true .

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

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

Ahora presiona Ctrl + Shift + B para 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

Answer 2

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, ...)

Answer 3

Estado actual de este problema:

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

Answer 4

He luchado mucho para obtener el comportamiento que quiero. Esta es la forma más fácil y mejor 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.

Answer 5

Implementé la compilación al guardar con la tarea gulp-typescript 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/''));

}

Answer 6

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" ]
} 

Answer 7

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
}

Answer 8

Si desea evitar tener que usar CTRL + SHIFT + B y, 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).

Answer 9

Si presionar Ctrl + Shift + B parece 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"

Answer 10

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

tsc main --watch

donde main.ts es 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.

Answer 11

probé los métodos anteriores, pero el mío dejó de compilar automáticamente cuando lo deseaba, debido a que el número máximo de archivos para ver ha pasado el límite.

ejecute el comando cat /proc/sys/fs/inotify/max_user_watches .

si muestra menos recuento de archivos, incluidos node_modules, abra el archivo /etc/sysctl.conf en el privilegio de root y agregue

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

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

Answer 12

Actualizado

En tu tsconfig.json

"compileOnSave": true, // change to true

Si el problema persiste, cambie cualquier ruta, vuelva a ejecutarla y guarde la aplicación. Comenzará a compilar, es decir

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

Espero que esto ayude a alguien. Aunque esta no es la solución permanente, funciona hasta que obtenga una solución mejor.

Answer 13

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 a echo $filepath y genera 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://.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: extension

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