Webstorm 11 无需编译即可检查 typescript 个文件。 使用webpack进行编译

Question

i'm trying to use webstorm with webpack and typescript and i have stuck with errors checking. I want to compile ts files with webpack, so i need to avoid compiling source files via Webstorm, but it seems like Webstorm perform error checking only during compilation process.

Corresponding to webstorm docs "Resolve objects using tsconfig.json" should activate Errors checking without compilation, but is doesnt.

example code, which Webstorm doesnt highlight

 { let z = 4;}
 console.log(z);

my tsconfig file:

 {
  "compilerOptions": {
    "module": "commonjs",
    "out": "build/tsc.js",
    "target": "es5",
    "sourceMap": true,
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ]
}

In same time Visual studio code display errors fine. Do i have any errors in my configs? Is it possible to highlight errors correct with Webstorm or other JetBrains IDE?

Typescript version 1.7, Webstorm 11.

Answer 1

Original Answer (outdated - see UPDATE below):

As Valery correctly pointed out you can set the "noEmit" property to true to prevent the compiler creating any output files.

However, if your Webpack setup uses the same tsconfig.json file it will also prevent webpack from creating the output files. You'll only notice this the next time webpack is restarted.

In my webpack setup I'm using the "ts-loader" Typescript loader. As mentioned on the ts-loader github page you can override compiler options.

So this is my setup:

tsconfig.json (used by IDE and Webpack)

"compilerOptions": {
    "noEmit": true, // do not emit js and map files
    ...

webpack.config.json (used by Webpack)

{
    test: /\.ts$/,
    loader: 'ts-loader',
    query: {
      'compilerOptions': {
        "noEmit": false // make sure js files do get emitted
      }
    },
    ...
}

Et voila: IDE compiler checks without js and js.map files polluting your source code folder!

UPDATE: My answer was a valid workaround in January but today the better solution is to use the Typescript service inside Webstorm/IDEA as suggested by anstarovoyt.

Also don't forget to UNcheck "Enable TypeScript Compiler" as shown here:

Answer 2

WebStorm 2016.1 (and other IJ 2016.1 IDEs) supports "compileOnSave" option. Example:

{
  "compileOnSave": false,
  "compilerOptions": {
    "module": "commonjs"
  }
}

Update: WebStorm 2016.2 has the new 'TypeScript service' integration. You don't need the 'TypeScript complier' integration at all. Just check the option 'Use TypeScript service'. Moreover the new integration works much more faster.

Update 2: The integration is enabled by default in WebStorm 2016.3

Answer 3

I found the way to prevent compiler output vis tsconfig - noEmit option.

{
  "compilerOptions": {
    "module": "commonjs",
    "noEmit": true,
    "target": "es5",
    "sourceMap": true,
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ]
}

With this config i have no extra file and correct error highlight in webstorm.

Answer 4

In your Webpack configuration file add this in module.rules :

{
    test: /\.tsx?$/,
    use: [
        {
            loader: 'ts-loader',
            options: {
                compilerOptions: {
                    noEmit: false,
                },
            },
        },
    ],
}

Obviously, if you already have a rule for test: /\.tsx?$/ , you should combine it with the above.

And note that module.rules is an array of objects, not an object.