Array
University of Oregon

Configure Sublime Text

sublime-text-browser-refresh

Sublime is an extensible WebDev tool– you can install packages using Sublime’s package installer.

The package installer is accessed using Sublime’s Command Palette:

How to Open the Command Palette in Sublime

Memorize the keyboard command for your O.S.

Windows: Ctrl+Shift+P 
OS X: Command+Shift+P 

Required Packages

Follow these instructions to install Sublime Text packages for WebDev:

  1. Package Control is the first thing you have to install. With it, you can install, upgrade and remove packages.
  2. Emmet/Zen Coding. Bookmark the Emmet/Zen Cheet-Sheet.

    This package allows you to use abbreviations for HTML and CSS tags.
    The preferred way to install Emmet is to use Package Control.
    Command Palette >Package Install  > Emmet

    1. Open the Command Palette in Sublime Text (as described, above)
    2. Enter “Package Install ”
    3. Enter “Emmet” and select to install
  3. Open in Browser. Opens a new tab in your default browser, and loads the page.

    To install: Command Palette >Package Install  >  Preview

  4. JavaScriptNext. Improved syntax highlighter for JavaScript ES5 & ES6. (This package is not needed for students in CIS 110).
  5. HTML-CSS-JS Prettify. HTML, CSS, JavaScript and JSON code formatter.

    Requires that node.js be installed first.

    To install:  Command Palette > Package Install > prettify >HTML-CSS-JS Prettify

  6. JSHint. Run a JSHint.com check in Sublime.

    Requires that node.js be installed first. (This package is not needed for students in CIS 110).

    To install:  Command Palette > Package Install > js gutter > JSHint Gutter

Optional Packages

  1. SFTP. This package allows you to use Sublime to upload files to the uoregon.edu server, as an alternate to CyberDuck.

    To install: Command Palette >Package Install  > SFTP
    Then read How to Map a Local to a Remote Folder.

  2. Refresh Changes in Browser. Perform three tasks at once — Save document, Go to Browser, and Refresh, just by hitting a key combination:OS X: [“command+shift+r”]
    Windows: [“cntrl+shift+r”]
  3. Terminal. This package lets you open your project folders in Terminal directly from SublimeText. To install:  Command Palette > Install Package > Terminal.

    Usage

    Open Terminal at File
    ctrl+shift+t (Windows and Linux)
    cmd+shift+t (OS X)

    Open Terminal at Project Folder
    ctrl+alt+shift+t (Windows and Linux)
    cmd+alt+shift+t (OS X)

  4. Trimmer. Remove unnecessary spaces, as well as trailing spaces
  5. Git. Run Git commands (Add, Commit, View Log, ..) in Sublime.
  6. Find 2,500+ More Packages (packagecontrol.io).
Skip to toolbar