Add fileName as prefix to error message to support Visual Studio

README.md

@@ -168,6 +168,10 @@ set to the NPM name of the compiler, eg [`ntypescript`](https://github.com/basar
 
 Allows you to specify a custom configuration file.
 
+##### visualStudioErrorFormat *(boolean) (default=false)*
+
+If `true`, the TypeScript compiler output for an error or a warning, e.g. `(3,14): error TS4711: you did something very wrong`, in file `myFile` will instead be `myFile(3,14): error TS4711: you did something very wrong` (notice the file name at the beginning). This way Visual Studio will interpret this line and show any errors or warnings in the *error list*. This enables navigation to the file/line/column through double click.
+
 ##### compilerOptions *(object) (default={})*
 
 Allows overriding TypeScript options. Should be specified in the same format

src/index.ts

@@ -57,6 +57,7 @@ function makeOptions(loader: interfaces.Webpack) {
         compiler: 'typescript',
         configFileName: 'tsconfig.json',
         transpileOnly: false,
+        visualStudioErrorFormat: false,
         compilerOptions: {},
     }, configFileOptions, queryOptions);
     options.ignoreDiagnostics = arrify(options.ignoreDiagnostics).map(Number);

src/interfaces.ts

@@ -152,6 +152,7 @@ export interface LoaderOptions {
     configFileName: string;
     transpileOnly: boolean;
     ignoreDiagnostics: number[];
+    visualStudioErrorFormat: boolean;
     compilerOptions: typescript.CompilerOptions;
 }
 

src/utils.ts

@@ -34,8 +34,12 @@ export function formatErrors(
             let error: interfaces.WebpackError;
             if (diagnostic.file) {
                 const lineChar = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+                let errorMessage = `${'('.white}${(lineChar.line + 1).toString().cyan},${(lineChar.character + 1).toString().cyan}): ${messageText.red}`;
+                if (loaderOptions.visualStudioErrorFormat) {
+                    errorMessage = path.normalize(diagnostic.file.fileName).red + errorMessage;
+                }
                 error = makeError({
-                    message: `${'('.white}${(lineChar.line + 1).toString().cyan},${(lineChar.character + 1).toString().cyan}): ${messageText.red}`,
+                    message: errorMessage,
                     rawMessage: messageText,
                     location: { line: lineChar.line + 1, character: lineChar.character + 1 }
                 });

test/comparison-tests/visualStudioErrorFormat/app.ts

@@ -0,0 +1,4 @@
+import myComponent = require('components/myComponent');
+import myComponent2 = require('components/myComponent2');
+
+console.log(myComponent);

test/comparison-tests/visualStudioErrorFormat/common/components/myComponent.ts

@@ -0,0 +1 @@
+export = 'myComponent';

test/comparison-tests/visualStudioErrorFormat/expectedOutput-1.6/output.transpiled.txt

@@ -0,0 +1,5 @@
+    Asset     Size  Chunks             Chunk Names
+bundle.js  1.56 kB       0  [emitted]  main
+chunk    {0} bundle.js (main) 111 bytes [rendered]
+    [0] ./.test/visualStudioErrorFormat/app.ts 79 bytes {0} [built]
+    [1] ./.test/visualStudioErrorFormat/common/components/myComponent.ts 32 bytes {0} [built]

test/comparison-tests/visualStudioErrorFormat/expectedOutput-1.6/output.txt

@@ -0,0 +1,8 @@
+    Asset     Size  Chunks             Chunk Names
+bundle.js  1.56 kB       0  [emitted]  main
+chunk    {0} bundle.js (main) 111 bytes [rendered]
+    [0] ./.test/visualStudioErrorFormat/app.ts 79 bytes {0} [built] [1 error]
+    [1] ./.test/visualStudioErrorFormat/common/components/myComponent.ts 32 bytes {0} [built]
+
+ERROR in ./.test/visualStudioErrorFormat/app.ts
+app.ts(2,31): error TS2307: Cannot find module 'components/myComponent2'.

test/comparison-tests/visualStudioErrorFormat/expectedOutput-1.7/output.transpiled.txt

@@ -0,0 +1,5 @@
+    Asset     Size  Chunks             Chunk Names
+bundle.js  1.56 kB       0  [emitted]  main
+chunk    {0} bundle.js (main) 111 bytes [rendered]
+    [0] ./.test/visualStudioErrorFormat/app.ts 79 bytes {0} [built]
+    [1] ./.test/visualStudioErrorFormat/common/components/myComponent.ts 32 bytes {0} [built]

test/comparison-tests/visualStudioErrorFormat/expectedOutput-1.7/output.txt

@@ -0,0 +1,8 @@
+    Asset     Size  Chunks             Chunk Names
+bundle.js  1.56 kB       0  [emitted]  main
+chunk    {0} bundle.js (main) 111 bytes [rendered]
+    [0] ./.test/visualStudioErrorFormat/app.ts 79 bytes {0} [built] [1 error]
+    [1] ./.test/visualStudioErrorFormat/common/components/myComponent.ts 32 bytes {0} [built]
+
+ERROR in ./.test/visualStudioErrorFormat/app.ts
+app.ts(2,31): error TS2307: Cannot find module 'components/myComponent2'.

test/comparison-tests/visualStudioErrorFormat/expectedOutput-1.8/output.transpiled.txt

@@ -0,0 +1,5 @@
+    Asset     Size  Chunks             Chunk Names
+bundle.js  1.59 kB       0  [emitted]  main
+chunk    {0} bundle.js (main) 139 bytes [rendered]
+    [0] ./.test/visualStudioErrorFormat/app.ts 93 bytes {0} [built]
+    [1] ./.test/visualStudioErrorFormat/common/components/myComponent.ts 46 bytes {0} [built]

test/comparison-tests/visualStudioErrorFormat/expectedOutput-1.8/output.txt

@@ -0,0 +1,8 @@
+    Asset     Size  Chunks             Chunk Names
+bundle.js  1.59 kB       0  [emitted]  main
+chunk    {0} bundle.js (main) 139 bytes [rendered]
+    [0] ./.test/visualStudioErrorFormat/app.ts 93 bytes {0} [built] [1 error]
+    [1] ./.test/visualStudioErrorFormat/common/components/myComponent.ts 46 bytes {0} [built]
+
+ERROR in ./.test/visualStudioErrorFormat/app.ts
+app.ts(2,31): error TS2307: Cannot find module 'components/myComponent2'.

test/comparison-tests/visualStudioErrorFormat/expectedOutput-2.0/bundle.js

@@ -0,0 +1,61 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	"use strict";
+	var myComponent = __webpack_require__(1);
+	console.log(myComponent);
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+	"use strict";
+	module.exports = 'myComponent';
+
+
+/***/ }
+/******/ ]);

