Sublime Text 2 keyboard shortcut to open file in specified browser (e.g. Chrome)

Question

I do web development and am trying out Sublime Text 2. Is there a keyboard shortcut to open the current file in specified browser (e.g. Chrome)?

Any help to get setup in Sublime Text for web development is appreciated!

score 170 · Accepted Answer · edited Dec 13 '15 at 10:39

170

I'm not really sure this question is approprate here, but you can add a new "Build System" under Tools -> Build System -> New Build System...

As with all configuration in Sublime Text its just JSON, so it should be pretty straight forward. The main thing you are going to want to configure is the "cmd" key/val. Here is the build config for launching chrome on my mac.

{
    "cmd": ["open", "-a", "Google Chrome", "$file"]
}

Save that as Chrome.sublime-build, relaunch Sublime Text and you should see a new Chrome option in the build list. Select it, and then you should be able to launch Chrome with Cmd+B on a Mac (or whatever hotkey you have configured for build, maybe its F7 or Ctrl+B on a Windows machine)

At least this should give you a push in the right direction.

Edit:

Another thing I end up doing a lot in Sublime Text 2 is if you right click inside a document, one of the items in the context menu is Copy File Path, which puts the current file's full path into the clipboard for easy pasting into whatever browser you want.

Sublime Text 3 (linux example) "shell_cmd": "google-chrome '$file'"

edited Dec 13 '15 at 10:39

Yang

618
6
9

answered Nov 05 '11 at 23:10

J. Holmes

18,466
5
47
52

54

For Window OS, use this cmd: { "cmd": ["PATH_TO_YOUR_CHROME", "$file"] } – didxga Mar 10 '12 at 13:44
2

OS X users, if you're ok to just open with the default browser `{ "cmd": ["open", "$file"] }` does the trick nicely. Install Choosy (http://www.choosyosx.com/) for it to be even more flexible. – Matijs Aug 13 '12 at 15:00
16

Beware the backslashes in Windows path, make them double or it will consider them as invalid escape sequence, thus not working. – Angel Feb 24 '13 at 03:27
13

Also for linux its just `{ "cmd": ["google-chrome", "$file"] }` – lambda Apr 24 '13 at 21:23
13

In Sublime Text 3, the command had been changed to `"shell_cmd": "open -a your_app '$file'"`. – Chris Nov 15 '13 at 18:01
Yes but will it use the automatic build, or do I have to specifi the build. Because I have a lot of other builds and I use Automatic build option, so will it work on Automatic build? – IGRACH Mar 15 '14 at 20:17
For Windows Firefox + Sublime's `Tools > Build system > Automatic` (ie no need to select manually HTML => HTML will be automatically detected) : `{ "cmd": ["C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe", "$file"], "selector": "text.html" }` – Basj Dec 14 '14 at 15:49
`"shell_cmd": "open -a '/Applications/Google Chrome Canary.app' '$file'"` for OSX / ST3 … you need the path in there! – Rowe Morehouse Jan 13 '16 at 20:05

score 48 · Answer 2 · answered Jun 28 '12 at 05:36

48

"Open in Browser context menu for HTML files" has been added in the latest build (2207). Its release date was 25 June 2012.

answered Jun 28 '12 at 05:36

aanton

5,572
1
23
15

2

I must have overlooked the context menu with right click. Thanks for this tip! – orschiro Jul 13 '12 at 13:56
18

And you can easily assign a shortcut for this: Go to Preferences > Key Bindings - User. then, in the .sublime-keymap file that opens, add `{ "keys": ["ctrl+alt+b"], "command": "open_in_browser"}` (or any other key combination you fancy) – Jarón Barends May 02 '13 at 07:59
1

Jaron is right, but mind that the key combination cannot conflict with the existing ones, otherwise it just won't work, and there isn't shortcut conflict warnings in sublime as far as I can tell – Philip007 Oct 24 '13 at 21:04
1

[ {"keys":["super+;"],"command": "run_macro_file", "args":{"file":"Packages/User/Semicolon.sublime-macro"} } ] here is the content in my config file? how do I add yours to my exisiting config? Thank you! – Nicolas S.Xu Mar 01 '14 at 12:41
I see the context menu, but selecting it does not open the file in the browser. Is there some initial setup step that I am missing? – Neil Monroe Oct 17 '14 at 16:14
2

@NeilMonroe Activate logging commands in the console to see possible errors `sublime.log_commands(True)` – aanton Oct 21 '14 at 09:56
Thanks @aanton. I updated to the Sublime Text 3 beta and it seems to work there. – Neil Monroe Oct 22 '14 at 11:07
Where is it? Couldnt find. – Davi Lima Oct 30 '15 at 21:16

score 33 · Answer 3 · edited Sep 11 '14 at 18:10

33

Windows7 FireFox/Chrome:

    {
       "cmd":["F:\\Program Files\\Mozilla Firefox\\firefox.exe","$file"]
    }

just use your own path of firefox.exe or chrome.exe to replace mine.

Replace firefox.exe or chrome.exe with your own path.

edited Sep 11 '14 at 18:10

