{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/fork-ts-checker-webpack-plugin-code",
  "description": "The `fork-ts-checker-webpack-plugin` can speed up builds, but TypeScript errors in the terminal are not clickable. The cause and solution are explained.",
  "path": "/posts/fork-ts-checker-webpack-plugin-code",
  "publishedAt": "2017-09-12T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "vs code",
    "fork-ts-checker-webpack-plugin",
    "ts-loader",
    "webpack"
  ],
  "textContent": "My name is John Reilly and I'm a VS Code addict. There I said it. I'm also a big fan of TypeScript and webpack. I've recently switched to using the awesome fork-ts-checker-webpack-plugin to speed up my builds.\n\n\n\nOne thing I love is using VS Code both as my editor and my terminal. Using the fork-ts-checker-webpack-plugin I noticed a problem when TypeScript errors showed up in the terminal:\n\nTake a look at the red file location in the console above. What's probably not obvious from the above screenshot is that it is not clickable. I'm used to being able to click on link in the console and bounce straight to the error location. It's a really productive workflow; see a problem, click on it, be taken to the cause, fix it.\n\nI want to click on \"C:/source/ts-loader/examples/fork-ts-checker/src/fileWithError.ts(2,7)\" and have VS Code open up fileWithError.ts, ideally at line 2 and column 7. But here it's not working. Why?\n\nWell, I initially got this slightly wrong; I thought it was about the formatting of the file path. It is. I thought that having the line number and column number in parentheses after the path (eg \"(2,7)\") was screwing over VS Code. It isn't. Something else is. Look closely at the screenshot; what do you see? Do you notice how the colour of the line number / column number is different to the path? In the words of Delbert Wilkins: that's crucial.\n\nYup, the colour change between the path and the line number / column number is the problem. I've submitted a PR to fix this that I hope will get merged. In the meantime you can avoid this issue by dropping this code into your webpack.config.js:\n\nWith that in place, what do you we have? This:\n\nVS Code clickability; it's a beautiful thing.",
  "title": "fork-ts-checker-webpack-plugin code clickability"
}