Sublime Text 2 review, tutorial, plugins and full setup in just 15 minutes (Part 2) Following on our Sublime Text 2 setup guide and tutorial, here we will install themes, show how to work with Projects and reveal some nice tricks and tips

by
on June 27, 2012
(4 min read)

…continues from Part 1.

Sublime UI Theme and code color highlighting

UI Theme

I’ve got invites for a free bank transfer!

Mac lovers and anyone wanting a nice, clean, minimal and integrated look should go for the Soda Theme (screenshots, download and setup there). There is a Light and a Dark version of the theme. I went for the Light version since it is much more readable and clear.

Installing a theme in Sublime Text 2

To install a theme paste the theme folder at /Users/xestevev/Library/Application Support/Sublime Text 2/Packages/Theme – Soda.

Now in Sublime go to Sublime > Preferences > Settings – User and add this line:

"theme": "Soda Light.sublime-theme",

Code color highlighting

Since I was used to Dreamweaver’s code highlighting and User Interface color I downloaded the Dreamweaver’s theme by Juliana Apolo (website in portuguese, direct link to the download here). Looks pretty good:

Sublime Text 2 customised as Adobe Dreamweaver

Installing color schemes in Sublime Text 2

To install a color scheme paste the downloaded folder at /Users/yourusername/Library/Application Support/Sublime Text 2/Packages/Color Scheme – Default.

Now in Sublime go to Sublime > Preferences > Settings – User and add this line:

"color_scheme": "Packages/Color Scheme - Default/Dreamweaver Blackbam.tmTheme",

It should look like this:

Color Scheme settings in Sublime

Restart Sublime and select it from Sublime > Preferences > Color Scheme > Dreamweaver Blackbam:

Color Scheme setup in Sublime Text 2

Working with Projects in Sublime

Open Sublime, go to Project > Add Folder to Project… and select the root folder of your project or website or server.

Go to Project > Save Project As… and save it in the folder you just selected. Projects are saved as a .sublime-project file so it makes really easy to share the configuration around.

For the FTP details right click the root folder of your project and choose SFTP/FTP > Map to Remote… fill in all the server information and save it (it saves as an sftp-config.json file, again, easy to share with the team).

Now you can open any project by either clicking the .sublime-project file or by going to Project > Recent Projects and selecting it.

Sublime Text 2 Tricks you need to know

Split layout

Split layout is amazing to work and you have full control over the layout. Go to View > Layout and select the most convenient:

Sublime Text 2 Layout with two columns

Multiple windows and usable tabs

Drag and drop a tab in the middle and that file will move to its own window (just like in Chrome).

ShiftIt

Along with Sublime I recommend you to use ShiftIt (open source & free), it’s a Divvy alternative that gives you shortcuts to arrange windows quickly, great for developers. you can download it here.

Create your own plugins, Color Schemes and Themes

You can actually code your own Plugins in JavaScript (or is it Python?), Color Schemes in XML and Themes in JavaScript and a folder of icons and backgrounds.

More tricks

Alain has made a nice list of shortcuts and other cool features of Sublime Text 2.

Please donate to keep this server up

All Sublime Text 2 shortcuts

The End

Now you have your own Sublime Text 2 fully set up and ready to start the real work, use the comments below for doubts, suggestions or anything you feel.

Thank you for sharing the article

    
    

Xavi Esteve wrote this article on June 27, 2012 and published it in english, web design and front-end.

2 comments

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 30€ discount