Defina múltiples tareas en VSCode

82

He visto que es posible definir una tarea en VSCode. Pero no estoy seguro de cómo definir varias tareas en el tasks.jsonarchivo.

visual-studio-code vscode-tasks Franz Gsell
fuente
13
¡Es bastante sorprendente lo mal que explica esto el sitio web de VS Code! Uno tiene que explorar los rincones oscuros de Internet para descubrir cómo funciona esta nueva herramienta.
Kokodoko
Se agregó soporte de primera clase en VS Code 1.9 (enero de 2017), lo que elimina la necesidad de las soluciones alternativas que se ven en las respuestas principales aquí. Vea esta respuesta (mía) .
vossad01
Puede encontrar una respuesta aquí: stackoverflow.com/questions/43657839/…
pasx

Respuestas:

36

Por si acaso ayuda a alguien ... Si no tiene / quiere gulp / grunt / etc ... o un script de shell adicional para enviar sus comandos de tarea, "npm run" ya está ahí.

esto es para webpack y mocha como en "Construir y probar", Shift+ Ctrl+ B, Shift+ Ctrl+T

.vscode / tasks.json:

{
  "name": "npmTask",
  //...
  "suppressTaskName": true,
  "command": "npm",
  "isShellCommand": true,
  "args": [
    "run"
  ],
  "tasks": [
    {
      //Build Task
      "taskName": "webpack",
      //Run On Shift+Ctrl+B
      "isBuildCommand": true,
      //Don't run when Shift+Ctrl+T
      "isTestCommand": false,
      // Show the output window if error any
      "showOutput": "silent",
      //Npm Task Name
      "args": [
        "webpack"
      ],
      // use 2 regex:
      // 1st the file, then the problem       
      "problemMatcher": {
        "owner": "webpack",
        "severity": "error",
        "fileLocation": "relative",
        "pattern": [
          {
            "regexp": "ERROR in (.*)",
            "file": 1
          },
          {
            "regexp": "\\((\\d+),(\\d+)\\):(.*)",
            "line": 1,
            "column": 2,
            "message": 3
          }
        ]
      }
    },
    {
      //Test Task   
      "taskName": "mocha",
      // Don't run on Shift+Ctrl+B
      "isBuildCommand": false,
      // Run on Shift+Ctrl+T
      "isTestCommand": true,
      "showOutput": "always",
      "args": [
        "mocha"
      ]
    }
  ]
}

package.json:

{
  ...
  "scripts": {
    "webpack": "webpack",
    "mocha": "/usr/bin/mocha"
  },
  ...
}
Dan
fuente
¡Buena solución! Así que define sus comandos reales en la etiqueta de scripts npm y luego llama al script npm desde tasks.json. Realmente me hubiera gustado definir las tareas directamente dentro de tasks.json. ¿Esto parece un poco redundante?
Kokodoko
13

Lo que me ayudó a entender esto mejor es la secuencia de argumentos que se pasan al comando. Puede ser obvio para algunos, pero no está claro en la documentación.

Omitir algunos campos para centrarse solo en el comando que se envía:

{ "command": "myCommand"
  "args": ["myCommandArguments"],
  "tasks" : [ 
    { "taskName": "myTask",
      "args": ["myTaskArguments"],
      "suppressTaskName": false,
    }
  ]
}

La definición anterior dará como resultado el siguiente comando:

myCommand myCommandArguments myTaskArguments myTask

El nombre de la tarea myTasksiempre es el último. Desde la versión 0.4 se puede omitir con "suppressTaskName": true.

Hurelu
fuente
Vaya, no podía creer esta respuesta, pero la probé y fue verdad y funcionó. Quería una tarea en VSCode para "gulp --no-color vet --verbose" pero para que funcionara tuve que usar el argumento como la tarea y la tarea como argumento como "gulp --no-color --verbose vet "en tasks.json donde vet es mi tarea y --verbose es un argumento. Por supuesto, esto causa problemas con las tareas cuyos argumentos son los mismos, por lo que la tarea se nombra después de sus argumentos y se enumera como tal en las opciones de ejecución de tareas de VSCode.
GJSmith 3 de
Pero, ¿y si quiero diferentes tareas con diferentes comandos? Por ejemplo, una tarea debería ejecutar node-sass y la otra debería ejecutar tsc?
Kokodoko
Me salvaste de saltar por la ventana con el argumento suppressTaskName.
Machinegon
12

Prueba esto

