SublimeText 2 Open in Browser plugin

Filed under SublimeText

Sublimetext is a great lightweight tool for developers, is written by python and has a lot of developers out there that support with plugins and an entire ecosystem. It’s cheap and anyone can afford to pay.
But on every brought to life IDE doesn’t not complete much all developers need, but if there’s a way you can customize yourself has a lot of potential for better usage.
My blog post is related to that, SublimeText has a way to customize your IDE and you can make your own stuff. If you know a little of Python or googling you will find out that it’s pretty easy to write your own custom plugin to SublimeText.

In Tools menu you will see a menu option New Plugin

import sublime, sublime_plugin
class ExampleCommand(sublime_plugin.TextCommand):
	def run(self, edit):
		self.view.insert(edit, 0, "Hello, World!")

Pre-defined function and you half way of your new plugin, which in common words commands, since sublimeText has inside python compiler you can write direct commands to it over Console Command ( Cmd + `) or (ctrl+`).

Anyway, you figure out how it’s work, but my problem was a simple task, how to open a file that I’m editing directly in browser by shortcut like we do in Dreamweaver, Eclipse on any other IDE out there.

Since I’m using XAMPP for local PHP development I wrote my own plugin and you can take advantage of it at your own. Assuming you have theses conditions no matter what is your OS.

Creating the plugin

1. Choose Tools > New Plugin.
2. Copy and paste the current source code inside the new plugin template that Sublimetext created.

import sublime, sublime_plugin
import webbrowser
import os.path
# Author - Igor Costa
class OpenBrowserCommand(sublime_plugin.TextCommand):
   def run(self,edit):
      url = self.view.file_name()
   def openwebfile(self,content):
	      if self.view.file_name().endswith(('.php','.html','.aspx','.asp','.js','.css','.xhtml','.cfm','.jsp')):
	      	# I have c:/xampp/htdocs which counts 16 characters, replace with yours path length 
	      	sublime.message_dialog('Available only for web files')

Again, since I have XAMPP installed at c:/xampp/htdocs I have 16 characters to substring from file_name, which is limited in the current openwebfile function.
If you have other path, please make your count on that.

3. Save the file with name NOTE: SublimeText will save automatically in the right path for plugins.

4. Now it’s time to bind that command to a shortcut. Go to menu and select Preferences > Key Bindings User

5. Once you hit that file you will see [] braces. Inside this braces you paste this code.

	{ "keys": ["ctrl+enter"], "command": "open_web_files" }

5. Save and try with shortcut, on mine I put CTRL+ENTER to execute the open_web_files command which translates to file we created.

Hope it’s helps your productivity.


  1. Navik Gupta
    Posted July 29, 2012 at 11:44 am | Permalink

    Wow, great, helped me a lot. Thanks!

  2. Marcelo Strunk
    Posted July 29, 2012 at 11:46 am | Permalink

    Works like a charm.


Post a Comment

Your email is never published nor shared. Required fields are marked *