typescript - tutorial - visual studio code español

Código de Visual Studio: compilar el módulo de mecanografía

Question

Acabo de descargar el nuevo Código de Visual Studio y mi primera impresión es muy positiva. Para texto mecanografiado, intellisense funciona maravillosamente.

Sin embargo, existe un problema extraño: VS Code no parece ser capaz de compilar módulos de mecanografía.

Este código:

/// <reference path="../definitions/react.d.ts"/>

import React = require("react");

compila perfectamente bien en el cmd, con

tsc --module commonjs main.ts

pero dentro del Código VS, la segunda línea se resalta en rojo y el editor se queja:

no puede compilar módulos externos a menos que se proporcione el indicador "-module"

Por supuesto, cualquier código de mecanografía que haga uso de módulos debe compilarse con esta bandera. Pero si el IDE conoce el uso de módulos, ¿por qué no establece el indicador? El código de mecanografía sin módulos se compila en guardar, sin problemas.

Creo que me falta algún archivo de configuración de compilación. ¿Hay tal cosa? Dónde puedo encontrarlo ?

ACTUALIZAR

He agregado el archivo tsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true
    }
}

Esto realmente elimina el error. Lamentablemente, el IDE ya no compila mi código. Al principio pensé que config.json solo silenciaría el mensaje de error, pero hace más que eso. Intellisense ahora funciona en el archivo de muestra. Si React la autocompletación se activa y aparentemente sabe Reaccionar porque se muestran sugerencias significativas.

Ahora, ¿por qué VS Code no compila el archivo en js? Intenté configurar el corredor de tareas para hacer ese trabajo, pero parece que no funciona:

{
    "version": "0.1.0",

    // The command is tsc.
    "command": "tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don''t need a shell.
    "windows": {
        "command": "tsc.exe"
    },

    // args is the HelloWorld program to compile.
    "args": ["--module commonjs","${file}"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

Si guardo el archivo, no ocurre nada, incluso si ejecuto explícitamente la tarea de compilación, no hay respuesta. El nombre de la tarea que edité es "tsc", intenté ejecutar eso también. Sin efecto. Luego cambié los argumentos a "args": ["--module commonjs","main.ts"] , sin respuesta.

ACTUALIZAR

La única forma en que el corredor de tareas parece funcionar es con estas dos configuraciones:

"args": ["${file}"], 
"isShellCommand": true, 

Aquí están los resultados:

• "args": ["-p"],
• "args": ["-p", "."],

error TS5023: opción del compilador desconocido ''p''.

• "args": ["."],

error TS6053: archivo ''.ts'' no encontrado.

Answer 1

Con respecto a la compilación del código, el archivo tasks.json debería verse así:

{
    "version": "0.1.0",
    "command": "tsc",    
    "showOutput": "silent",
    "windows": {
        "command": "tsc.exe"
    },
    "args": ["-p", "."],    
    "problemMatcher": "$tsc"
}

Si está ejecutando bajo Windows y tiene tsc instalado como un módulo de nodo globalmente, cambie la sección de Windows a:

"windows": {
    "command": "tsc",
    "isShellCommand": true
}

El -p . args le dicen al compilador tsc que busque un archivo tsconfig.json en la carpeta raíz y lo use para compilar su proyecto.

Answer 2

Necesita crear un archivo tsconfig.json en la raíz de su proyecto.

Establecer "module": "commonjs"

ejemplo básico:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true
    }
}

Answer 3

También enfrenté el mismo problema hoy. Seguí este enlace http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx Después de seguir todos los pasos de configuración, ejecuté este comando línea de comandos y comenzó a generar archivos JavaScript

npm install -g typescript

Necesitamos asegurarnos de tener el nodo y npm instalados y accesibles a través de la línea de comando. La razón por la que lo encontré no funcionaba porque en tasks.json especificamos las siguientes opciones

"command": "tsc"
"isShellCommand": true,

Entonces, el código visual studio intenta ejecutar el comando tsc en la línea de comando y no encuentra tsc . Por lo tanto, instalar el mecanografiado globalmente usando npm resolvió el problema.

Answer 4

Tuve el mismo problema en otro proyecto en VS Code y descubrí que VS Code estaba usando una versión diferente de Typescript.

Aquí están los resultados:

• "args": ["-p"],
• "args": ["-p", "."],

error TS5023: opción del compilador desconocido ''p''.

• "args": ["."],

error TS6053: archivo ''.ts'' no encontrado.

Tenía el 1.5.3 de npm y él estaba usando el 1.0.3 , esto porque lo había instalado en el sistema Typescript también en Microsoft SDKs y era accesible desde el PATH .

Se eliminó la solución del PATH global y del usuario este Typescript of Microsoft SDKs para acceder a la más reciente de npm que puede gestionar -p args.

Intente ejecutar el comando tsc con el argumento -v solo para verificar si es la versión correcta.

Answer 5

Tuve el mismo problema y encontré la solución aquí en , provista por Steve Fenton: código de Visual Studio compilado en guardar . Su propuesta es elegante, cumple con los estándares actuales de VS Code y funcionó inmediatamente como se describe. Agregue esto a Archivo -> Preferencias -> Accesos directos de teclado como sobrescritura:

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