Sublime Packages

Setting up User Settings

• Open Sublime Text

• Go to Sublime Text -> Preferences -> Settings - User

• Replace the file with the settings object below:

{
  "rulers":
  [
    80
  ],
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "scroll_past_end": true
}

Setting up Package Control in Sublime Text

• Open Sublime Text

• Bring up the console

  • Use CTRL + ` on OSX

  • or View > Show Console

• Go to https://packagecontrol.io/installation and paste the appropriate code into your Terminal

  • You should be using Sublime Text 3, so copy the Sublime Text 3 code.

• Restart Sublime

Install Sublime Packages

• Type COMMAND + SHIFT + P to open the Command Palette

  • CTRL + SHIFT + P on Linux

• Type Install Package and select the first result (by pressing ENTER)

• Type the package you want to install, and press ENTER to begin installation.

Useful Packages that you should install

• ColorPicker (pick colors by typing COMMAND + SHIFT + c, handy for CSS)

• Color Highlighter (visually displays colors for hex/rgb values)

• EditorConfig (reads configuration files for your editor)

• GitGutter (shows git additions/deletions)

• Terminal (launch a terminal window from a folder on the sidebar)

• BracketHighlighter (highlight brackets and tabs)

• Bootstrap 3 Snippets (tab snippets for Bootstrap 3 elements)

• EJS (syntax definition, we'll use this when working with Node)

• Sass (syntax definition, we'll use this when working with Rails)

• Babel (syntax definition, we'll use this when working with React)

• JSX (syntax definition, we'll use this when working with React)

Feel free to install any others, and we'll install others throughout the course.

Important Note: It is not recommended that you install anything that auto-formats or "prettifies" your code. These are generally hindersome to beginners for learning basic indentation and often are not built well which ends up causing a lot of errors. Do not use these!

Creating a Snippet (Optional)

We'll use a lot of snippets when working with Bootstrap, and you can make your own as well.

• Go to Tools > New Snippet

• Include the content of your snippet inside <![CDATA[ ]]> within the <content> element.

• To define how to trigger the snippet, uncomment the <tabTrigger> line and type the keyword for your tab trigger.

• To trigger the snippet only on certain files (for example, only HTML, or only JavaScript), uncomment the <scope> tag and change the scope to the language you need.

• More details and advanced functionality can be found in this handy blog post