{
    "version": "0.1.0",
    "command": "cmd",
    "isShellCommand": true,
    "args": ["/C"],
    "tasks": [
        {
            "taskName": "install",
            "args": ["npm install"]
        },
        {
            "taskName": "build",
            "args": ["gulp build"],
            "isBuildCommand": true,
            "problemMatcher": "$gulp-tsc"
        }
    ]
}
AlexStack
fuente
más información por favor? Cual es el error? Estoy usando esto a partir de VS Code 0.8.0 y está funcionando bien.
AlexStack
en la salida de toogle, veo la salida estándar de cmd.exe onrun. Así: Microsoft Windows [Versión 10.0.10240] (c) Корпорация Майкрософт (Microsoft Corporation), 2015 г. Все права защищены. // Derechos de autor de MS en ruso C: \ Users \ roman>
neftedollar
@neftedollar Esto solo funciona en Windows. Si está buscando algo que funcione en una Mac, cambie "command": "cmd" a "command": "sh" y cambie "args": ["/ c"] a "args": ["- c "].
ra9r
@raiglstorfer gracias, no estaba funcionando en mi PC con Windows.
dólar nefted
10

Utilizo el siguiente archivo tasks.json para ejecutar múltiples escenarios de compilación de TypeScript. Pongo un archivo tsconfig.json en cada carpeta, de modo que me permite ajustar la salida de cada carpeta individualmente. Solo asegúrese de suprimir el nombre de la tarea, porque intenta ponerlo en la cadena de comando.

{
    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "always",
    "isShellCommand": true,
    "args": [],
    "windows": {
        "command": "tsc",
        "showOutput": "always",
        "isShellCommand": true
    },
    "tasks": [
        {
            "taskName": "Build the examples",
            "suppressTaskName": true,
            "isBuildCommand": false,            
            "args": ["-p", "./source/examples", "--outDir", "./script/examples"],
            "problemMatcher": "$tsc"
        },
        {
            "taskName": "Build the solution",            
            "suppressTaskName": true,
            "isBuildCommand": false,        
            "args": ["-p", "./source/solution", "--outDir", "./script/solution"],
            "problemMatcher": "$tsc"
        }   
    ]
}

Así es como se ve la estructura de carpetas, donde / script es la raíz de salida y / source es la raíz de entrada. Ambas carpetas hacen referencia a declaraciones de tipo en la carpeta / typingd y en la carpeta / typings. TypeScript está algo limitado al uso de rutas relativas en referencias externas, por lo que ayuda a simplificar las cosas si estas estructuras de carpetas son similares.

Estructura de carpetas de compilación múltiple de TypeScript

Ah, sí, hace que sea más fácil iniciarlos de forma selectiva si los marca como no compilados y anula la clave de compilación para seleccionar una tarea específica de una lista, así

// Place your key bindings in this file to overwrite the defaults
[
    { "key": "ctrl+shift+b", "command": "workbench.action.tasks.runTask" }
]

Actualización : siempre puedes volverte completamente deshonesto, si quieres. Puede haber mejores formas de manejar los argumentos, pero esto me funciona bajo OSX en este momento.

{
  "version": "0.1.0",
  "isShellCommand": true,
  "linux": { "command": "sh", "args": ["-c"] },
  "osx": { "command": "sh", "args": ["-c"] },
  "windows": { "command": "powershell", "args": ["-Command"] },
  "tasks": [
    {
      "taskName": "build-models",
      "args": ["gulp build-models"],
      "suppressTaskName": true,
      "isBuildCommand": false,
      "isTestCommand": false
    },
    {
      "taskName": "run tests",
      "args": ["mocha ${workspaceRoot}/test"],
      "suppressTaskName": true,
      "isBuildCommand": false,
      "isTestCommand": false
    }
  ]
}
Djabraham
fuente
2
¡Este es un ejemplo muy claro! Probablemente así es como MS pretendía que se usara tasks.json (es una pena que no lo expliquen ellos mismos). El único problema es: ¿qué pasa si tengo DIFERENTES tareas de línea de comandos? (Necesito una tarea tsc y una tarea node-sass)
Kokodoko
3
Consulte Actualización, para conocer una forma de ejecutar varios comandos independientes.
djabraham
Estoy de acuerdo en que un solo "comando de compilación" es un problema cuando quieres usar tsc y node-sass. Tener que instalar y aprender una herramienta de construcción de terceros (como gulp) es una decepción. Tener que enumerar diferentes procesadores de comandos para diferentes sistemas operativos es una decepción.
Jon Watte
7

No sé la respuesta correcta a esto (y también me gustaría saber), pero mi fea solución en caso de que ayude a alguien. Estoy en Windows, terminé creando un simple script por lotes que podría contener simplemente

"%1" "%2"

Entonces mi tasks.json se parece a

