How to Setup Sublime 2 Text Editor

Sam Deering
Tweet

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 SettingsdeeringsApplication DataSublime Text 2Packages

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:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: Javascript Beautifier Plugin with Sublime 2 | jQuery4u

  • bird

    nice editor…try it

  • steve

    Thanx for the post. I’ve found your setup stuff helpful. I just wanted to point out that your settings that read:
    {
    “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
    }
    are a mix of v2 and v1. v1 used camel case, and v2 does not. So, try replacing the camel case with underscores and you should be good to go. Some of the settings are defaults anyway. So they don’t make a difference. If you just look at the global file and copy and paste settings that you want to change over to the user file that’s the best way to make sure you get the syntax correct. I suspect you’ve taken some of the settings from the v1 documentation.