How to open a file in vscode from browser?

user_5457113 0
Viewed 6510

I want my webapp to be able to open a given file in VS code. For example, when I click a button on my webapp, a file say, C:\Users\...\myProject\index.html is opened, if myProject is already opened it should navigate to index.html

I know its a peculiar use case but I want to know if its possible in vscode.

Its also completely fine if it requires using browser or vscode extension.

visual-studio-code
4 Answers
vscode://file/{full path to project}/

Thanks to fbg13 for providing this link

user_54571130

It is possible if you are using Firefox:

  • Open the about:config page.
  • Set the view_source.editor.external to true.
  • Set the view_source.editor.path to the VSCode's executable absolute path.
user_63308430

It is possible if you add this link:

vscode://file/{fullpath}:{numrow}

Example for Symfony 5.3 and higher

For example in Symfony to use the link that appears in the debug bar of the controller used you can do it as described in the examples. You have to edit your project config.

Only for VS Code:

config\packages\framework.yaml

framework:
    ide: 'vscode://file/%%f:%%l'

For any editor through env:

config\packages\framework.yaml

framework:
    ide: '%env(resolve:CODE_EDITOR)%'

And don't forget to add value for CODE_EDITOR into .env or .env.local.

Local

This is an example for local projects.

.env or .env.local:

CODE_EDITOR=vscode
# or
CODE_EDITOR=vscode://file/%%f:%%l

Docker

If you use Docker or trying to open a file from remote server, you may use this example.

.env or .env.local:

# Template
CODE_EDITOR=vscode://file/%%f:%%l&/PATH/TO/YOUR/SERVER/APP>/PATH/TO/YOUR/LOCAL/APP
# Real paths
CODE_EDITOR=vscode://file/%%f:%%l&/app/>/home/user/projects/symfony_project/

For more details see these pages:

user_11786350

You can install vscode-handler to open files like this

vscode://open?url=file://%file&line=%line
user_13291160
Related