Tutorials, Ubuntu, Web Programming|July 21, 2012 12:30 pm

Visited 12,524 times.

The Perfect jQuery-PHP-Javascript-HTML-CSS Editor : Sublime Text 2

Note : Finally I got the trick to make it work with WINDOWS!!!! so enjoy :D

Hello guys :D, after playing with a wide diversity of editors, I stick with the Sublime Text 2. At first look, ST2 seems a very basic editor with no options, plus is $59 a license! kinda expensive for a wordpad editor… but it is worth enough for what you will get, plus is cross platform! : it works on Mac OSX, Windows and Linux! so it make it perfect to work anywhere, any time and any moment.

ST2 has a wide set of plugins, and practically is kinda difficult to check out what you must use… until now since I will give you some help to make it the perfect jQuery-PHP-Javascript-HTML-CSS you always you wanted.

NOTE : Sublime Text 2 is an EDITOR, not and IDE, Debugger, Graphic editor, or whatever you expect, nevertheless you can code FASTER than EVER with this modifications…

1. Download it! even if is unlicenced

you can work nice with it. the investment is worth and the guy deserve it… get your flavor from here:

http://www.sublimetext.com/2

But wait! There is something that you must know if you use the windows version : ST2 is an excellent editor, but you must pay a price for it.  What it is? additional programs to download to ensure the correct workflow of the program. So far after exploring ST2 files and a quite a look on my ubuntu version, the program will work like a pearl if you install:

If you ask me “why i should download more files?” I will give you this explanation : the versions of mac and ubuntu works perfect since Perl and Python are embedded in their systems. Sadly Windows does not incorporate such elements in its OS, so you must download them. If you don’t install the programs, you will got a LOT OF ERRORS OF INSTALLATION when you install your plugin. This is in my opinion the big problem with Sublime Text 2, but after some tweaks, I got a perfect installation. The files above installed with the version number reflects my local Ubuntu VM settings:

Version of pearl-python on my Ubuntu Distribution 10.04 TLS, so we can match a “perfect” installation on Windows

2. install ST2’s package manager

Once we installed our editor, we need to run a line of code on the console of the editor. so Press CTRL + [`/~] (yes, that key to the left of the 1 key above of your Q key…).

Step 2 – Installing the Package manager

then we need to copy and paste write  the following code, then press enter :

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

and close at all your editor and start it again.

3. The Package Control Location

now we have a new item on the preferences : the “package control”, do click on this item.

Step 3 – The package Control

4. Choosing Packages

Once you do click on the item mentioned above, you will get a list of actions to do with the package control. What we will do is to click on “Install packages”.

Doing click on “Install Package” you will be able to access the full list of plugins

Update (December 7, 2012)

Now, its time to do the list of packages you need to do click :

  • Additional PHP Snippets
  • Alignment
  • Auto Semi-colon
  • BracketHighlighter
  • Case Conversion
  • ChangeQuotes
  • Clipboard History
  • CSSLint
  • Code Alignment
  • DetectSyntax
  • Emmet (a renew brand for ZenCoding)
  • Hex to HSL Color Converter
  • Hex to RGBA
  • HTML5
  • jQuery
  • jQuery Mobile Snippets
  • jQuery Snippets pack
  • JS Minify
  • JsFormat
  • LoremPixel
  • PlaceHolders
  • Prefixr
  • Sublime-HTMLPrettify
  • SublimeCodeIntel
  • SublimeLinter

Adding jQuery Autocomplete Features

As well, the jQuery addon for Sublime Text is not enough. It has some syntax features but no autocompletion, so in part we are screwed up.

Thanks to AndySonsw, I was able to add the autocomplete features in his gitHub page, So here the steps:

  1. Download the zip package from his GitHub page
  2. Extract the content in a place you can access it quickly, look for the file “AndyjQuery.sublime-completions”.
  3. Not sure if it will work just placing the file with the current name, so I renamed it as “jQuery.sublime-completions”
  4. Place this file in C:\Users\{{Your User}}\AppData\Roaming\Sublime Text 2\Packages\jQuery.
    Note : Do not bother to ask me what to do for Windows XP, for me, XP is out of maintenance.

Once you install this packages you must restart your editor.

And that’s it. If you find useful packages let me know, I want to implement that in my ubuntu machine and check the windows version as well. You like this tutorial? give a comment as well

Soon I will post a Video-tutorial with all these steps.

No Comments

Leave a Reply


Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


%d bloggers like this: