We are going to be writing all of our code using the plain text editor Sublime Text 3. In this guide, you will customize your installation with shortcuts and other things in order to make your life easier.
What follows may seem opaque, but don't worry about it -- we just need to go through this process once, and then we'll be all set for the quarter. You aren't expected to understand exactly how it is all working right now.
Download Sublime Text 3 (not 2) for your platform of choice here, and install it (locate and double-click the file you just downloaded).
Sublime is paid software, but you can evaluate it for free forever -- it will just nag you once in a while to purchase it, which you can ignore.
(If you don't see a particular menu option, that means it's already configured.)
- Click on
View>SideBar>Hide Open Files - Click on
View>Hide MiniMap - Turn on
View>Word Wrap
Tens and hundreds of thousands of developers use Sublime, and many of them write plugins to make it more useful to them in their daily work. Package Manager is a tool that will make it easy for us to add 3rd party plugins to our installation.
In the View menu, select Show Console. The console, a blank text field, will appear at the very bottom of your Sublime window. Go to the following page and copy the code block provided, then paste it into the console:
https://packagecontrol.io/installation#st3
Wait a second, and then quit Sublime and relaunch it (actually Quit the app from the Sublime (Mac) or File (Windows) menu -- don't just close the open windows).
You should now have Package Manager installed. Let's test it out by installing a theme called Soda. Go to Tools > Command Palette. This should make a search box pop open in the middle of your screen. Start typing "Install" into the box, and the results should get narrowed down until you see "Package Control: Install Package". Select it and hit return, or click it.
Now, a second, slightly different looking search box should pop open. This is a list of all the plugins available. Start typing "sublimeerb", and you should see a result "SublimeERB". Select it and hit return, or click it. The theme will then be installed (we'll turn it on in just a moment).
There are a few other packages that will be helpful to us. For each one, you first need to do Tools > Command Palette, then start typing "install", select "Package Control: Install Package", and then search for it in the second box that appears. Here are the packages for you to install:
- SublimeERB
- ERB Snippets
- BracketHighlighter
Open the User Preferences file. On Mac, this is found in the menu Sublime Text > Preferences > Settings - User. On Windows, there is a top-level Preferences menu within which you'll find User Settings.
This will open a text file that describes your Sublime settings. Sublime is a tool for developers, after all, so it doesn't have a more conventional graphical interface to choose your settings.
Highlight the entire contents of this file and delete them; then, paste in the following instead:
{
"auto_complete_commit_on_tab": true,
"auto_complete_with_fields": true,
"caret_style": "smooth",
"color_scheme": "Packages/Color Scheme - Default/Dawn.tmTheme",
"create_window_at_startup": false,
"drag_text": false,
"ensure_newline_at_eof_on_save": true,
"fade_fold_buttons": false,
"font_face": "Courier New",
"font_size": 18.0,
"hot_exit": false,
"ignored_packages":
[
"Vintage"
],
"remember_open_files": false,
"remember_full_screen": false,
"save_on_focus_lost": true,
"show_full_path": true,
"soda_folder_icons": false,
"tab_size": 2,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true
}
Save the file after pasting this in. You can probably guess what some of these are doing, but others will be unfamiliar. Feel free in particular to choose whatever you like for font_face and font_size.
However, for font_face, be sure to choose a fixed width font. For reasons you will see, when writing code, it is very helpful to have every character take up the same amount of horizontal space so that lines above and below one another line up. "Courier New" is a fixed width font that all Windows systems ship with. Monaco and Menlo are both nice options on Mac.
The most important setting is "save_on_focus_lost": true -- this setting will make it so that, whenever you switch to a different app, Sublime will save all changes in all open files.
This comes in very handy when we are working on Rails projects, which involves editing several files at once. As soon as you switch to Chrome to see the effects of the code you wrote, everything will automatically save.
What if you mess up? You can use Undo if necessary (Sublime keeps an extremely long Undo history for every file), and we'll also be using GitHub eventually to save previous versions of everything.
In your Preferences menu, find "Key Bindings - User". A file will open up -- delete its contents and replace with the following:
[
{ "keys": ["ctrl+shift+."], "command": "erb" },
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } },
{ "keys": ["ctrl+shift+["], "command": "select_lines", "args": { "forward": false } },
{ "keys": ["ctrl+shift+]"], "command": "select_lines", "args": { "forward": true } }
]
Don't forget to save the file afterwards. Re-indent your code often; you no longer have any excuse to not have neatly indented code at all times!
For Mac users, there's one last handy feature. Launch your Terminal app, which can be found in your Applications > Utilities folder.
Better yet, get used to using your Spotlight to launch all apps -- type Cmd-Space to bring up the Spotlight search bar, and then start typing "Terminal". The app will appear under your search results after a few characters. Select it to launch.
Terminal is something we're going to talk a lot about, but for now, just paste the following text (it's all one line) in at the prompt and hit return:
For OS X versions less than 10.11:
sudo ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /bin/subl
For OS X versions greater than or equal to 10.11:
sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl
It will ask you to enter your login password; type it carefully. It won't look like anything is happening, but it is just hiding your typing.
You should now be set; you can quit the Terminal app. I'll explain what this did in class.
Your Sublime should now be all configured to make programming as painless as possible. If you see me using shortcuts in class that your Sublime isn't able to perform, then something above must have gone wrong; let me know so we can fix it.