web-dev-qa-db-fra.com

Visual Studio Code: compiler le module TypeScript

Je viens de télécharger le nouveau code Visual Studio et ma première impression est très positive. Pour TypeScript, intellisense fonctionne à merveille.

Cependant, il y a un problème étrange: VS Code ne semble pas être capable de compiler des modules TypeScript.

Ce code:

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

import React = require("react");

compile parfaitement bien sur le cmd, avec

tsc --module commonjs main.ts

mais dans VS Code, la deuxième ligne est surlignée en rouge et l'éditeur se plaint:

ne peut pas compiler de modules externes à moins que l'indicateur "-module" ne soit fourni

Bien sûr, tout code TypeScript qui utilise des modules doit être compilé avec cet indicateur. Mais si le IDE est conscient de l'utilisation des modules, pourquoi ne définit-il pas l'indicateur? Le code TypeScript sans modules est compilé à la sauvegarde, sans problème.

Je pense qu'il me manque un fichier de configuration du compilateur. Existe-t-il une telle chose ? Où puis-je le trouver ?

MISE À JOUR

J'ai ajouté le fichier tsconfig.json:

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

Cela supprime en fait l'erreur. Malheureusement, le IDE ne compile plus mon code. Au début, je pensais que config.json ne ferait que taire le message d'erreur, mais il fait plus que cela. Intellisense fonctionne maintenant dans l'exemple de fichier. Si je tapez React l'auto-complétion est déclenchée et connaît apparemment React car des suggestions significatives sont affichées.

Maintenant, pourquoi VS Code ne compile-t-il pas le fichier en js? J'ai essayé de configurer le gestionnaire de tâches pour faire ce travail, mais cela ne semble pas fonctionner:

{
    "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 j'enregistre le fichier, rien ne se passe, même si j'exécute explicitement la tâche de génération, il n'y a pas de réponse. Le nom de la tâche que j'ai éditée est "tsc", j'ai essayé de l'exécuter aussi. Aucun effet. J'ai ensuite changé les arguments en "args": ["--module commonjs","main.ts"], Pas de réponse.

MISE À JOUR

La seule façon dont le gestionnaire de tâches semble fonctionner est avec ces deux paramètres:

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

Voici les sorties:

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

erreur TS5023: option de compilation inconnue 'p'.

  • "args": ["."],

erreur TS6053: fichier '.ts' introuvable.

typescriptcompilationvisual-studio-code
30
lhk

J'ai également fait face au même problème aujourd'hui. J'ai suivi ce lien http://blogs.msdn.com/b/TypeScript/archive/2015/04/30/using-TypeScript-in-visual-studio-code.aspx Après avoir suivi toute l'installation étapes, j'ai exécuté cette commande sur la ligne de commande et il a commencé à générer des fichiers JavaScript

npm install -g TypeScript

Nous devons nous assurer que le nœud et le npm sont installés et accessibles via la ligne de commande. La raison pour laquelle j'ai trouvé que cela ne fonctionnait pas parce que dans tasks.json nous spécifions les options suivantes

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

Ainsi, le code de Visual Studio essaie d'exécuter la commande tsc sur la ligne de commande et ne trouve pas tsc. Ainsi, l'installation de TypeScript globalement à l'aide de npm a résolu le problème.

17
khagesh

J'ai eu le même problème dans un autre projet sur VS Code et j'ai compris que VS Code utilisait une version différente de TypeScript.

Voici les sorties:

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

erreur TS5023: option de compilation inconnue 'p'.

  • "args": ["."],

erreur TS6053: fichier '.ts' introuvable.

J'ai eu le 1.5. de npm et il utilisait le 1.0., ceci parce que j'avais installé dans le système TypeScript également dans SDK Microsoft et il était accessible depuis le chemin .

La solution a été supprimée de global et utilisateur CHEMIN this TypeScript of Microsoft SDKs pour accéder au plus récent depuis npm qui peut gérer - p args.

Essayez d'exécuter la commande tsc avec uniquement argument -v pour vérifier s'il s'agit de la bonne version.

11
Mirco Tracolli

Concernant la compilation du code, le fichier tasks.json devrait ressembler à ceci:

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

Si vous exécutez sous Windows et que tsc est installé en tant que module de nœud globalement, changez la section windows en:

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

Le -p . args indique au compilateur tsc de rechercher un fichier tsconfig.json dans le dossier racine et de l'utiliser pour compiler votre projet.

8
Dirk Bäumer

Vous devez créer un fichier tsconfig.json à la racine de votre projet.

Ensemble "module": "commonjs"

exemple de base:

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

J'ai eu le même problème et j'ai trouvé la solution ici sur stackoverflow, fournie par Steve Fenton: compilation du code Visual Studio lors de la sauvegarde . Sa proposition est élégante, conforme aux normes actuelles du code VS et a fonctionné immédiatement comme décrit. Ajoutez ceci à Fichier -> Préférences -> Raccourcis clavier en tant que remplacement:

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