Umur Kontacı

35,403
8
73
96

answered Mar 21 '12 at 08:42

boya

331
3
4

1

`C:\\Users\\$User$\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe` is the common path for chrome on windows (replace $User$ with your user name). – Ben Apr 23 '13 at 19:10
1

Yes but will it use the automatic build, or do I have to specifi the build. Because I have a lot of other builds and I use Automatic build option, so will it work on Automatic build? – IGRACH Mar 15 '14 at 20:17

Mohammad Eskandari · Answer 4 · 2014-09-11T18:07:01.413

15

This worked on Sublime 3:

To browse html files with default app by Alt+L hotkey:

Add this line to Preferences -> Key Bindings - User opening file:

{ "keys": ["alt+l"], "command": "open_in_browser"}

To browse or open with external app like chrome:

Add this line to Tools -> Build System -> New Build System... opening file, and save with name "OpenWithChrome.sublime-build"

"shell_cmd": "C:\\PROGRA~1\\Google\\Chrome\\APPLIC~1\\chrome.exe $file"

Then you can browse/open the file by selecting Tools -> Build System -> OpenWithChrome and pressing F7 or Ctrl+B key.

edited Sep 11 '14 at 18:07

answered Sep 11 '14 at 13:07

Mohammad Eskandari

221
1
3
8

1

This is the most straightforward way to do this. Adding the line to key bindings is all most folks will need. – Shawn Erquhart Oct 16 '14 at 12:48
1

You might also replace the double backshashes `\\` with single slashaes `/` which Sublime Text will understand on Windows as well. – kleinfreund Jul 14 '15 at 18:32
1

