30

I've just downloaded the new Visual Studio Code and my first impression is very positive. For typescript, intellisense works beautifully.

However, there is a strange problem: VS Code doesn't seem to be able to compile typescript modules.

This code:

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

import React = require("react");

compiles perfectly fine on the cmd, with

tsc --module commonjs main.ts

but within VS Code, the second line is highlighted in red and the editor complains:

cannot compile external modules unless the "-module" flag is provided

Of course any typescript code which makes use of modules has to be compiled with this flag. But if the IDE is aware of the usage of modules, why doesn't it set the flag ? Typescript code without modules is compiled on save, without problems.

I think I'm missing some compiler-setup config file. Is there such a thing ? Where can I find it ?

UPDATE

I've added the tsconfig.json file:

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

This actually removes the error. Unfortunately the IDE no longer compiles my code. At first I thought the config.json would only silence the error message, but it does more than that. Intellisense now works in the sample file. If I type React the autocompletion is triggered and apparently knows React because meaningful suggestions are displayed.

Now, why doesn't VS Code compile the file to js ? I've tried to configure the task runner to do that job, but it doesn't seem to work:

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

If I save the file, nothing happens, even if I explicitly run the build task, there's no response. The name of the task I edited is "tsc", I tried to run that, too. No effect. Then I changed the arguments to "args": ["--module commonjs","main.ts"], No response.

UPDATE

The only way the task runner seems to work is with these two settings:

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

Here are the outputs:

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

error TS5023: Unknown compiler option 'p'.

  • "args": ["."],

error TS6053: File '.ts' not found.

Daniel Santos
  • 14,328
  • 21
  • 91
  • 174
lhk
  • 27,458
  • 30
  • 122
  • 201
  • 2
    I have been experiencing this as well, but have been ignoring it. I did just find this setting which *might* help... "javascript.validate.module": "commonjs" – Brocco May 05 '15 at 11:40
  • 1
    You could create a [tsconfig.json](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json) in your project? I don't use Code so I'm not sure if there's a UI setting for this – CodingIntrigue May 05 '15 at 11:40
  • 1
    Please use ES6 module syntax `import * as React from 'react'` and specify your module type in the `tsconfig.json` file – einstein May 05 '15 at 13:29
  • 1
    @einstein I believe that syntax is only available in version 1.5+ (which is currently in beta) – Brocco May 05 '15 at 14:00
  • 1
    Bring the command palette `cmd`+`shift`+`p` and configure your task runner. It should be under the `args` property. – einstein May 05 '15 at 14:03
  • The ES6 syntax had the same error, then I added the tsconfig file and the error vanished. Now the code only needs to compile. But the task runner doesn't seem to work – lhk May 05 '15 at 14:30
  • Is your imported react module being referred (used) any where? – vilicvane May 06 '15 at 02:54

5 Answers5

17

I also faced the same problem today. I followed this link http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx After following all setup steps, I ran this command on command line and it started generating JavaScript files

npm install -g typescript

We need to ensure that we have node and npm installed and accessible through command line. The reason I found it was not working because in tasks.json we specify following options 

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

So, visual studio code tries to run command tsc on command line and it does not find tsc. So, installing typescript globally using npm solved the problem.

khagesh
  • 948
  • 1
  • 6
  • 18
  • `npm install -g typescript` fixed the problem for me when trying to look over the https://github.com/angular-class/angular2-webpack-starter angular2 typescript app. – seangwright Jul 03 '15 at 04:27
  • 2
    I have typescript installed. It's working since I CAN compile a single .ts file to a .js file --- but when I use modules, I still get this error. ("cannot compile modules unless the --module flag is provided"). Where do I provide this flag? – Kokodoko Nov 23 '15 at 13:30
11

I had the same problem in another project on VS Code and I figured out that VS Code was using a different version of Typescript.

Here are the outputs:

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

error TS5023: Unknown compiler option 'p'.

  • "args": ["."],

error TS6053: File '.ts' not found.

I had the 1.5.3 from npm and he was using the 1.0.3, this because I had installed in the system Typescript also in Microsoft SDKs and it was accesible from the PATH.

The solution was remove from global and user PATH this Typescript of Microsoft SDKs to access the newest one from npm that can manage -p args.

Try to execute tsc command with only -v argument to verify if it is the correct version.

Community
  • 1
  • 1
MircoT
  • 185
  • 1
  • 9
8

Regarding compiling the code, the tasks.json file should look like this:

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

If you are running under Windows and have tsc installed as a node module globally, change the windows section to:

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

The -p . args tell the tsc compiler to look for a tsconfig.json file in the root folder and use it to compile your project.

GFoley83
  • 3,439
  • 2
  • 33
  • 46
Dirk Bäumer
  • 1,183
  • 9
  • 7
  • This doesn't work for me as I get the error "unknown option p" – Ed Bishop Jul 02 '15 at 11:17
  • 3
    Unknown option -p likely mean an older version of tsc is being invoked. You may want to check what path gets run when you invoke tsc from a command line or from Terminal depending on which OS you are on. Try tsc -v from cmd or terminal. If you see an older TypeScript version, you may want to upgrade TypeScript or check your path to see if multiple versions are included. You can check which path is being run via the where command in Windows or which in terminal. eg where tsc or which tsc. – bingles Jul 31 '15 at 03:24
  • 1
    really weird! -v shows 1.0.3.0 yet I the only files I can find are 1.5.3... very strange. – Ray Suelzer Aug 19 '15 at 19:16
  • 1
    @RaySuelzer - If you have installed VS in the past, then it places TypeScript in your PATH environment variable, but never clears it out. And since the first one wins, it's always the older version you have installed. I recommend going in and clearing out your PATH to get rid of older versions. – Josh Aug 27 '15 at 12:30
3

You need to create a tsconfig.json file in the root of your project.

Set "module": "commonjs"

basic example:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true
    }
}
Ross Scott
  • 1,690
  • 9
  • 16
  • This removes the error message and makes autocomplete work. Unfortunately, the file still isn't compiled – lhk May 05 '15 at 14:27
  • 1
    So, I presume you have done a Ctr+Shift+B ? Then chosen configure task runner. In the "args" array, specify the file name to compile. e.g. "args": [ "main.ts" ] – Ross Scott May 05 '15 at 15:28
  • 1
    For more info you may want to follow this tutorial: http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx – Ross Scott May 05 '15 at 15:29
  • @RossScott typing Ctrl+Shift+B on each file that was displaying the --modules error removed the error for me. – seangwright Jul 03 '15 at 04:39
  • Where did you find this information? I have scoured the VSCode website but the docs seem far from complete. – Kokodoko Nov 23 '15 at 13:32
0

I had the same problem and found the solution right here on stackoverflow, provided by Steve Fenton: visual studio code compile on save . His proposal is elegant, complies with the current VS Code standards and worked immediately as described. Add this to File -> Preferences -> Keyboard Shortcuts as an overwrite:

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