Fixing Sublime Text 3’s CSS Comments

I’ve been doing a lot of web design work lately, and I’ve noticed that Sublime Text 3 has this really weird quirk with CSS comments.  When you press Ctrl+/ you get a strange your comment comes out like this /*This is a Comment*/ instead of like this /* This is a Comment */

Since it’s Sublime Text, I knew it had to be possible to reconfigure this. After asking a friend or two (special thanks to Kara McNair), and doing some digging, here’s the solution, using Package Control & Package Resource Viewer:

1. Install Package Resource Manager: Ctrl+Shift+P -> Install Package -> PackageResourceManager
2. Ctrl+Shift+P -> PackageResourceManager: Open Resource -> CSS -> Comments.tmPreferences
3. Look for TM_COMMENT_START & TM_COMMENT_END and modify the strings directly below them

In case you’re wondering: Sublime Text uses Textmate files for all of its language-specific settings (you can apply this approach to any language actually!)

Here’s what the Comments.tmPreferences looks like. Notice how the <string> tags say </* > & < */> instead of </* > & < */>:


Inspired by this, I did a bunch more diving in to messing around with Sublime Text – including discovering a lot of really amazing packages!!  I also made My Very First Pull Request to an Open Source Project all on my own.  (The CSS3 Package happened to have this exact same issue)

I’ll be posting about that soon 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s