This worked but I found that I needed file name in quotes in the event that my file was in a directory that had spaces in the name. Ex: "C:\My Folder\test.html" would cause two Chrome tabs to open "C:\My"and "Folder\test.html", which is wrong. Wrapping the $file part with escaped quotes and then this works fine (replace $file with \"$file\" in the command above). – PancakesOwn Feb 26 '16 at 10:31

score 13 · Answer 5 · answered Dec 18 '12 at 21:25

13

Install the View In Browser plugin using Package Control or download package from github and unzip this package in your packages folder(that from browse packages)

after this, go to Preferences, Key Bindings - User, paste this

[{ "keys": [ "f12" ], "command": "view_in_browser" }]

now F12 will be your shortcut key.

answered Dec 18 '12 at 21:25

dicentiu

393
4
8

I've also had to change last line in `Preferences --> PackageSettings--> view in Browser -- > default settings`; to "chrome 64" ( was "firefox"). Then works perfectly with any shortcut ;) – kolboc Jul 08 '16 at 12:20

score 12 · Answer 6 · answered Oct 05 '12 at 19:33

12

You can install SideBarEnhancements plugin, which among other things will give you ability to open file in browser just by clicking F12.

To open exactly in Chrome, you will need to fix up “Side Bar.sublime-settings” file and set "default_browser" to be "chrome".

I also recommend to learn this video tutorial on Sublime Text 2.

answered Oct 05 '12 at 19:33

Timofey Gorshkov

4,987
6
41
66

1

Errandir where exactly is this video? There are several videos at the link you list above. I'm using windows 7, not mac. Thanks. – Chris22 Mar 30 '15 at 04:11

score 8 · Answer 7 · edited Oct 21 '12 at 12:47

8

On windows launching default browser with a predefined url:

Tools > Build System > New Build System:

{
    "cmd": ["cmd","/K","start http://localhost/projects/Reminder/"]
}

ctrl + B and voila!

edited Oct 21 '12 at 12:47

Kjuly

34,476
22
104
118

answered May 30 '12 at 18:42

bluehipy

381
2
5

score 8 · Answer 8 · answered Sep 30 '14 at 15:20

There seem to be a lot of solutions for Windows here but this is the simplest:

Tools -> Build System -> New Build System, type in the above, save as Browser.sublime-build:

{
    "cmd": "explorer $file"
}

Then go back to your HTML file. Tools -> Build System -> Browser. Then press CTRL-B and the file will be opened in whatever browser is your system default browser.

score 4 · Answer 9 · answered Mar 01 '14 at 00:14

Here is another solution if you want to include different browsers in on file. If you and Mac user, from sublime menu go to, Tools > New Plugin. Delete the generated code and past the following:

import sublime, sublime_plugin
import webbrowser


class OpenBrowserCommand(sublime_plugin.TextCommand):
   def run(self,edit,keyPressed):
      url = self.view.file_name()
      if keyPressed == "1":
         navegator = webbrowser.get("open -a /Applications/Firefox.app %s")
      if keyPressed == "2":
         navegator = webbrowser.get("open -a /Applications/Google\ Chrome.app %s")
      if keyPressed == "3":
         navegator = webbrowser.get("open -a /Applications/Safari.app %s")
      navegator.open_new(url)

Save. Then open up User Keybindings. (Tools > Command Palette > "User Key bindings"), and add this somewhere to the list:

{ "keys": ["alt+1"], "command": "open_browser", "args": {"keyPressed": "1"}},
{ "keys": ["alt+2"], "command": "open_browser", "args": {"keyPressed": "2"}},
{ "keys": ["alt+3"], "command": "open_browser", "args": {"keyPressed": "3"}}

Now open any html file in Sublime and use one of the keybindings, which it would open that file in your favourite browser.

J4cK · Answer 10 · 2019-04-05T20:28:23.373

3

Tools -> Build System -> New Build System. The type following as your OS, save as Chrome.sublime-build

Windows OS

  {
        "cmd": ["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]
  }

MAC Os

{
   "cmd": ["open", "-a", "/Applications/Google Chrome.app", "$file"]
}

Save the file - Chrome.sublime-build in location

C:\Users\xnivirro\Downloads\Software-Installed\Sublime-2\Data\Packages\User

Sublime View in Browswer - https://github.com/adampresley/sublime-view-in-browser (Tried with Linux and it works)

edited Apr 05 '19 at 20:28

answered Jun 09 '15 at 12:12

J4cK

30,459
8
42
54

Make sure to save as **.sublime-build** as extension Example, if Firefox : `Firefox.sublime-build` – sameer Nov 20 '19 at 18:50

score 3 · Answer 11 · answered Mar 09 '16 at 15:43

3

On mac and sublime text 3 , which version is 3103, the content should be

{
    "shell_cmd": "open -a 'Google Chrome' '$file'"
}

answered Mar 09 '16 at 15:43

clinyong

1,675
3
14
22

nabrown · Answer 12 · 2014-11-21T00:06:44.363

egyamado's answer was really helpful! You can enhance it for your particular setup with something like this:

import sublime, sublime_plugin
import webbrowser

class OpenBrowserCommand(sublime_plugin.TextCommand):
   def run(self, edit, keyPressed, localHost, pathToFiles):  
      for region in self.view.sel():  
         if not region.empty():  
            # Get the selected text  
            url = self.view.substr(region)  
            # prepend beginning of local host url 
            url = localHost + url  
         else:
            # prepend beginning of local host url 
            url = localHost + self.view.file_name()
            # replace local path to file
            url = url.replace(pathToFiles, "")


         if keyPressed == "1":
            navigator = webbrowser.get("open -a /Applications/Firefox.app %s")
         if keyPressed == "2":
            navigator = webbrowser.get("open -a /Applications/Google\ Chrome.app %s")
         if keyPressed == "3":
            navigator = webbrowser.get("open -a /Applications/Safari.app %s")
         navigator.open_new(url)

And then in your keybindings:

{ "keys": ["alt+1"], "command": "open_browser", "args": {"keyPressed": "1", "localHost": "http://nbrown.smartdestinations.com", "pathToFiles":"/opt/local/apache2/htdocs"}},
{ "keys": ["alt+2"], "command": "open_browser", "args": {"keyPressed": "2", "localHost": "http://nbrown.smartdestinations.com", "pathToFiles":"/opt/local/apache2/htdocs"}},
{ "keys": ["alt+3"], "command": "open_browser", "args": {"keyPressed": "3", "localHost": "http://nbrown.smartdestinations.com", "pathToFiles":"/opt/local/apache2/htdocs"}}

We store sample urls at the top of all our templates, so the first part allows you to highlight that sample URL and launch it in a browser. If no text is highlighted, it will simply use the file name. You can adjust the command calls in the keybindings to your localhost url and the system path to the documents you're working on.

score 1 · Answer 13 · answered Sep 19 '15 at 08:31

I have similar situation like you. I dont wannt sublime open editor for binary like jpg png files. Instead open system default application is more reasonable.

create one Build. Just like the accepted answer. But it will both open default application and hex editor.
Pulgin OpenDefaultApplication https://github.com/SublimeText/OpenDefaultApplication It will have context right click menu OpenInDefaultApplication. But It will both open default application and hex editor as well

Pulgin: Non Text Files https://packagecontrol.io/packages/Non%20Text%20Files Add config in the user settting

"binary_file_patterns": ["*.JPG","*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],
"prevent_bin_preview": true,
"open_externally_patterns": [
   "*.JPG",
   "*.jpg",
   "*.jpeg",
   "*.JPEG",
   "*.png",
    "*.PGN",
   "*.gif",
    "*.GIF",
    "*.zip",
    "*.ZIP",
    "*.pdf",
    "*.PDF"
]

I choose the third way, it's quite sutiable for me. It will open jpg file in system default application and quickly close the edit mode automaically at the same time. As to the first two ways, you can set "preview_on_click": false, to stop openning automaticlly the hex editor compromisely.

score 0 · Answer 14 · answered Aug 14 '17 at 10:56

0

or try this

"cmd": ["cmd","/K","start http://localhost/Angularjs/$file_name"]

answered Aug 14 '17 at 10:56

Vinay

79
8

Sublime Text 2 keyboard shortcut to open file in specified browser (e.g. Chrome)

14 Answers14

This worked on Sublime 3:

To browse html files with default app by Alt+L hotkey:

To browse or open with external app like chrome:

Linked

Related