feat: add support for vscode like file schemes

README.md

@@ -80,8 +80,11 @@ customize its behaviour:
 
 ### `editorScheme` `[?string]`
 If a filename in the stack trace is local, the component can create the
-link to open your editor using this scheme eg: `subl` to create
-`subl://open?url=file:///filename`.
+link to open your editor using this scheme eg:
+  - `subl` to create
+    `subl://open?url=file:///filename`.
+  - or `vscode` to create
+    `vscode://file/filename`.
 
 ### `useLines` `[boolean=true]`
 Line numbers in the stack trace may be unreliable depending on the

src/lib.js

@@ -33,7 +33,17 @@ export const makeUrl = (filename, scheme, line, column) => {
 
   let url = `file://${actualFilename}`
 
-  if (scheme) {
+  if (scheme === 'vscode') {
+    url = `${scheme}://file/${url}`
+    url = url.replace(/file:\/\/\//, '') // visual studio code does not need file:/// in its scheme
+    if (line && actualFilename === filename) {
+      url = `${url}:${line}`
+
+      if (column) {
+        url = `${url}:${column}`
+      }
+    }
+  } else if (scheme) {
     url = `${scheme}://open?url=${url}`
 
     if (line && actualFilename === filename) {

tests/index.js

@@ -168,6 +168,37 @@ test('RedBoxError with filename and editorScheme', t => {
   afterEach()
 })
 
+test('RedBoxError with filename and vscode like editorScheme', t => {
+  t.plan(1)
+  beforeEach(framesStub)
+  const error = new Error()
+  const filename = 'some-optional-webpack-loader!/filename'
+  const editorScheme = 'vscode'
+  const component = createComponent(RedBoxError, {error, filename, editorScheme})
+
+  const renderedStack = component
+    .props.children[1]
+
+  t.deepEqual(
+    renderedStack,
+    <div style={style.stack}>
+      <div style={style.frame} key={0}>
+        <div>App.render</div>
+        <div style={style.file}>
+          <a style={style.linkToFile} href="vscode://file/filename">/filename</a>
+        </div>
+      </div>
+      <div style={style.frame} key={1}>
+        <div>App.render</div>
+        <div style={style.file}>
+          <a style={style.linkToFile} href="webpack:///./~/react-hot-loader/~/react-hot-api/modules/makeAssimilatePrototype.js?">webpack:///./~/react-hot-loader/~/react-hot-api/modules/makeAssimilatePrototype.js?:17:41</a>
+        </div>
+      </div>
+    </div>
+  )
+  afterEach()
+})
+
 test('RedBoxError with absolute filenames', t => {
   t.plan(1)
   beforeEach(framesStubAbsoluteFilenames)