{
    "version": "0.1.0",
    "command": "c:\\...\\mytasks.bat"
    "tasks" : [
        {
            "taskName": "myFirstTask",
            "args": "c:\\...\\task1.exe", "${file}"],
        },
        {
            "taskName": "mySecondTask",
            "args": "c:\\...\\task2.exe", "${file}"],
        },
    ]
}
Jonathan Corwin
fuente
Finalmente conseguí que esto funcionara. En algún momento de los últimos 9 meses, VS Code comenzó a agregar el nombre de la tarea al argumento 1 en la tarea. Entonces mi archivo por lotes se convierte en: "% 2" "% 3" en lugar de lo que tienes. Si esto se mantiene constante, podría volver a editar esta solución.
phil
6

Puede enumerar más de una tarea en la propiedad de tareas. Algo como:

"tasks": [
    {
        "taskName": "build",
        ...
    },
    {
         "taskName": "package",
         ...
    }
]
Dirk Bäumer
fuente
7
Sin embargo, tienen que usar el mismo comando. Solo puedes variar los argumentos.
Edward B.
Sí, Edward B., por alguna razón, cada publicación de blog actual asume que recién está comenzando con VS Code y aún no tiene tareas: S. Pero debe establecer "suppressTaskName": true, en el nodo raíz y luego puede establecer "taskName" en las subtareas para utilizar diferentes comandos. Ver ejemplo de @Dan con tscy mochatareas.
Bart
4

Esta funcionalidad se agregó en Visual Studio Code v1.9 (enero de 2017) . El ejemplo y el texto provienen de las notas de la versión :

{
  "version": "0.1.0",
  "tasks": [
    {
      "taskName": "tsc",
      "command": "tsc",
      "args": ["-w"],
      "isShellCommand": true,
      "isBackground": true,
      "problemMatcher": "$tsc-watch"
    },
    {
      "taskName": "build",
      "command": "gulp",
      "args": ["build"],
      "isShellCommand": true
    }
  ]
}

Comandos por tarea

Ahora puede definir diferentes comandos por tarea ( # 981 ). Esto permite ejecutar diferentes comandos para diferentes tareas sin escribir su propio script de shell. Un tasks.jsonarchivo que usa comandos por tarea se parece a [el anterior].

vossad01
fuente
3

Esto parece ser un error de VSCode a partir de v0.5.0

así que agregué esta respuesta para mostrar un ejemplo funcional de lo que fue explicado anteriormente por @hurelu. Mis tareas.json:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "--verbose",
            "isBuildCommand": true,
            "showOutput": "always",
            "args": [
                "vet"
            ],
            "problemMatcher": [
                "$jshint",
                "$jshint-stylish"
            ]
        },
        {
            "taskName": "vet",
            "isTestCommand": true,
            "showOutput": "always",
            "args": [],
            "problemMatcher": [
                "$jshint",
                "$jshint-stylish"
            ]
        }
    ]
}

Mi gulp.js:

/// <reference path="typings/tsd.d.ts" />

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var util = require('gulp-util');
var gulpprint = require('gulp-print');
var gulpif = require('gulp-if');
var args = require('yargs').argv;

gulp.task('vet', function () {
    log('Analyzing source with JSHint and JSCS');

    return gulp
        .src
        ([
            './src/**/*.js',
            './*.js'
        ])
        .pipe(gulpif(args.verbose, gulpprint()))
        .pipe(jscs())
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish', { verbose: true }))
        .pipe(jshint.reporter('fail'));
});

gulp.task('hello-world', function () {
    console.log('This is our first Gulp task!');
});

////////////
function log(msg) {
    if (typeof (msg) === 'object') {
        for (var item in msg) {
            if (msg.hasOwnProperty(item)) {
                util.log(util.colors.blue(msg[item]));
            }
        }
    } else {
        util.log(util.colors.blue(msg));
    }

}

Observe que la primera tarea usa isBuildCommand, por lo que CTRL + SHFT + B se inicia y la siguiente tarea es isTestCommand, por lo que CTRL + SHFT + T se inicia. Sin embargo, para que la primera tarea aceptara argumentos, el nombre de la tarea y los argumentos debían invertirse.

A partir de VSCode 0.5.0, lo anterior funciona, pero lo siguiente no:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "vet",
            "isBuildCommand": true,
            "showOutput": "always",
            "args": [
                "--verbose"
            ],
            "problemMatcher": [
                "$jshint",
                "$jshint-stylish"
            ]
        },
        {
            "taskName": "vet",
            "isTestCommand": true,
            "showOutput": "always",
            "args": [],
            "problemMatcher": [
                "$jshint",
                "$jshint-stylish"
            ]
        }
    ]
}

