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

Question

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

对应于 webstorm 文档 "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。

Answer 1

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

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

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

Answer 2

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

正如 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
      }
    },
    ...
}

Et voila: IDE 编译器检查没有 js 和 js.map 文件污染你的源代码文件夹！

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

另外不要忘记取消选中 "Enable TypeScript Compiler"，如下所示：

Answer 3

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

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

更新： WebStorm 2016.2 具有新的 'TypeScript service' 集成。您根本不需要 'TypeScript complier' 集成。只需检查选项 'Use TypeScript service'。此外，新集成的运行速度更快。

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

Answer 4

在您的 Webpack 配置文件中添加 module.rules:

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

显然，如果您已经有了 test: /\.tsx?$/ 的规则，您应该将其与上面的规则结合起来。

请注意 module.rules 是一个对象数组，而不是一个对象。

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

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

javascript

webstorm

typescript

webpack