Over the last couple of weeks I’ve seen a lot of talk on Twitter and general Web Design Forums about what code editor everyone is using. I’ve been using Dreamweaver for a long time, probably too long. I’ve used other code editors and tried to settle in to something that suits me better, but never found it. I’ve used Coda, Coda 2, Espresso and TextMate. Although these editors are good to use and the likes of Coda & Espresso have a really nice UI, I’ve never settled down to one. I’ve always reverted back to Dreamweaver. I don’t know if some of this is to do with habit, but nevertheless, I’ve always gone back. Recently I’ve picked up Sublime Text 2 and was really blown away by it. It’s really straightforward to use and I settled straight in. I’ve also found myself downloading the app at home and haven’t (yet) reverted back to Dreamweaver.
The Basics
I wanted to cover a few tips and tricks I found helpful along the way, which I hope can help you, if you give Sublime a go. There are a few plugins which should just be included as standard and a few tips and tricks to do with keyboard shortcuts and usability.
The first thing I decided to do was get a few plugins/packages installed. The first one you need to be able to do all this is called Package Control. Once you’ve install this, you can use the keyboard shortcut (for mac) cmd + shift + p. This brings up the command palette to select some options. If you start typing you can filter through the results. To start installing some packages, type install and select the Package Control: Install Package. Once you’ve done that, Sublime will load a list of packages to install. The few I’ve installed and would recommend are:
- Alignment
- SFTP
- Git
- Live CSS (not a must)
- MagentoIntel
- Search WordPress Codex
- Tag
- WordPress
Follow the links to read more but the great thing is, you can just search for the title as it appears above.
Keyboard Shortcuts
Theres some really good shortcuts to use within Sublime. On top of this, you can create custom keyboard shortcuts within packages, or ‘keyboard mapping’. One for all you Dreamweaver lovers, is how to change the upload process in the SFTP package. You can add custom keyboard mapping so uploading a file becomes the same shortcut as Dreamweaver. Simply navigate to Sublime Text 2 > Preferences > Package Settings > SFTP > Key Bindings – User. Once you’ve opened up this file, paste in the below code:
[
{ "keys": ["super+shift+u"], "command": "sftp_upload_file" }
]
This now means to upload a file you can use cmd + shift + u.
A few other keyboard shortcuts (for mac) when editing a file are:
- cmd + r - Use this when editing a CSS file. Type the command which will show the command palette, you can then search for a specific CSS selector and jump to it in that file.
- cmd + d - When editing a HTML page, say you need to rename a class name in several places of that document, select the first selector and you’ll see the other selectors highlight. Every time you press cmd + d Sublime will let you edit the selector below at the same time as the first selected.
- cmd + left click - Again, when editing a HTML page, if you press cmd + left click in several places of the document, this will add a new cursor. This means when you start typing, it will type in several locations.
I hope these can be of some use, if you know of any others that you use from day to day, please leave them below!