test/comparison-tests/visualStudioErrorFormat/expectedOutput-2.0/output.transpiled.txt

@@ -0,0 +1,5 @@
+    Asset     Size  Chunks             Chunk Names
+bundle.js  1.59 kB       0  [emitted]  main
+chunk    {0} bundle.js (main) 139 bytes [rendered]
+    [0] ./.test/visualStudioErrorFormat/app.ts 93 bytes {0} [built]
+    [1] ./.test/visualStudioErrorFormat/common/components/myComponent.ts 46 bytes {0} [built]

test/comparison-tests/visualStudioErrorFormat/expectedOutput-2.0/output.txt

@@ -0,0 +1,8 @@
+    Asset     Size  Chunks             Chunk Names
+bundle.js  1.59 kB       0  [emitted]  main
+chunk    {0} bundle.js (main) 139 bytes [rendered]
+    [0] ./.test/visualStudioErrorFormat/app.ts 93 bytes {0} [built] [1 error]
+    [1] ./.test/visualStudioErrorFormat/common/components/myComponent.ts 46 bytes {0} [built]
+
+ERROR in ./.test/visualStudioErrorFormat/app.ts
+app.ts(2,31): error TS2307: Cannot find module 'components/myComponent2'.

test/comparison-tests/visualStudioErrorFormat/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+
+	},
+	"files": [
+	]
+}

test/comparison-tests/visualStudioErrorFormat/webpack.config.js

@@ -0,0 +1,25 @@
+var path = require('path');
+
+module.exports = {
+    entry: './app.ts',
+    output: {
+        filename: 'bundle.js'
+    },
+    resolve: {
+        alias: {
+            components: path.resolve(__dirname, 'common/components')
+        },
+        extensions: ['', '.ts', '.js']
+    },
+    module: {
+        loaders: [
+            { test: /\.ts$/, loader: 'ts-loader' }
+        ]
+    },
+    ts: {
+        visualStudioErrorFormat: true
+    }
+}
+
+// for test harness purposes only, you would not need this in a normal project
+module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }