Sublime Text 3 Workshop


The 18th july I taught a Sublime Text 3 workshop for the students from the Ironhack Barcelona summer edition bootcamp.
Usually I’ll do it in person, to give the students a hand while I explain the matter, but this time we used Hangouts because I didn’t had the time to travel to Barcelona (I live and work in Madrid).
The experience was not so good as I wanted because of my inexperience with remote teaching, but after some days the students still asking for the slides, so I think they appreciated the core of the workshop.

I told them:

  • How to configure the editor
  • How to customize the editor
  • Useful shortcuts
  • How to search and install plugins
  • Useful plugins and his usage
  • Hands on demo

 *note: This is a Sublime Text 3 workshop, but the most parts works also for Sublime Text 2.

It’s free
The first point is to download and install the editor. And yes it’s free, but come on! It’s a cheap editor, and if you are gonna use it everyday for your work, it’s because the editor is great and those guys deserves his money. Use it for free and when you are sure you like it, then pay for it. Nobody works for free right?

 

Adding Sublime to terminal

Something I like is to use Sublime from the terminal, and fortunately it has a binary file for it. Just create a symlink to the binary file in your binaries folder, and thats it.
Here is an example in case you installed Sublime in the default location:

sudo ln -s “/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl” ~/bin/sublime

Now you are able to use Sublime a default system editor (instead of Vi, or Nano, or whatever editor you were using), and you can also launch the editor, open a path or a file from the terminal like this:

user@computer:~/myfolder$ sublime myfile    //open file
user@computer:~/myfolder$ sublime .         //open path

*note: I use “sublime” instead of “subl” to name my symlink, because I type it many times per day and I prefer a understandable word instead something weird. Sorry, but “subl” sucks! You can choose your own keyword for it.

 

Settings customization

Sublime has global settings, user settings and file type settings (and more), and it’s important to keep the global settings save in case you need to rollback to a default statement. That’s why we use the user settings to customize the editor. Also because in case you share the computer, other users can have his own customization.

User settings: Go to Sublime Text >> Preferences >> Settings – User

{
“draw_white_space”: “all”,
“font_size”: 20.0,
“show_full_path”: true,
“translate_tabs_to_spaces”: true
}

  • draw_white_space: Makes the white spaces visible in the editor. Spaces are shown with small white dots and tabs are shown with thin white stripes.
  • fonts_size: It’s hateful to use a a too small or too big font. Adequate it to your screen and resolution so that you feel comfortable with it.
  • show_full_path: Shows the complete path to the open file on the title bar instead of just the filename.
  • translate_tabs_to_spaces: When you type a tab, it places white spaces instead. Great to keep clean indentation. You can also customize the amount of spaces.

 

File type settings: Open the a file of the type you want to customize and go to Sublime Text >> Preferences >> Settings – More

{
“tab_size”: “4”
}

  • tab_size: It determined how many spaces the editor uses for every tab. It combines great with the translate_tabs_to_spaces configuration. In my case, I use a 2 spaces tab size for javascript files and a 4 spaces tab size for php or html files.

 

Other View configurations:

  • Sidebar: It shows the sidebar with the file tree on the left side (View >> Sidebar >> hide/show).
  • Word Wrap: It makes every line of code to continue infinitely to the right so far you don’t use a line jump or to autojump to the next line when you reach your prefixed line with. for example, if you configure your word wrap to 80 columns, when your lines of code reach this with, they will jump to the next line automatically (View >> Word Wrap / View >> Word Wrap Column).
  • Ruler: It shows a vertical line for the selected line with so that you see where is the limit you like. Nothing happens if your lines cross the line. It’s just a visual reference. It’s a good practice to turn it on for 80 columns and try to keep your lines of code on the left side of the ruler (View >> Ruler).
  • Layout: You can customize your layout to see for example 2 columns or a grid of 4 spaces, and place a different file on every one of them to see all of them at the same time (View >> Layout).

 

Useful shortcuts

The most of them are the normal and intuitive shortcuts from other editors, but maybe some of them can give you a surprise with his behavior.

  • Cmd + O: Open file
  • Cmd + F: Search text in the file
  • Cmd + F + ⇧:  Search text in the project files
  • Cmd + T: Search file in the project
  • Cmd + R: Search method in current file
  • Cmd + ↩ or Cmd + ⇧ + ↩:  Insert line after or before
  • Cmd + Ctrl + ↑ or Cmd + Ctrl + ↓:  Move line/selection up or down
  • Cmd + L: Select line – Repeat to select next lines
  • Cmd + D: Select word – Repeat to select more instances
  • Cmd + backspace: Delete from cursor to the end of the line
  • Cmd + del: Delete from cursor to the beginning of the line
  • Cmd + ⇧ + D:  Duplicate lines or single line without selection
  • Cmd + J: Join line below to the end of the current line
  • Cmd + /: Comment / Uncomment selection or line
  • Cmd ++ V:  Paste with indentation
  • Cmd + W: Close tab
  • Cmd + Q: Quit Sublime

 

Managing packages (plugins)

To manage Sublime’s plugins, we use the Package Control to make it easier and faster. Install it to start browsing packages! Copy and paste in the sublime console ( View > Show Console ):

import urllib.request,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404’ + ‘e330c659d4bb41d3bdf022e94cab3cd0’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

When it’s done, close and open the editor. That’s it. Easy right?
Now use it like this:

  1. Use the shortcut Cmd + Shift + p to open the command line
  2. Start typing “install” until you see the command “Package Control: Install Package” and press enter
  3. browse the packages until you find what you need and press enter over it to install it

 

Essential plugins (imho)

Advanced new file (Cmd + alt + n)
File and/or folder creation. The root path is taken from the root of the open project. If there is no root, it’s not possible to create a new file or folder.
You can also create files and folders in one single shot (Example: “myfolder/otherfolder/deeperfolder/file” will create those 3 folders and the file inside).

Sublime Linter
Syntax error highlighting

Color Highlighter (There is a bug for OSX. Sometimes it works, and sometimes not)
Color highlighting with underlined color and color background on click. If you work with CSS (or less/sass) it’s mandatory.

Color Picker (Cmd + shift + c)
Color picking like in image editors.

Stackoverflow search
Right click on a selection to search it in Stack Overflow.

Bracket highlighter
Highlighting for brackets and other open/close elements.

Sidebar Enhancements
Adds a lot of utilities for the right click menu on the sidebar.

Git Gutter
Shows git symbols for state modifications in the gutter for every modified line of code.

Sidebar Git
Adds a lot of git actions the right click menu on the sidebar.

Less
Adds Less syntax highlight.

Sass
Adds Sass syntax highlight.

Emmet
Shortcuts (similar to css selectors) to improve html markup development speed.

 

 

Leave a Reply