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

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!

This question is related to sublimetext2

The answer is


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!


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.


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

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

or try this

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


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.


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.


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.


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.


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.


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)


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.

  1. create one Build. Just like the accepted answer. But it will both open default application and hex editor.
  2. 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
  3. 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.


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


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.