Open in External App

Open file with external application in VSCode.

💡 Motivation

VSCode is a very excellent editor, but sometime I prefer to use external application to work with some files. For example, I like to use typora to edit the markdown files. Usually, I will right click to the file, and select Reveal in File Explorer , then open the file using external application.

But, with this extension, you can do it more simply. Just right click to the file, and select Open in External App, that file would be opened by system default application. You can also use this way to open .psd files with photoshop, .html files with browser, and so on...

🔌 Installation

1. Execute Extensions: Install Extensions command from Command Palette.
2. Type YuTengjing.open-in-external-app into the search form and install.

Read the extension installation guide for more details.

🔧 Configuration

Via custom configuration, you can make extensions more powerful. For example, to see the rendering differences, You can open one HTML in chrome and Firefox at the same time.

Example configuration:

{
    "openInExternalApp.openMapper": [
        {
            // represent file extension name
            "extensionName": "html",
            // the external applications to open the file which extension name is html
            "apps": [
                // openCommand can be shell command or the complete executable application path
                // title will be shown in the drop list if there are several apps
                {
                    "title": "chrome",
                    "openCommand": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
                },
                {
                    "title": "firefox",
                    "openCommand": "C:\\Program Files\\Firefox Developer Edition\\firefox.exe",
                    // open in firefox under private mode
                    "args": ["-private-window"]
                }
            ]
        },
        {
            "title": "Visual Studio Code",
            "extensionName": "tsx",
            // apps can be Object array or just is openCommand
            // the code is command you can access from shell
            "apps": "code"
        },
        {
            "title": "photoshop",
            "extensionName": "psd",
            "apps": "/path/to/photoshop.exe"
        }
    ]
}

In VSCode, Right-clicking is different from right-clicking while holding alt key. If you just right click the file, you will see the command Open in External App, but if you right click file while holding alt key, you will see the command Open in Multiple External Apps.

📢 Limits

This extension use two ways to open file in external applications.

1. Node package: open

This package has one limit that can't open a file which is also made by electron. For example, you can't open md file in typora using this package. The openCommand, args configuration item is also supported by this package. When ``isElectronApp: false`(by default), extension will use this way.

2. VSCode extension API: vscode.env.openExternal(target: Uri)

This API has one limit that can't open file path which includes Non-ascii characters, but support open file in application which is made by electron. This API can only pass one argument target, so openCommand and args configuration item is not work.

If you want to open file in application which is made by electron, you can choose two ways:

1. don not config it in VSCode settings, and set the default application of your operation system to open that file format.

2. using isElectronApp option:

   {
        "extensionName": "md",
        "isElectronApp": true,
   }

   multiple apps example:

   {
        "extensionName": "md",
        "apps": [
            {
                "title": "typora",
                "isElectronApp": true,
                // following config item is not work
                // "openCommand": "/path/to/typora.exe",
                // "args": ["--slient"]
            },
            {
                "title": "idea",
                "extensionName": "md",
                "openCommand": "/path/to/idea.exe",
                "args": ["--slient"],
            }
        ]
    }

🧡 Backers

Thanks to JiangShiqi for designing the extension's logo.