How to Setup Sublime 2 Text Editor

For those of you who want to setup Sublime 2 text editor to start coding in jQuery (or any other language) here is how you can do it in just a few minutes you can be coding with it.

1. Download & Install the Package

Download Sublime 2

There is also a dev build which will prompt you for updates when new features become available (usually every few weeks or so – I recommend this option until its out of beta and gets officially released).

2. Download & Install Useful Plugins

Copy plugins (including the jQuery package) to:

C:\Documents and Settings\deerings\Application Data\Sublime Text 2\Packages

Or you can type “%appdata% into cmd to load the directory.

3. Customise Look & Feel

Change to custom theme (I’ve chosen the light soda theme):

Sublime Text 2 -> Preferences -> User Global Settings:

{
    "theme": "Soda Light.sublime-theme"
}

I have been using Notepad++ for quite some time now and my mind has gotten used to the colours and the way it lays JavaScript out. So, as I couldn’t find Notepad++ theme for Sublime 2 so I decided to create my own. Change theme to notepad ++ (or another to suit your taste):

Sublime 2 > Preferences > Color Scheme > [choose theme]

Download the notepad plus plus theme I created.

4. Customise User Settings

There are a few tweaks here and there to make Sublime look & act like you expect it to, I have listed the main ones below.

Sublime Text 2 -> Preferences -> File Settings – User

{
    "autoIndent": true,
    "color_scheme": "Packages/Color Scheme - Default/Notepad-Plus-Plus.tmTheme",
    "copyOnMouseSelect": false,
    "drawWhiteSpace": "none",
    "font_face": "Courier New",
    "font_size": 10,
    "gutter": true,
    "highlightLine": true,
    "rulers": false,
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "use_tab_stops": true,
    "wantVerticalScrollBar": false
}

Customise more options: http://www.sublimetext.com/docs/file-type-preferences

Customise Hotkeys

I am a BIG fan of hotkeys so I have made quite a few changes to suit my needs and what I am used to pressing.

Sublime2 > Preferences > Key Bindings – Default

  • CTRL+SHIFT+D – Copy Selected (block/line). In Notepad++ this was just CTRL+D. You need CTRL+D for expand selection so make sure you change this so you don’t have a double map on commands.
  • CTRL+/ – Comment Selected (line). In Notepad++ this was CTRL+Q. Again this is used for recording a macro by default so make sure you change this also.

CTRL+P – quick search files
CTRL+SHIFT+P – quick search commands
SHIFT+F11 – fullscreen code
CTRL+D – multiselect
CTRL+SHIFT+D – quick copy selection to line below
CTRL+H – find and replace

Conclusion

That’s it! There are heaps more customisation you can make but this will give you the basic setup to start work!

FAQ

Some questions I answered about Sublime 2 if your having trouble setting it up hopefully they will help you.

How to set default language jquery?
Install jQuery package then press CTRL+SHIFT+P and type “jquery”

How to fade those solid horizontal lines in code?
restart Sublime fixed this

How to get a theme which looks like default Notepad++?
I made my own version to mimic it called Notepad-Plus-Plus

How to switch the console from bottom to top (ie use the top console)?
install quick plugin then press CTRL+P / CTRL+SHIFT+P

How to collapse functions?
Not yet but feature is being developed.

Why is my quick file switch not working?
Check that you don’t have duplicate key bindings preventing it – search for “CTRL+P” in the default key bindings file.

How to quickly compare files for equality?
highlight them in the navigation bar > right click > dff files

How to make code pretty in sublime2?
The is a plugin which can do this. See post: Javascript Beautifier Plugin with Sublime 2

Errors?
sublime2-jquery-error

  • Try deleting the jQuery package folder reload Sublime, then close it. Then copy back in the jQuery package folder. This should do the trick when it registers with the language files.
  • Else, Try deleting the cache files.
  • Else, Try deleting the package control plugin folder and installed packages folder (it may be blocked by your proxy).

Related posts: