Perfection with Sublime Text - Part 2

PRATIK BOTHRA   |  4th September, 2014

Installing Sublime Text

For Linux

Linux 32-bit -:

cd ~
wget http://c758482.r82.cf2.rackcdn.com/Sublime\ Text\ 2.0.1.tar.bz2
tar vxjf Sublime\ Text\ 2.0.1.tar.bz2

Linux 64-bit -:

cd ~
wget http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.1 x64.tar.bz2
tar vxjf Sublime\ Text\ 2.0.1\ x64.tar.bz2

Customizing on Linux - Desktop Entry and Symbolic Link

Linux Users should do the following to take advantage of Sublime Text by doing the next steps -:

sudo mv Sublime\ Text\ 2 /opt/
sudo ln -s /opt/Sublime\ Text\ 2/sublime_text /usr/bin/sublime
sudo sublime /usr/share/applications/sublime.desktop

For Mac Users, after downloading Sublime Text, all you will need is to create a symlink so that you can use sublime from the terminal

sudo ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /usr/bin

The last command will open a file called sublime.desktop in sublime, where you need to paste the following

[Desktop Entry]
Version=2.0.1
Name=Sublime Text 2
# Only KDE 4 seems to use GenericName, so we reuse the KDE strings.
# From Ubuntu's language-pack-kde-XX-base packages, version 9.04-20090413.
GenericName=Text Editor
Exec=sublime
Terminal=false
Icon=/opt/Sublime Text 2/Icon/48x48/sublime_text.png
Type=Application
Categories=TextEditor;IDE;Development
X-Ayatana-Desktop-Shortcuts=NewWindow
[NewWindow Shortcut Group]
Name=New Window
Exec=sublime -n
TargetEnvironment=Unity

For Mac OSX

Users should  download the latest package from here -: Sublime Text 2 - Download Open the .dmg file, and then drag the Sublime Text 2 bundle into the Applications folder.

For Windows

Users should download the latest package from here depending on your operating system (32 or 64 bit) -: Sublime Text 2 - Download. Doubleclick on the installer and follow the onscreen instructions.

Mac and Window Users, if you have further queries check this doc out -: Sublime Text Install Doc

Now this is the basic step. But to be super efficient, this is nowhere enough.

Installing Sublime Text Package Manager

Open Sublime Text Editor. Go to View -> Show Console

On Sublime Text 3, now paste the following code in the console

On Sublime Text 2, paste this code in the console

What does this awesome package manager for you? It basically makes package installations a breeze

We can use Sublime’s command palette by accessing the Tools menu, or by pressing Shift + Command + P, on the Mac or Ctrl + Shift + P for Linux and Windows Users. Whether you need to visit a Preferences page, or paste in a snippet, all of that can be accomplished here. It also opens up a list of commands available to the user. Any library that you install will immediately add new commands here.

To install plugins use the following process:

SUPER + SHIFT + P (SUPER = CMD on mac or CTRL on other operating systems) In the dialogue that pops up, type pi followed by the Enter/Return key to select Package Control: Install Package Now type the package install shortcut listed and hit the Enter/Return key again
 

So click Ctrl + Shift + P, and Type in install, which fuzzy searching enables the closest option Package Control : Install Package.

Now through this you can directly install the libraries you need just by searching for what you need.

Sublime Packages you must install -:

But some of these will need extra configuration. Do note that all these have to go in Preferences->Package Settings -> Select Package -> User Settings . Anything saved in Default Settings will be reset.

  • Bracket Highlighter -: Like the name states, it highlights the brackets, quotes and html tags. It’s a simple plugin, but helps a lot when working on big code files.
  • Doc Blockr -: The ability to create PHPDoc style comments. This plugins does it, and not only it works with PHP, but it also supports Javascript, ActionScript, CoffeeScript, Java, Objective C, C and C++.
  • Sidebar Enhancements -: This plugin extends the sidebar menu, by adding lots of new and useful features like: Move to trash, open in browser, and even copy the content of a file as data:uri base64.
  • Git
  • Drupal Snippets
  • Sublime Lint -: First off, you need this. This plugin is like a IDE itself, it finds errors in your code as you go. It supports dozens of languages, from PHP to Python, Java, etc.. This plugin is not only recommend but it should be mandatory. Now you have to find where the executable of the language are kept. This can be done simply by doing which rubyetc on ubuntu/mac. Go to Preference->Package Settings->Sublime Lint-> Edit User Settings A Word of Warning : Remember this file will always takes input in the form of a json.
