Webstorm 11 無需編譯即可檢查 typescript 個文件。 使用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

原始答案（過時 - 請參閱下面的更新）：

正如Valery正確指出的那樣，您可以將“noEmit”屬性設置為true以防止編譯器創建任何輸出文件。

但是，如果您的Webpack安裝程序使用相同的tsconfig.json文件，它還將阻止webpack創建輸出文件。 您只會在下次重新啟動webpack時注意到這一點。

在我的webpack設置中，我正在使用“ts-loader”Typescript加載器。 如ts-loader github頁面所述，您可以覆蓋編譯器選項。

所以這是我的設置：

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月份的有效解決方法，但今天更好的解決方案是使用anstarovoyt建議的Webstorm / IDEA內的Typescript服務。

另外不要忘記UNcheck“啟用TypeScript編譯器”，如下所示：

Answer 2

WebStorm 2016.1（和其他IJ 2016.1 IDE）支持"compileOnSave"選項。 例：

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

更新： WebStorm 2016.2具有新的“TypeScript服務”集成。 您根本不需要“TypeScript編譯器”集成。 只需選中“使用TypeScript服務”選項即可。 此外，新集成的工作速度更快。

更新2： WebStorm 2016.3中默認啟用集成

Answer 3

我發現了阻止編譯器輸出的方法，而不是tsconfig - noEmit選項。

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

使用此配置，我沒有額外的文件和webstorm中正確的錯誤突出顯示。

Answer 4

在您的 Webpack 配置文件中，將此添加到module.rules中：

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

顯然，如果您已經有一個test: /\.tsx?$/ ，您應該將它與上面的結合起來。

請注意， module.rules是一個對象數組，而不是 object。