Return to site

How To Use Sublime Text

broken image


Say you're coding HTML in Sublime Text & you want to check how it looks in a browser. Some text editors (BBEdit, for instance) have a feature that lets you open your page in a browser, but Sublime Text does not. Here's how to do it in Sublime Text.

Sublime Text 3 (ST3) is the latest version of one of the most commonly used plain text editors by web developers, coders, and programmers. It's available for Mac, Windows, and Linux, and free to download and use. On the Sublime Text download page, click on link for OS X (OS X 10.7 or later is required). After it downloads, open the application either from your browser's download section or from Finder. Text Editors: Atom and Sublime.

Install a browser selection tool

Since you're a web developer, you're going to (a) have more than one web browser on your computer, & (b) want to test your work in more than one browser. To make your life easier, you need to install a browser selection tool. In my my book, Mac OS X Snow Leopard for Power Users, I explained it this way:

I keep several web browsers on my Mac at all times, and I like to switch back and forth between them. In fact, sometimes I'll click on a link and want to open it in Safari, because I want to print the page and I find Safari does that better than any other browser, but a few minutes later I'll click on a link and want to open it in Firefox, because I have that browser set up to handle downloading music and movies. In Mac OS X, as in Windows and Linux, I can specify a default browser for my system, but that browser is used for everything. Wouldn't it be nice if I could choose between browsers on the fly, as needed?

With a browser selection tool, you can! Here are my recommendations:

  • Mac OS X: I used to really love Choosy, but ever since Mountain Lion, it's been broken. So now I use MultiBrowser. It's not as slick, but it works with Mountain Lion, & it's free (although I was happy to pay the $12 for Choosy)
  • Windows: I've never used it, but it appears that you want Browser Chooser.

Install them, configure them to recognize the web browsers on your computer (Firefox, Chrome, Opera, Safari, & IE if you use Windows), & set them as the default web browser on your computer. How you do that depends upon your OS:

How To Use Sublime Text
  • Mac OS X: Open Safari & then select Safari > Preferences > General. For Default Web Browser, select MultiBrowser.
  • Windows: Click on the Start menu (or its equivalent) & enter Set Your Default Programs in the search box. In the resulting window, select Browser Chooser & then click on Set This Program As Default.

Method 1: Install the View In Browser plugin

This is the easiest method, but I couldn't get it to work on my Mac. Note that I'm assuming you've installed the Package Control extension for Sublime Text.

  1. Press Command-Shift-P (if you use a Mac) & Ctrl-Shift-P (if you use Windows) to open the Command Palette.

  2. Type Install Package until you see that 'Package Control: Install Package' is selected. Press Enter.

  3. In the text box, start typing View In Browser until that package is selected. Once it is, press Enter to install it.

  4. Restart Sublime Text.

Now when you have a web page open in Sublime Text, just press Ctrl-Alt-V & your browser selection tool should open, letting you choose which browser to open.

You can read more about the View In Browser package at GitHub.

Method 2: Create a Build System

This is slightly more work, but you also get more control.

  1. In Sublime Text, go to Tools > Build System > New Build System. A new tab will open in Sublime Text named untitled.sublime-build, with the following text in it1:

  2. If you use a Mac, replace it with the following:

    If you use Windows, replace it with the following:

  3. Save the file. Name it Choose Browser.sublime-build. Sublime Text should be smart enough to put it in the right place for you, but if it doesn't, save it to the following locations:

    • Mac OS X: ~/Library/Application Support/Sublime Text 2/Packages/User
    • Windows:
  4. Restart Sublime Text.

Now when you want to preview your work in Sublime Text in a web browser, do one of the following:

  • Tools > Build
  • Press Command-B (Mac)2 or Ctrl-B (Windows)

Your browser selection tool should open, allowing to choose the browser in which you want to see your webpage. How to turn folder into zip file.

Step By Step Sublime Text 3

How To Use Sublime Text
  • Mac OS X: Open Safari & then select Safari > Preferences > General. For Default Web Browser, select MultiBrowser.
  • Windows: Click on the Start menu (or its equivalent) & enter Set Your Default Programs in the search box. In the resulting window, select Browser Chooser & then click on Set This Program As Default.

Method 1: Install the View In Browser plugin

This is the easiest method, but I couldn't get it to work on my Mac. Note that I'm assuming you've installed the Package Control extension for Sublime Text.

  1. Press Command-Shift-P (if you use a Mac) & Ctrl-Shift-P (if you use Windows) to open the Command Palette.

  2. Type Install Package until you see that 'Package Control: Install Package' is selected. Press Enter.

  3. In the text box, start typing View In Browser until that package is selected. Once it is, press Enter to install it.

  4. Restart Sublime Text.

