I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

5 great visual tweaks for Sublime Text

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 preferencesSettings - 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.

"caret_style": "phase"

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.

"highlight_line": true

ss 2013-01-08 at 11.21.30 AM

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.

 "line_padding_bottom": 1,
  "line_padding_top": 1

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!

"fade_fold_buttons": false

ss 2013-01-08 at 11.27.27 AM

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.

"bold_folder_labels": true

ss 2013-01-08 at 11.28.45 AM


This entry was posted in Sublime Text. Bookmark the permalink.

50 Responses to 5 great visual tweaks for Sublime Text

  1. Sean says:

    Great tips! Sublime Text is my go-to text editor. Your suggestions add some nice flair to an already stellar interface. Thanks!

  2. Joel C says:

    Great tips, Sublime Text was the first editor I laid down cold hard cash for and haven’t regretted it. I’m excited to start working with these tweaks.

  3. Alex Vazquez says:

    Really great write up. Small tweaks mean a lot when you’re coding for hours. Can’t wait to read the book

  4. Mike Earley says:

    Thanks for writing the article, and the book! I look forward to it. I’m hoping you’ve got a section on Regular Expression! 🙂

  5. Hey Wes, well done. I particularly like the highlight line option. That’s a really nice one. I can’t seem to get bold folder labels or fade folder buttons to work as you’ve indicated in the screencap. I use code folding regularly so the arrows aren’t important to me, but the folder labels would be valuable. Does it have to do with the font used? I’m currently using Adobe Source Sans Pro. Here’s my current Preferences file for reference:


    • wesbos says:

      That bizarre. Are you on windows/mac/linux? did you try restart sublime? (you usually don’t need to, but give it a shot).

      To see if the setting is being applied properly, go to view -> show console and enter in view.settings().get('bold_folder_labels'). If its enabled properly it should return true.

    • Jelmer Borst says:

      Make sure that you have downloaded and installed the bold version of Adobe Source Sans Pro, otherwise it will – indeed – not work.

      • Turns out that what it was. I went with another font (Ubuntu Mono) to try it out and installed the bold version. All of a sudden I noticed class names were bold and params were italics, etc. I was amazed.

  6. Awesome tips 🙂 Thanks for helping to start my morning off on the right foot.

  7. Larry Botha says:

    nice tips!

    I’ve never been satisfied with the default styles of the sidebar in the Monokai theme (which is my favourite), so I redid them to better fit with Monokai, and created a gist:


  8. Thank you very much for the tips, Wes! I didn’t even know that there is code folding available in Sublime Text. So 4 and 5 were totally new (and helpful) to me.

  9. Pingback: Weekly Tech and Science Links (#3) | Darker Nemesis

  10. FichteFoll says:

    I can just recommend everyone who is using Sublime Text to look into the default settings file and look what’s available. You could’ve easily find out about this and much more by just scanning the existing options (which have a description, too).

  11. Yousuf says:

    Great Man..! This should be made the default setting of Sublime Text. Thanks

  12. Pingback: This Week in WordPress: Jan 14, 2013 - Theme Customizer

  13. John C says:

    What font and theme are you using?

  14. Ed says:

    Thanks for tweaks!

  15. We are expecting more from you for the sublime. Thanks much.

  16. kmf says:


  17. Pingback: Sublime text 2 - mój zestaw ★ BobikoPL Blog

  18. John says:

    Thanks for every other fantastic article. Where else
    may anyone get that type of info in such a perfect means of writing?
    I’ve a presentation subsequent week, and I am on the search for such info.

  19. Pingback: sublime text中5个外观设置小技巧 | yoclove

  20. Randell says:

    Hello! Do you know if they make any plugins to protect
    against hackers? I’m kinda paranoid about losing everything I’ve worked hard on.
    Any suggestions?

  21. Henrik says:

    As for caret style, you can have both “wide” caret AND “phase” (highly recommended!):

    “wide_caret”: true,
    “caret_style”: “phase”

    • wesbos says:

      I did not know you could combine them like that. Awesome tip, thanks!

    • Nicholas says:

      In sublime text 2, I don’t seem to be able to combine them like mentioned here. When I add that to my user preferences or the default sublime preferences, I get this error:

      Error trying to parse settings: Expected value in ~/Library/Application Support/Sublime Text 2/Packages/Default/Preferences.sublime-settings:106:5

      Any suggestions for getting both phase and wide?

      • Sourabh says:

        Notice those quotes? They are not the ones that sublime uses, replace those with normal quotes and it’ll work.

  22. Nicholas says:

    How do I change the color of the cursor to make it yellow like the one you show in your screenshots?

  23. Michael says:

    S-T 3 public beta hit the shelves today, just F everyone’s I. I’ve been using it for some time and it rocks, of course.

  24. Ron says:

    Hi Wes,
    Nice to meet you. I noticed your post in the sublime text community.
    I scrolled your website and I downloaded your Cobalt2 gitrepo settings in combination with your extra tweaks, and yes you are right. It’s a great theme!! 😉 Thanks.
    I signed in for your sublime book. Keep on the good work.

    Greetz from the Netherlands,


  25. Michael Merline says:

    Any idea how to add more wrap padding to the right side of the Sublime Text window? It’s possible to change the gutter and margin size at left, but I don’t think that adjusts the space at the right side of the window.

  26. Bill says:

    Awesome tips! Thanks.

  27. Sourabh says:

    Hey nice tips. I really like that line padding tip, it really makes the code readable. Do you know any plugin that can make typing smooth? just like in MS Word 2013. That’ll be really great

  28. BD says:

    Brilliant tweaks :). Works perfectly in Sublime Text 3
    Looking forward to your new book 🙂

  29. Leo Gallucci says:

    Cool, i needed all these tips. THANKS!

  30. Jacob says:

    Wow. This article has more awesome and useful content for ST customization than most articles/videos I’ve seen thus far. I’m looking forward to your book. Thanks!

  31. Thanks. These tips all worked well on a 64-bit linux machine using Ubuntu 12.04. Actually the tip I was looking for (in addition to those you kindly provided!) was a shortcut to fold-all. I can’t get CTRL-k j (i.e. hold CTRL, hit k, hit j, release CTRL) to work, or for that matter CTRL-k 2 or any other level. Perhaps a shortcut conflict with Unity, but I am not sure.

  32. chiuan says:

    how can i show more tabs?

  33. Pingback: Don’t bring a banana to a gun fight – stepping your web dev game up with some tools and tricks of the trade | Proudfeet

  34. Pingback: 5 great visual tweaks for Sublime Text | blog

  35. Pingback: View your changes live in a browser while you edit in Sublime Text

  36. mplewis says:

    Thanks for these tips! I didn’t know about any of these settings options.

  37. Edmund says:

    To have a block cursor alike vim, add this to user settings:

    “caret_extra_width”: 9,

    You may choose the width is 8 to 10, it will be narrow and broader. It’s up to you 😀

  38. Oscar Campbell says:

    You could always change the color of the sidebar you know. It’s not done by default in the default themes, but it’s available.

  39. ohad says:

    great tips tnx

  40. Really nice tips. Thanks for the post.

  41. Slawek says:

    Line highlighting doesn’t work in Distraction Free mode unless you enable the gutter in the Distraction Free user settings.

    "gutter": true

Leave a Reply

Your email address will not be published. Required fields are marked *