Choosing a font to use in your editor is a very important step in your workflow that many developers don’t think twice about. Small things like the difference between 0 vs o or l vs 1 and large things like the readability of the font is key to your productivity and strain on your eyes.
If you are still using the default that came with your editor, it might be worth checking out a few below and see how you like coding with each of them.
Since talking about text editor configuration is a huge interest of mine, This list has been compiled over the last year talking to developers at meetups and on twitter. So while the list isn’t totally complete, It’s a great reflection of what developers are using these days.
I’m a big keyboard shortcut user. After a while you may find that you are running out of easy keyboard shortcuts.
One little trick that many developers do is to remap their capslock key to something a little more useful.
In my case, I remapped my capslock key to open up the Divvy window manager.
Whatever you use it for is up to you, but don’t just let a perfectly good key sit dormant! Watch the 5 min video below or follow the instructions. Happy keyboarding!
Disable the Capslock key
First thing you’ll need to do is open System Preferences → Keyboard → Then click the Modifier Keys button in the lower right.
Set your capslock key to No Action and repeat for every keyboard you have attached in the “Select Keyboard” dropdown. If you are on a laptop with an external keyboard you’ll need to do this twice.
Remap the Key
To do this, we need to use a program called Seil (previously PCKeyboardHack). Download, install and open it.
Check the first box that says “Change Caps Lock” and set the keycode to be one that you do not use and ideally a key that you do not have. A popular choice here is 80, which maps to F19. Unless you have a huge keyboard, you probably do not have an F19 key.
Now when you press your Caps Lock key, they system will interpret this as a press of the F19!
Now you get to choose which program you want to map Caps Lock to. I chose Divvy:
It works with any program that accepts a hot key including Alfred and Slate.
<!-- <script src="jquery.js"></script> -->
The underlying problem is inside the HTML syntax file and it is actually an easy fix.
We need to edit the HTML.tmLanguage file that is located in preferences → browse packages → HTML.
Open it up and look for a line that looks like the following. It should be around line 286.
By default, git uses Vim as the editor for commit/rebase messages. This can be somewhat limiting if you aren’t comfortable with using Vim, especially if you need to move around lines of code.
Luckily it’s easy to switch over to using Sublime Text as the editor for your messages. When git needs you to input and save a message. It will simply open up Sublime Text and prompt you with the file that needs editing. Once you save and close the file, git will continue on with what it needs to do.
First thing we need to do is to make Sublime accessible via the command line. Chances are you might already have this installed, but if you haven’t, you can follow the instructions here. If you are still on Sublime Text 2 – follow these instead.
Set git to use
Next, open up your Terminal or command line and paste the following:
git config --global core.editor "subl -n -w"
That’s it! Next time Git requires you to edit a file or commit message, Sublime Text will pop open!
At my jQueryTO talk I showed a new Sublime Text Package called GutterColor that allows you to view your CSS colours in your gutter.
Amazing! It works with plain CSS, SASS, Stylus or LESS. If you are any sort of front end developer, you probably want this right away! Unfortunately the install process is a little klunky as it relies on a lower-level program called ImageMagick to be installed on your computer. It’s easy to do, just requires a handful of steps to get up and running.
TL;DR: brew or port install ImageMagick and set the path of your convert script in your GutterColor prefs.
Installing ImageMagick on OSX
So, we need ImageMagic to be installed on our computer. The easiest way to do this is with a package manager for your mac. If you already have homebrew or macports installed, you can simply type one of the following into your terminal:
brew install imagemagick
sudo port install ImageMagick
No idea what brew or macports is? You’ll need to install that first before you can install ImageMagick. I recommend using HomeBrew. Simply open your terminal window (found in applications → Utilities → Terminal) and paste the following code in and hit enter:
That will ask you for your computer’s password and then take a few minutes to install homebrew.
Once that is complete, copy and paste this into your terminal as well:
brew install imagemagick
This will also take a few minutes to install, grab a coffee!
Finally, type the following into your terminal
This will return the location of your imagemagick convert script. Remember this. Skip the windows part and jump down to Setting up Sublime Text
Installing on Windows
Head on over to the ImageMagick website and download/install the option that works with your computer. If you download the wrong version, no worries, just try another version.
When installing, take note on the install path. You will need it later.
Once you have that installed, check if it worked by opening up the command prompt (start->cmd) and type convert. You should see a few hundred lines scroll across your screen.
Now, you need to find the path that it was installed to. Open windows exporer and find where it was installed to. This is probably something like c:/Program Files/ImageMagick-6.x.x.x We want to find the convert.exe file as below:
Setting up Sublime Text
First we need to go ahead and install the GutterColor package. You can do this via Package Control (Tools → Command Palette → Type install → Search for GutterColor and hit enter).
As of right now, this package requires you to tell SublimeText where the convert script lives on your computer. Go to Sublime Text → Preferences → Package Settings → GutterColor → Preferences - User and paste the following code in there. Make sure to swap out the path if your which convert command returned something different.
"convert_path" : "/usr/local/bin/convert"
In my experience, sublime required a few restarts before it started to work totally. If you see red squares in your gutter, it’s helpful to look in the Sublime Console (view → Show Console) to see if you can make sense of the errors.
When working with wrapped lines in Sublime Text, the default go to End of line doesn’t work as expected. When you hit cmd + → it will bring you to the end of the visual line, something you rarely want when working with wrapped lines:
Watch the video and read below on a quick fix to this problem.
Quick little tip today for Sublime Text and everyone who works with indentation based languages like Python, CoffeeScript, Jade or those who are very diligent with their indentation practices. Watch the video or read the text after the break.
I’ve had this question asked quite a few times over the past month so I thought I would write up a quick post on my answer: probably.
Since my last “First Look” post on Sublime Text 3, 5 months have past and a lot has changed. Updates have been flying out, producing a faster and more stable Sublime Text 3. Since then the beta has been opened to the public, so if you are still checking Sublime out, you can give ST3 a shot.
As I’ve been writing the Sublime Text Power User book over the last few months, I’ve had some interesting conversations around favourite features of ST. The one feature that I constantly surprise people with is called line bubbling – moving lines of code up and down a document without cutting and pasting them.
It’s an extremely simple feature but will save you lots of time and potentially lost code.
Let’s take this list as a very basic example. This list could be any block of code that you want to move up or down – they are only numbered as a visual.
How do we move them up and down to end up in the correct order? We could cut and paste, but line bubbling is much faster.
In Sublime Text, hold down ⌘ + control (CTRL + SHIFT on Windows) and use your ↑ up* and ↓ down arrow keys to move the lines around. This works for single and multiple lines.
Check out the video for a visual:
Easy! Want to learn more, sign up below and I’ll let you know when my book comes out.
I woke up to a real treat this morning: Sublime Text 3! Sublime Text development has always moved at an incredible pace and now just a few months after 2.0 was released, 3.0 peaks around the corner. ST3 isn’t at the point where it can be your daily editor – you will still be using ST2 for some time – but its exciting to take a look at what ST3 has in store for us!
ST3 is only available to registered ST2 owners, you will be reqired to input your license key upon launch. If you forget where you put your license key, go to Preferences → Browse Packages and then open the settings folder and look for License.sublime_license
You can read all the new features over at the Sublime Blog, here are the main features along with some explanation and commentary.
It’s even faster!
Sublime has always been a blazing fast editor and Jon Skinner has outdone himself with this. The editor starts and opens up my last project in less than a second. On OSX the icon doesn’t even reach the top of the bounce before it has loaded.
Python 3.3 & Packages API
Sublime has now switched to Python 3.3. If you aren’t familar, Python is the programming language that Sublime Text uses to expose it’s API. It is how we get all those great packages. Python 3.3 has been out for a while, but many developers have been dragging their heels in upgrading as many of the packages haven’t been ported over. I’m not a Python developer, but according to the Python Wall of Superpowers things are looking better lately.
The downside to this is that most Sublime Text packages will need to be ported to ST2/Python 3.3. The author of Sublime Text says porting to the new API involve minimal work.
Sublime Text package manager doesn’t work yet, but the author Will Bond says work is already underway. Will also has a number of popular packages so I would watch his github, twitter and site for his experiences with porting everything over.
UPDATE: Will Bond has updated package manage to work with Sublime Text 3. See his commend below.
Previously sublime text only allowed you to split your editor into 1-3 columns, 1-3 rows or a grid of 4. This has changed in Sublime Text 3 which exposes controls for splitting panes indefinitely.
I played around with the commands and keyboard shortcuts for a bit but I will be sticking with Origami to manage my panes as I find the commands for moving files splitting panes to be more natural.
ST3 introduces project wide Goto Symbol and Goto Definition. Previously Goto symbol fuzzy search only worked when you specifically noted which file you wanted to look in. In the example above I’m able to see everywhere the post_render function is called in Octopress. This is a really big step up for Sublime that may have a few IDE-lovers jumping ship.
Themes and colour schemes
The UI of Sublime hasn’t changed at all other than a few animations when hiding/showing the sidebar. I’ve tested ST3 with my Cobalt2 theme and color scheme and I’m happy to report that everything worked flawlessly.
Sublime text 3 will go for $70 or a $30 upgrade from ST2 ($15 if you purchased it recently, so don’t hold off buying ST2). Money extremely well spent.
This is just the beginning of ST3 and I’m excited to see what it has in store for the future. A few things that are on my wishlist:
Full blown terminal integration
Binary file display – One thing Coda does really well. If I click an image, I’m able to preview it and get its dimensions.
Find/Replace Macros – being able to record a find/replace and play it back or run with arguments would be very handy.
Sidebar icons – Sublime excells in its simple interface but having icons for folders/filetypes is something that has always been on my list
What is yours? - Post in the comments what you hope Sublime Text 3 will bring
Of course all of this information will be in my upcoming book on Sublime Text. I’m making excellent progress and will have a release date for you all soon. Drop your email below and I’ll give you a hoot when it’s launched.
I’m working hard on my Sublime Text Book and have received fantastic response for everything so far – very motivating. The last post was so well received that I’ve decided to post a few more of my favourite tips.
1. Save on focus lost
Chronic ⌘+S’er? This tip is particularly helpful when working with CSS/LESS/SASS and switching between your editor and browser. Instead of saving on every tiny little change, tell Sublime to automatically save your files when you tab away from the editor.
I find this is super handy when working with extensions like Live Reload or compiled languages like coffeescript that watch for file saves. Put this in your settings file at Preferences → Settings - User
If you work with other watch scripts that break and restart a process upon save (like supervisor or forever), this might not be ideal for you. No problem, only enable it for the languages you want – simply place the above setting in /Packages/User/[syntax].sublime-settings. For example, I put the above in CSS.sublime-settings and LESS.sublime-settings
2. Paste and Indent
One of the best tricks I’ve ever learned in Sublime Text is paste and indent. If you have ever pulled a piece of code off the Internet and pasted it into your application, you’ll no doubt feel the pain of having it paste in all weird and have to go in and fix it.
Easy fix to this, instead of pressing the normal cmd + v to paste, simply switch to using cmd + shift + v to paste. This will automatically indent your code block.
Like that one? I loved it so I remapped my key combos to paste and indent by default on cmd + v
Paste this little snippet into your key bindings file located at Preferences → Key Bindings - User
I’m an instructor at HackerYou where we use Sublime Text extensively. This is a small, yet common, problem that we run into. Making it visually obvious cuts down on mistakes like this.
5. Proper Fullscreen for Mac Users
This one is only for those running Sublime Text on Mac OSX 10.7 or 10.8 with multiple monitors. You have probably realized that apple has really dropped the ball when using fullscreen, rendering the rest of multiple monitors into nothing but a linen backdrop.
If you like to code fullscreen yet still use your other monitors, go ahead and add the following to your preferences file:
You’ll have to restart Sublime Text for this one.
I’ve got plenty more tips as well as in-depth guides on the rest of Sublime Text coming up in my book. If you have a must-use tip or commends on any of the above, please feel free to leave a comment!
I love tweaking Sublime Text. There are hundreds of settings you can change and I’ve blogged about a few of them before.
Here are five visual changes you can use to make your text editor just right. You should place these items inside your User settings file which can be located at preferences → Settings - User
1. Change the caret style
Who thought a caret could be sexy? Change your caret style to phase and it will fade in and out rather than blink.
Other available options include “smooth”, “phase”, “blink”, “wide” and “solid”. I’ve been fond of “wide” which doesn’t blink and is clearly visible for screenshots in my new book.
2. Highlight current Line
This is one thing I wish Sublime Text enabled by default. Highlighting the current line is a subtle visual cue when jumping back and forth between a browser and code.
This is also super handy when you are dealing with long lines of code/text and you want to quickly know if the current line is wrapped or not.
3. Increase the line height
This trick adds just two pixels to each line, but increases the readability of code so much better. Might not be for everyone but I really enjoy this one.
4. Show Code folding arrows
Code Folding in Sublime Text is really great but I’ve noticed most people don’t use it as much as they do in editors because the arrows aren’t visible until you hover over the gutter.
Make them always visible and get folding!
5. Bold Folder Labels
One of the downsides to Sublime Text is that the sidebar isn’t as strong as other editors. One visual cue that helps me out is bolding folders. This helps me quickly identify what is a folder and what is a file.
I’ve got plenty more in a book I’m writing about Sublime Text. If you are interested in improving your text editor productivity, please sign up below and I’ll give you a hoot when it goes live!