Aquí está el resultado de task.json con la tarea correcta y el orden de los argumentos:

[10:59:29] Using gulpfile ~/Workspaces/Examples/Gulp/pluralsight-gulp/gulpfile.js
[10:59:29] Task 'default' is not in your gulpfile
[10:59:29] Please check the documentation for proper gulpfile formatting

Aquí está el resultado correcto de tasks.json con el nombre de la tarea y arg invertidos cuando se usan args:

[11:02:44] Using gulpfile ~/Workspaces/Examples/Gulp/pluralsight-gulp/gulpfile.js
[11:02:44] Starting 'vet'...
[11:02:44] Analyzing source with JSHint and JSCS
[gulp] src/server/app.js
[gulp] src/client/app/app.module.js
[gulp] src/client/test-helpers/bind-polyfill.js
[gulp] src/client/test-helpers/mock-data.js
[gulp] src/server/routes/index.js
[gulp] src/client/app/core/config.js
[gulp] src/client/app/core/constants.js
[gulp] src/client/app/core/core.module.js
[gulp] src/client/app/core/dataservice.js
[gulp] src/client/app/core/dataservice.spec.js
[gulp] src/client/app/customers/customer-detail.controller.js
[gulp] src/client/app/customers/customer-detail.controller.spec.js
[gulp] src/client/app/customers/customers.controller.js
[gulp] src/client/app/customers/customers.controller.spec.js
[gulp] src/client/app/customers/customers.module.js
[gulp] src/client/app/customers/customers.route.js
[gulp] src/client/app/customers/customers.route.spec.js
[gulp] src/client/app/dashboard/dashboard.controller.js
[gulp] src/client/app/dashboard/dashboard.controller.spec.js
[gulp] src/client/app/dashboard/dashboard.module.js
[gulp] src/client/app/dashboard/dashboard.route.js
[gulp] src/client/app/dashboard/dashboard.route.spec.js
[gulp] src/client/app/layout/ht-sidebar.directive.js
[gulp] src/client/app/layout/ht-sidebar.directive.spec.js
[gulp] src/client/app/layout/ht-top-nav.directive.js
[gulp] src/client/app/layout/layout.module.js
[gulp] src/client/app/layout/shell.controller.js
[gulp] src/client/app/layout/shell.controller.spec.js
[gulp] src/client/app/layout/sidebar.controller.js
[gulp] src/client/app/layout/sidebar.controller.spec.js
[gulp] src/client/app/widgets/ht-img-person.directive.js
[gulp] src/client/app/widgets/ht-widget-header.directive.js
[gulp] src/client/app/widgets/widgets.module.js
[gulp] src/client/tests/server-integration/dataservice.spec.js
[gulp] src/server/routes/utils/errorHandler.js
[gulp] src/server/routes/utils/jsonfileservice.js
[gulp] src/client/app/blocks/exception/exception-handler.provider.js
[gulp] src/client/app/blocks/exception/exception-handler.provider.spec.js
[gulp] src/client/app/blocks/exception/exception.js
[gulp] src/client/app/blocks/exception/exception.module.js
[gulp] src/client/app/blocks/logger/logger.js
[gulp] src/client/app/blocks/logger/logger.module.js
[gulp] src/client/app/blocks/router/router-helper.provider.js
[gulp] src/client/app/blocks/router/router.module.js
[gulp] gulpfile.js
[gulp] karma.conf.js
[11:02:48] Finished 'vet' after 4.37 s
GJSmith3rd
fuente
2

A partir de la versión de febrero de 2017 , puede usar Terminal Runner y componer varias tareas configurando tareas de dependencia. Es un poco raro porque abrirá una terminal integrada separada para cada tarea, que debes observar para ver si las cosas funcionan y recordar cerrar (se "apilan"), y no recibes una notificación de "terminado" , pero hace el trabajo. La funcionalidad es preliminar pero prometedora. Este es un ejemplo para ejecutar tsc y jspm para una aplicación Cordova.

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [{
        "taskName": "tsc",
        "command": "tsc",
        "isShellCommand": true,
        "args": ["-p", "."],
        "showOutput": "always",
        "problemMatcher": "$tsc"
    }, {
        "taskName": "jspm",
        "command": "jspm",
        "isShellCommand": true,
        "args": ["bundle-sfx", "www/app/main.js", "www/dist/bundle.js", "--inline-source-maps", "--source-map-contents"],
        "showOutput": "always"
    },
    {
        "taskName": "build",
        "isBuildCommand": true,
        "dependsOn": ["tsc", "jspm"]
    }]
}
Jason
fuente
Las mejores calificaciones por usar una versión de tareas posterior. ¡Hace las cosas mucho más fáciles!
wonea
1