Now when you have a web page open in Sublime Text, just press Ctrl-Alt-V & your browser selection tool should open, letting you choose which browser to open.

You can read more about the View In Browser package at GitHub.

Method 2: Create a Build System

This is slightly more work, but you also get more control.

  1. In Sublime Text, go to Tools > Build System > New Build System. A new tab will open in Sublime Text named untitled.sublime-build, with the following text in it1:

  2. If you use a Mac, replace it with the following:

    If you use Windows, replace it with the following:

  3. Save the file. Name it Choose Browser.sublime-build. Sublime Text should be smart enough to put it in the right place for you, but if it doesn't, save it to the following locations:

    • Mac OS X: ~/Library/Application Support/Sublime Text 2/Packages/User
    • Windows:
  4. Restart Sublime Text.

Now when you want to preview your work in Sublime Text in a web browser, do one of the following:

  • Tools > Build
  • Press Command-B (Mac)2 or Ctrl-B (Windows)

Your browser selection tool should open, allowing to choose the browser in which you want to see your webpage. How to turn folder into zip file.

Step By Step Sublime Text 3

You can learn more about Build Systems on Sublime Text at http://www.sublimetext.com/docs/build.

  1. Thanks to Rich B. for letting me know that I needed to change $File to $file! ↩

  2. This is a very bad key command, as Command-B has always been used for Bold on the Mac (& likewise with Ctrl-B on Windows). If the key command doesn't work for you, you'll need to change it (that's a topic for another lesson) or use the menus. ↩

Setup

Some operating systems and installation methods will require a configuration change to make subl available on the PATH.

Windows

On Windows, the command line helper is subl.exe. To use this from the Command Prompt or Powershell, the Sublime Text installation folder needs to be added to the Path environment variable:

Windows 10

Show instructions for: Windows 8, Windows 7
  • Open the Start Menu and type environ
  • Select the item Edit the system environment variables
  • Click the button Environment Variables at the bottom of the System Properties dialog
  • Select, or create, the Path environment variable in the appropriate section:
    • For the current user, select Path in the User variables for {username} section
    • For all users, select Path in the System variables section
  • Click the New button and add an entry with the Sublime Text installation directory
    • 64bit installs are typically in C:Program FilesSublime Text
    • 32bit installs on a 64bit version of Windows will be in C:Program Files (x86)Sublime Text
    • 32bit installs on a 32bit version of Windows will be in C:Program FilesSublime Text

Windows 8

Show instructions for: Windows 10, Windows 7
  • Press the Windows Key and type environ
  • Select the item Edit the system environment variables
  • Click the button Environment Variables at the bottom of the System Properties dialog
  • Select, or create, the Path environment variable in the appropriate section:
    • For the current user, select Path in the User variables for {username} section
    • For all users, select Path in the System variables section
  • In the Variable value input, add an entry with the Sublime Text installation directory. If there is an existing value, add a ; before the Sublime Text directory.
    • 64bit installs are typically in C:Program FilesSublime Text
    • 32bit installs on a 64bit version of Windows will be in C:Program Files (x86)Sublime Text
    • 32bit installs on a 32bit version of Windows will be in C:Program FilesSublime Text

Windows 7

Show instructions for: Windows 10, Windows 8
  • Open the Start Menu
  • Right-click on Computer and select Properties
  • Click on Advanced System Settings in the left-hand sidebar
  • Click the button Environment Variables at the bottom of the System Properties dialog
  • Select, or create, the Path environment variable in the appropriate section:
    • For the current user, select Path in the User variables for {username} section
    • For all users, select Path in the System variables section
  • In the Variable value input, add an entry with the Sublime Text installation directory. If there is an existing value, add a ; before the Sublime Text directory.
    • 64bit installs are typically in C:Program FilesSublime Text
    • 32bit installs on a 64bit version of Windows will be in C:Program Files (x86)Sublime Text
    • 32bit installs on a 32bit version of Windows will be in C:Program FilesSublime Text

Mac

To use subl, the Sublime Text bin folder needs to be added to the path. For a typical installation of Sublime Text, this will be located at /Applications/Sublime Text.app/Contents/SharedSupport/bin.

Bash

How To Use Sublime Text 2

If using Bash, the default before macOS 10.15, the following command will add the bin folder to the PATH environment variable:

Zsh

If using Zsh, the default starting with macOS 10.15, the following command will add the bin folder to the PATH environment variable:

Linux

If Sublime Text is installed via one of the Linux Package Manager Repositories or a package, a subl symlink will automatically be installed into the /usr/bin/ How to get sims for free on pc. directory.

If installing from a tarball, the sublime_text executable should be symlinked to subl, with a command such as:

The exact details of the symlink command will depend on the installation location. Most default PATH environment variable values should contain /usr/local/bin, so no further commands should be necessary.





broken image