How to configure Sublime-Text to Open HTML file in Chrome on build


Many times I use Sublime Text as my GoTo text editing tool for not so serious scripting and want it to html files in Google Chrome on build. Here I’m sharing the steps how I made it work. You first need to create a “Build System” called by Sublime Text in order to achieve this purpose. Build Systems are JSON files having extension name as “.sublime-build“. It allows you to run external programs from within the editor.


As the Sublime Text Unofficial Documentation –“Build systems let you run your files through external programs like make, tidy, interpreters, etc.”


Coming to the actual point of this post, to create a build system to run your HTML files in Google Chrome on build: follow the steps below:


I’m using Sublime Text 3 and running Windows 7 OS.


1. Start Sublime Text > Goto Tools > Build System > New Build System:


2. It will open a file named “untitled.sublime-build” looking like picture below:



3. Find “Google Chrome” Programs > Right click on  Properties > Copy the full path of the application, it will look like this:

“C:UsersYourUserNameAppDataLocalGoogleChromeApplicationchrome.exe”

YourUserName” is your user account name under which you’re working in Win 7 OS.

4. Modify the contents of new sublime build file as below and save as “Chrome.sublime-build”. By default it shows the build directory that should be:


“C:UsersYourUserNameAppDataRoamingSublime Text 3PackagesUser” 


If you see any other folder, please ensure and change it to the folder above otherwise Sublime Text will not be able to see and use this build system.


And Yes, don’t forget to escape the backslash in the path! (highlighted in violet in picture below)



5. Now as you have saved he build system as “Chrome.sublime-build” in Build Systems directory, it will now show up in “Build System”, select it:


You’re all done now. Just open any html file or write and save new file as html and press “CTRL+B” or Goto Tools>Build and it will open the HTML file in Google Chrome.

Thanks for reading! Hope you enjoyed this article. 

(57)

Leave a Reply

Your email address will not be published. Required fields are marked *