diff --git a/README.md b/README.md index 15dcebc..3989075 100755 --- a/README.md +++ b/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 diff --git a/src/lib.js b/src/lib.js index 62b7dc9..3201bc9 100644 --- a/src/lib.js +++ b/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) { diff --git a/tests/index.js b/tests/index.js index 404525b..cb43d8b 100644 --- a/tests/index.js +++ b/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, +