by Flo Preynat

I’ve been using Sublime Text 2 for a few months now, as it’s mega fast, it supports multi-selection, and it’s got cool features like the distraction-free editing mode. In 4 words, “I fucking love it”.

Since i’m far from the only one getting hooked on the app as the text editor for code is becoming more and more popular, I thought I would share a couple of things with you.

Sublime Package Control

For those of you who still wouldn’t know it, Sublime Text 2 can be ‘equipped’ with a full-featured package manager helping you discover, install, update and remove packages (on top of this, it supports GitHub).

To install it, follow the Instructions stated here. I personally went for a manual install as shown below:

  • Click the Preferences > Browse Packages… menu entry
  • Browse up a folder and then into the Installed Packages folder
  • Download Package Control.sublime-package and copy it into the Installed Packages directory
  • Restart Sublime Text

Livereload

You may know about the LiveReload app monitoring changes in the file system, and refreshing the browser as soon as the file change has been saved. You can find the app and links to the mac app store and browser extensions here.

However, I stumbled upon another way of using the same functionality Livereload offers and this with Sublime Text 2. First of all, let’s install the Livereload package by using the package control (recently installed).
To do this, got to Preferences/Package Control and select Install Package as shown below.

Type Livereload and double click the package to install it.

Once installed, install the Livereload extension/add-on of your preferred browser.

  • If you are using Chrome like me, go there. Note: If you want to use it with local files, be sure to enable “Allow access to file URLs” checkbox in Tools > Extensions > LiveReload after installation.
  • For firefox lovers, select the followin add-on.

This done, all ou need to do is activate the Livereload extension by clicking the toolbar button (it will turn green to indicate that LiveReload is active), and fire away your changes in your code editor.

Practical example

I have downloaded the 320andup responsive boilerplate of Andy Clarke and placed it in my MAMP htdocs folder.

The chrome extension activated (green button), I can now edit the various 320andup files and see the changes happen live on the browser without refreshing it. In this case, I simply went with a brutal background change on the css file and saved it.

- Before Making a change on the CSS file -

- After (simply) saving the change of the CSS file -

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Make Google Charts responsive

Make Google Charts responsive

March 19th, 2014

A quick blog post on how to make Google Charts play nicely in responsive mode. Nothing close to rock[...]

Codekit 2 : even more steroids for us web developers

Codekit 2 : even more steroids for us web developers

March 17th, 2014

I was on holiday when Bryan released the new version of Codekit and never had the chance to to check[...]

Open terminal from folder in finder

Open terminal from folder in finder

January 27th, 2014

A quick one nudged my way by Adrien Joly this morning. You can now open a terminal window from a [...]

A look back at Wordcamp Paris 2014

A look back at Wordcamp Paris 2014

January 22nd, 2014

I went to Wordcamp Paris last week. The event was held On Friday 17th January at MAS Paris and Satur[...]

Gruntjs Boilerplate: my dummy-proof step-by-step guide

Gruntjs Boilerplate: my dummy-proof step-by-step guide

January 14th, 2014

Right so I've made the leap. After quite a ride, and some cool adventures with Codekit, I've deci[...]

Comments

  1. Nathan says:

    Very cool post. I will definitely try adding the livereload sublime text 2 plugin!

    • Tracy says:

      Unfortunately the livereload does not work and hasn’t for a while. Sublime text 2 however is awesome. I just use the compass app to watch the folders and the FTP connection with Sublime text and it works great. I wasted a lot of time on livereload until I tried the compass app.

  2. Thanks for the tip, but it doesn’t work here. I installed the package in Sublime Text 2, added the LiveReload plugin to Chrome (and enabled “Allow access to file URLs”) and restarted Sublime Text 2. But nothing happens in the browser when I change an HTML or CSS file. Any hints? Maybe it doesn’t work in Windows?

    • Hi Christian,

      you have to work locally, hence use a local server environment. I use Mamp on my mac (if you are on a windows machine, you can go with xampp).

      If you don’t want to go that route, then you can download the paid Livereload app, i think it’s just under 10 bucks ask it to watch a specific folder (incl. non-localhost ones).

      Hope this helps mate,

    • chodorowicz says:

      Yep, this also doesn’t work for me on Windows. I’m trying it locally (both direct file access and XAMPP server). I see ST flash (Sent LiveReload command…), the extension is turned on and green, but nothing reloads… Once we have to suffer on Windows ;)

    • just thought i would precise that the following setup does work with windows. For your info, I use it on both mac os x and windows 7 environments. I hope you find your issue Jakub!

  3. Andre Morgan says:

    I just bought LiveReload :( & I could have used this. Wish Sublime Text 2 had a FTP tool like Coda.

  4. bruce lawson says:

    Opera users can grab this Livereload extension https://addons.opera.com/en-gb/extensions/details/livereload-201-beta/?display=en

    Users of current shipping versions of Opera (pre 12.50) will need to enable web sockets opera:config#UserPrefs|EnableWebSockets (they’re turned on by default from Opera 12.50)

    bruce lawson
    Opera developer relations team

  5. AntoxaGray says:

    I noticed when I edit CSS, it does not reload entire document, it just updates CSS live.

    When I edit HTML or PHP, it does reload page (so all .load() scripts will run!)

  6. antonio says:

    Thanks for the post!
    New user to sublime text 2. I am trying to get my .php files to open in the browser. Right now they just get downloaded. Coda seems to have this functionality so can’t understand why sublime text 2 doesn’t?

  7. Very simple and easy to package livereload sublime text. A productivity gain of Front-end Engineer

  8. Max says:

    Hi there! I also tried to use sublime-livereload with Win7 64. Installed the plugins in FF and Chrome. When I activate them I get the “client connected” in the Sublime Text status bar. But when I hit save nothing happens! Are there any dependencies like ruby, python … any other software apart from a clean Windows machine?

    Also when I try to enable / disable livereload plugins like less preprocessor, it doesn’t work. The settings file entry enabled_plugins stays empty.

    Any hints how I can get this to work? Seems like quite a few folks have the same problem.

    Cheers!

    • Hi Max, to be honest, I’ve moved away from Livereload a long time ago.
      Won’t you consider using another tool, like codekit, prepros or mixture.
      They can so much better than live refresh.

  9. Mary Pieroszkiewicz says:

    For me doesn’t work Sublime Text 3 – LiveReload extensions (Firefox, Chrome, Safari) I don’t know why? I use MAMP.

    Please help me!

    • Sorry, Mary, I don’t use ST3 personally.
      Any Sublime Text 3 users wanna help?

    • DJ says:

      Yeah livereload hasn’t worked well for some time now. For Firefox I suggest this Auto Reload 1.19 add-on. Works just like livereload if not better when using sublime text or nay editor for that matter. As for Chrome I still have not found an extension that actually works.