Webstorm 11 无需编译即可检查打字稿文件。使用 webpack 进行编译答案

【问题标题】：Webstorm 11 check typescript files without compiling. Using webpack for compilationWebstorm 11 无需编译即可检查打字稿文件。使用 webpack 进行编译
【发布时间】：2016-03-22 23:16:35
【问题描述】：

我正在尝试将 webstorm 与 webpack 和 typescript 一起使用，但我一直坚持错误检查。我想用webpack编译ts文件，所以我需要避免通过Webstorm编译源文件，但是Webstorm似乎只在编译过程中执行错误检查。

对应于 webstorm docs“Resolve objects using tsconfig.json”应该激活错误检查而不编译，但不是。

示例代码，Webstorm 没有突出显示

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

我的 tsconfig 文件：

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

同时 Visual Studio 代码显示错误正常。我的配置中有任何错误吗？是否可以突出显示使用 Webstorm 或其他 JetBrains IDE 纠正的错误？

Typescript 1.7 版，Webstorm 11。

【问题讨论】：

标签： javascript typescript webstorm webpack

【解决方案1】：

原始答案（已过时 - 请参阅下面的更新）：

正如 Valery 正确指出的那样，您可以将“noEmit”属性设置为 true 以防止编译器创建任何输出文件。

但是，如果您的 Webpack 设置使用相同的 tsconfig.json 文件，它也会阻止 webpack 创建输出文件。你只会在下次重启 webpack 时注意到这一点。

在我的 webpack 设置中，我使用的是“ts-loader”Typescript 加载器。如ts-loader github page 所述，您可以覆盖编译器选项。

这是我的设置：

tsconfig.json（IDE 和 Webpack 使用）

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

webpack.config.json（由 Webpack 使用）

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

瞧：IDE 编译器检查没有 js 和 js.map 文件污染您的源代码文件夹！

更新：我的回答是一月份的有效解决方法，但今天更好的解决方案是按照 anstarovoyt 的建议在 Webstorm/IDEA 中使用 Typescript 服务。

也不要忘记取消选中“启用 TypeScript 编译器”，如下所示：

【讨论】：

这摆脱了 webstorm 中恼人的unresolved function or method require 错误。是的！

【解决方案2】：

WebStorm 2016.1（和其他 IJ 2016.1 IDE）支持 "compileOnSave" 选项。示例：

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

更新：WebStorm 2016.2 具有新的“TypeScript 服务”集成。您根本不需要“TypeScript 编译器”集成。只需选中“使用 TypeScript 服务”选项即可。此外，新的集成运行速度更快。

更新 2：在 WebStorm 2016.3 中默认启用集成

【讨论】：

【解决方案3】：

我找到了防止编译器输出 vis tsconfig - noEmit 选项的方法。

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

有了这个配置，我在 webstorm 中没有额外的文件和更正错误突出显示。

【讨论】：

webpack ts 编译器使用相同的配置，但是在 webpack 配置中覆盖这个设置太多，无法使用 webstorm