<em>
      {"sublimelinter_executable_map": {
      "ruby": "/home/pratik/.rvm/rubies/ruby-2.0.0-p247/bin/ruby",
      "php" : "/usr/bin/php",
      "javascript":"/usr/local/bin/node",
      "css":"/usr/local/bin/node"
    }
  }
</em>
  • Gist -: A sublime package to help you create, edit and use Github Gist straight from sublime text. This will also allow you to use any Gists that you fork in Sublime. Which means if you are browsing Gist and find a snippet that you want to use then just fork it and now you can use it in Sublime. You can follow one of the two methods to complete it's configuration -: Go to Terminal 
<em>
    curl -v -u USERNAME -X POST https://api.github.com/authorizations --data "{\"scopes\":[\"gist\"]}"
  </em>

where USERNAME is your github username 

OR

Log into github 

Account Settings -> Applications "Create New Token" under "Personal API Access Tokens" You might want to give the Token a useful name, Ex: sublime gist

Edit the settings file (it should open automatically the first time you use a Gist command done through Ctrl + Shift + P) to specify token.

<em>
    "token": ""
  </em>

You must enter your GitHub token here

  • AlignmentAgain Ctrl + Shift + P, type install, and search for alignment. Now if you are a designer, you would to extend it's settings to meet your need. For eg-: Goto to Preference->Package Settings->Alignment->User Settings

    <em>
          {
          "alignment_chars" : ["=","{"]
        }
      </em>

    To use it, simply select a block of text and press ctrl+alt+a on Windows and Linux, or cmd+ctrl+a on OS X

Shortcuts to increase efficiency

  • Set Syntax -: Ctr + Shift +P followed by syntax and name of the language. i.e. 'syntax javascript'
  • Copy all selections of a word - : Alt + f3
  • To select word -: Ctrl + D
  • Remove Folder Panel -: Ctrl + K, followed by Ctrl + B . Alternatively, Just search sidebar after Ctrl + shift + P
  • Go to a file -: Ctrl + P
  • Go to a function -: Ctrl + P and begin with @ which displays all function
  • Toggle Full Screen -: F11

Customizing basic settings

Nowdays, I am working in Drupal, so I have shown these settings for Drupal Coding standards. A quick Google Search will give you Sublime Text 2 settings for Ruby on Rails, Wordpress, Java or any other language you may be working on. Lets set the encoding, tab size, ruler line, etc right now so that our code will meet the Drupal Coding standards. Paste the following between the squigly brackets in "Settings - User" which you can access from the Preferences menu, you need to add a comma between this and any existing rules but make sure there isn't a comma on the last line:

<em>
  "bold_folder_labels": true,
  "caret_style": "wide",
  "default_line_ending": "unix",
  "draw_white_space": "all",
  "ensure_newline_at_eof_on_save": true,
  "fade_fold_buttons": false,
  "fallback_encoding": "UTF-8",
  "find_selected_text": true,
  "font_options":
  [
  "subpixel_antialias"
  ],
  "highlight_line": true,
  "line_padding_bottom": 1,
  "open_files_in_new_window": false,
  "rulers":
  [
  80
  ],
  "shift_tab_unindent": true,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "trim_automatic_white_space": true,
  "trim_trailing_white_space_on_save": true,
  "use_tab_stops": true,
  "word_separators": "./\\()\"'-:,.;<>[email protected]#%^&*|+=[]{}`~?"
</em>

Start your Digital

Transformation journey

Consultancy | Design | Drupal