vs-fix-sourcemaps/readme.md

A Webpack plugin that fixes javascript sourcemaps in Visual Studio (2015), allowing for JSX and JS debugging directly in Visual Studio.

## NEW VERSION WITH MAJOR FIXES!!!

**UGLIFYJS IS NOT REQUIRED and creates a secondary issue of its own where the solution explorer is choked with duplicates. Try the latest version of this plugin**

> Tip: If you are working with React, hack Visual Studio's node [server](http://stackoverflow.com/questions/34097915/visual-studio-2015-jsx-es2015-syntax-highlighting) for better syntax highlighting and parsing errors support

Note: this plugin has been tested with Node v4+, Babel 6+, and Webpack 1.13. It was created to enabled JSX and JS debugging directly in Visual Studio 2015 with WEBPACK. It may work with Typescript, but it has not been tested, and I do not plan on supporting Typescript - though I will happily accept your PR.

Also, note that the `sources` in the source-map are relative to the outputted source-map's file location. Thus, if, for instance, your file is located in `Dist/Development/main.bundle.js.map`, you need to do add something like this to `webpack.output`:

```
  devtoolModuleFilenameTemplate: function (info) {
    var relative = path.relative(__dirname, info.absoluteResourcePath);
    return relative;
  },
  devtoolFallbackModuleFilenameTemplate: function (info) {
    var relative = path.relative(__dirname, info.absoluteResourcePath);
    return relative + info.hash;
  }
```

Also, if you are using something like BrowserSync to serve your files, make sure you don't run into a permission [error](https://msdn.microsoft.com/en-us/library/4d1h1d97.aspx) where breakpoints will say something like `source not available` and `disassembly` will not be available either. To fix this, you need to make sure your static files are available as-is. For Browsersync, set the `serveStatic` to your root project directory where your `package.json` lives.

Visual Studio 2015 will still break if you do one of these:
 - Static Class Properties
 - Most other ES7+ features =)
 - Try to use something line `Index.js` or `Index.jsx` instead of `index.js` and `index.jsx`.

In general, if a babel feature breaks syntax highlighting in VS with the Node server hacked, it will break VS debugging; however, at least two ES6+ features that still work despite breaking the syntax are computed properties and class properties.

If you use **CSS MODULES** you need to structure your files a certain way. `MyComponent.jsx` pulls in `MyComponentStyles.scss` via an import. You **must** have another `.js` file that pulls and exports `MyComponent.jsx` and use the javascript file (.js) when you import `MyComponent` throughout the rest of your project.

# Fix Webpack JSX and JS Sourcemaps in Visual Studio
This plugin allows you to debug Webpack-bundled JS and JSX (yes, you heard that right, JSX) files directly in Visual Studio 2015 (from the original source);

### Problem
Visual Studio (2015) doesn't support 'traditional' forms of JS debugging by setting breakpoints directly in Visual Studio. You can read the issues here:

+ https://github.com/webpack/webpack/issues/1502
+ http://stackoverflow.com/questions/32445692/debugging-bundled-javascript-in-visual-studio-2015/32952254#32952254
+ https://connect.microsoft.com/VisualStudio/feedback/details/1873069/unsupported-format-of-the-sourcemap-errors

### Tried this before?
Earlier versions of this plugin may not have worked for you depending on what ES6/ES7 features you were using. Javascript source-maps generated by babel and webpack contain segments that look like this: `oCAEc,Q,EAAU,W,` `EAAa,a,EAAe` or `6BAEO,S,EAAW` or `mDAC6B,mG,EAAU`. Loner characters (e.g ,Q,) break Visual Studio debugging. I don't know why. Removing them fixes the issue, and this removal has been included in the latest release of this plugin.

If the latest version of this plugin does not work, please create an issue =)

### A Solution
While the problem seems to be with Visual Studio, this webpack plugin seems to solve the issue (at least so far - if you find a bug please submit a PR).

This plugin only has one job: fix sourcemaps. No options or configuration - at least not yet.

If you are installing this plugin, you are most likely using IE. Make sure you are adding the Event Source pollyfill in IE if you are using hot middleware: https://github.com/glenjamin/webpack-hot-middleware/issues/11


### Usage

```
npm install --save-dev vs-fix-sourcemaps
```
In your Webpack config file, under [plugins](https://webpack.github.io/docs/configuration.html#plugins), add this plugin:

```
import VSFixSourceMapsPlugin from 'vs-fix-sourcemaps';
...
  devtool: 'source-map',
  plugins: [
    new VSFixSourceMapsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(), // hot loading!
    new webpack.NoErrorsPlugin()
  ]
...
```

### Other Known Issues
  If you are using hot middleware of any kind (like React Hot Loader or React Transforms), hot loading will not always hit breakpoints in Visual Studio. It is buggy. The problem stems from the way the referenced paths are stored in memory by Visual Studio and Webpack. If it isn't working, refreshing the page should fix it. Lame, I know, but I have not found a fix for this yet. If you have a way to make it work, I am happy to accept your PR!


### Contributing
  Yes please. Submit your PR.