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.

78 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?

  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. M says:

    great tips!

  32. Jesper says:

    Does anyone know if there is a way to change the background color of the line that is folded, the only reason i don’t use code folding is because it is so unclear what is folded and whats not, the arrows is the only visible cue.

  33. Luca says:

    Thank you!!! I was searching for adding line-height and found a lot more! 🙂

  34. Sweet! Thanks for the tips!

  35. Tyler Burton says:

    Hey Wes, I’m just jumping into Coffescript on a current project and wondering if there’s any setting you know about to show the current row I’m tabbed to. This would make it a hell of a lot easier to scope the Coffescript indents correctly for long functions.
    Thanks for all your suggestions above. Looking forward to the book..

  36. Paulo says:

    Thanks for the nice tips!

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

  38. chiuan says:

    how can i show more tabs?

  39. Julio says:

    THIS was great for me. Thank you!

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

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

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

  43. mplewis says:

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

  44. I have read so many articles or reciews on the topic of the blogger loovers but this article is really a fastidious piece of writing, keep iit up.

  45. Shemeer says:

    Thank you!!!

  46. 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 😀

  47. Juan Prieto says:

    Thanks dude. Still relevant!

  48. ask says:

    Hi there would you mind letting me know which web
    host you’re using? I’ve loaded your blog in 3 completely different web
    browsers and I must say this blog loads a lot faster then most.
    Can you suggest a good internet hosting provider at a fair price?
    Thanks a lot, I appreciate it!

  49. ask says:

    I do not even know how I stopped up here, but I thought
    this post was great. I don’t recognize who you are
    but certainly you are going to a famous blogger if you aren’t already.

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

  51. Tristan says:

    Does anyone know if it’s possible to change line-padding for different file types? I’d like a lot of padding for PHP and HTML files, but far less for Stylus files. Thanks!

  52. ohad says:

    great tips tnx

  53. som says:

    Great write up. Its very useful

  54. Really nice tips. Thanks for the post.

  55. Mario says:

    I´m trying to modify Sublime to highlight modified sidebar labels.

    I used this piece of code and it`s variations, like “sidebar_tree”, sidebar_tree_row etc., but it doesn´t work.

    “class” : “sidebar_label”,
    “settings”: [“highlight_modified_sidebar_label_row”],
    “parents” : [{“class”: “sidebar_label_control”, “attributes”: [“dirty”]}],
    “fg” : [245, 100, 90]

  56. Rahat Ali says:

    Very nice tips

  57. Slawek says:

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

    "gutter": true

  58. Awesome…. Very useful tips.

  59. Me says:

    Hey, good tips, thank you! 🙂

  60. Gayan says:

    Really nice tips. Thanks for the post 👍

  61. Gayan says:

    Really nice tips. Thanks 👍

  62. Yaswanth says:

    Hi everyone in every new line , the line starts from the left margin, I want it to start after some space, what changes shoulld I make in settings??

  63. barman says:

    Awesome tips. I just used all of these. The padding between lines makes the UI so nice.

  64. Wagner Rodrigues says:




  65. brizbhushan yadav 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!

  66. Akhil Antony K says:

    …really useful tips to code in style

  67. Lev says:

    Thanks! All 5 tweaks a great!

Leave a Reply

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