'Webstorm 11 check typescript files without compiling. Using webpack for compilation

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.

Solution 1:^[1]

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

Solution 2:^[2]

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.

Solution 3:^[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Valery Kozlov
Solution 3	Evrim Persembe

'Webstorm 11 check typescript files without compiling. Using webpack for compilation

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]