Lo siguiente funcionó para mí:

tasks.json:

{
    "version": "0.1.0",
    "command": "cmd",
    "isShellCommand": true,
    "args": [
        "/c"
    ],
    "tasks": [
        {
            "taskName": "bower",
            "args" : ["gulp bower"],
            "isBuildCommand": true,
            "showOutput": "always"
        },
        {
            "taskName": "unittest",
            "suppressTaskName": true,
            "args" : ["dnx -p ${cwd}\\test\\MyProject.UnitTests test"],
            "isTestCommand": true,
            "showOutput": "always"
        }
    ]
}

MyProject.UnitTests \ project.json :

 "commands": {
    "test": "xunit.runner.dnx"
  }

Ejecutar bower: Ctrl + Shift + B desde vscode Ejecutar pruebas: Ctrl + Shift + T desde vscode

AlexandruC
fuente
1

Esto funciona para mí ...

Sé que hay muchas respuestas diferentes aquí, pero mi enfoque fue un poco diferente nuevamente, así que pensé en agregar mis 2 centavos.

Estoy en Windows y uso un archivo por lotes externo para ejecutar mis comandos. Es similar a la respuesta de Jonathan anterior, pero no le envío ningún comando, lo que significa que mi archivo "tasks.json" es diferente.

Podría cambiar este enfoque con el tiempo (por ejemplo, todavía no he jugado con gulp) pero este método funciona perfectamente bien para mí en este momento.

Estoy usando manubrios para plantillas html, babel para poder usar el código ES6 y un linter de código para detectar errores. Al final, el archivo por lotes inicia un navegador con mi página de inicio (index.html)

Aquí está mi archivo por lotes llamado run_tasks.bat:

@ECHO OFF
@ECHO Startz!
@ECHO Running Handlebars!

call handlebars html_templates -e html -f dist/html_templates.js

@ECHO Linting ES6 code

call eslint -c eslint.json src

@ECHO Running Babel ES6 to ES5

call babel src --out-dir dist --source-maps

@ECHO Now startzing page up in browser!
index.html

@ECHO Donezz it!

Y aquí está mi archivo tasks.json:

{ 
    "version": "0.1.0",
    "command": "${workspaceRoot}/run_tasks.bat",
    "isShellCommand": true,
    "isWatching": true,
    "showOutput": "always",

    "args": [],

    "tasks": [
        {
            "taskName": "build",
            "isBuildCommand": true,
            "isWatching": true,
            "showOutput": "always"
        }
}

Luego, en VSCode presiono “CTRL + SHIFT + B” para ejecutar mi archivo por lotes.

Lanzamiento aéreo del océano
fuente
1

Tengo una aplicación de Electron que necesita compilar una hoja de estilo menos y luego compilar e iniciar el programa. Usé la solución de @ Ocean que funcionó para mí ... nada más funcionó.

Tanto mi archivo tasks.json como build-tasks.bat están en el directorio .vscode en la raíz del proyecto.

build-tasks.bat

@ECHO OFF
@ECHO Begin!
@ECHO Compiling Less

call lessc ./css/styles.less ./css/styles.css

@ECHO Build Electron App and Launch

call electron ./app.js

@ECHO Finished!

tasks.json

{
    "version": "0.1.0",
    "command": "${workspaceRoot}\\.vscode\\build-tasks.bat",
    "isShellCommand": true,
    "isWatching": true,
    "showOutput": "always",

    "args": [],

    "tasks": [
        {
            "taskName": "build",
            "isBuildCommand": true,
            "isWatching": true,
            "showOutput": "always"
        }
    ]
}
lamarant
fuente
0

Gracias a este hilo, ahora tengo c # / dnxcore50 build y test debug, etc. trabajando en vscode en osx con esto: 

{
"version": "0.1.0",
"command": "bash",
"args": [
],
"tasks": [
    {
        "taskName": "xbuild",
        "args": [
            "./src/Service.Host/Service.Host.csproj"
        ],          

        "showOutput": "always",
        "problemMatcher": "$msCompile",
        "isBuildCommand": true
    },
    {
        "taskName": "dnx",
        "args" : ["-p", "./test/Service.Tests.Unit", "test"],
        "isTestCommand": true,
        "showOutput": "always"    
    }      
]
}

Estoy seguro de que Linux sería básicamente el mismo. Lo único que me molesta es tener que mantener los archivos .csproj solo para depurar. Espero una forma de depurar con dnx, aunque no lo he buscado en un par de semanas.

Mark Jones
fuente