The Complete Visual Guide to Sublime Text 3: Plugins Part 2

Less2Css

 Official Resource

If you don’t already know, Less is a JavaScript based CSS pre-processor. In short, it’s code that can be compiled into CSS. The code has added features like variables, functions, mixins, etc., and it follows a very similar syntax to CSS. Ideally, you would want to be able to compile your Less code on file-save so that you’re automatically always getting a nice CSS file to reference to for your website or webapp. Alternatively, with Less being built using JavaScript, there’s a method for adding a JS file to your webpage and have it compile inside of the browser client-side – but this has never felt right to me.

There’s plenty of ways to compile your Less code on file-save. There’s Grunt, Guard, and Less.app. Sometimes you’re not going to need or want all this overhead though. Less2Css is the perfect use case for when that happens, and it will compile your Less code to a CSS file on file-save from within Sublime Text. There’s a few things you need to do to set it up. Here are the instructions for mac users (Windows will be very similar):

  1. Install Node.js on your system
  2. Install NPM (Node Package Manager)
  3. Install Less Globably npm install less -gd

Even though we installed Less globablly, for whatever reason Sublime still might not be able to detect it in your OS’s PATH. So, to ensure it works, lets update the plugin’s User Settings with:

        
        {
            "lesscCommand": "/usr/local/share/npm/bin/lessc"
        }
        
        

Now when Less2Css detects a Less file (*.less), on file-save it will attempt to compile it using the Less compile command (lessc) that we just specified. By default Less2Css will just compile it to a .css file with the same name you used in the same folder. There are a bunch of User settings for you to change this though.

Sass for Sublime

Sass is very similar to Less with the exception of a few things. For example, while Less is JavaScript based, Sass is actually Ruby based. You can use Grunt, Guard, or Sass Watch (sass --watch) to detect a file-save of *.scss or *.sass files and automatically compile them to a CSS file. Like Less2Css, you can also use Sublime to do this for you, but it involves a few extra steps and it’s actually more than one plugin. Here’s how to do it on Mac:

  • Make sure Ruby is installed
  • Install Sass Ruby Gem gem install sass
  • Install Sass package for Sublime
  • Install Sass Build package for Sublime
  • Install SublimeOnSave package for Sublime

Now that we have all the moving parts, let’s explain. We installed Sass on your system, we installed a bunch of Sublime helpers and dependencies for Sass (like syntax highlighting), and then we installed the SublimeOnSave package to detect for us when we have saved a Sass file. SublimeOnSave detects a file change and runs a command. Its default settings are to run commands for both Less and Sass files, but since we are already setup with Less, we’ll need to remove them from the settings and only specify Sass files. Add the following to that plugin’s User Settings to complete the process:

        
        {
            "filename_filter": ".(sass|scss)$",
            "build_on_save": 1
        }
        
        

Now when you save a Sass file it will detect the change, compile the code, and write it to the disk as a .css file. You can reference this CSS file in you website or webapp. If you want to configure settings such as where to save, minify options, and things like that, you’ll need to change the settings on Sass itself from the command line. The official docs have great information for doing that.

Emmet

 Official Resource

Emmet is a plugin that greatly improves workflow for CSS and HTML. In short, it’s a bunch of very obvious short codes that follow a similar syntax for creating markup on the fly.

Emmet is integrated very well with Sublime Text. We have an entire interactive article on getting started with it as well. For additional information you can also visit Emmet’s official website.

GitHub Gists as Snippets

 Official Resource

There’s a plugin for any snippet you basically can think of, but it’s still never the same as having your own personal snippets. You can write your own snippet, or you can use the Gist plugin to manage your snippets for you. With this plugin, you can:

  • Open a Gist
  • Create a Public Gist
  • Create a Private Gist
  • Add current file to Gist

Here’s the steps you need to take to get this working:

        
            {
                "token": "99a31f5294801d486ad3058451f3f8f95cdbbd55"
            }
        
        

There’s a whole bunch of configuration settings for this plugin as well. Some of these config options are:

  • Including a specific person’s Gists
  • Including a specific group’s Gists
  • Showing only starred Gist
  • Hooking in GitHub Enterprise Support

Git

 Official Resource

This is in my opinion one of the best, if not the best, plugins available for Sublime Text. Git is integrated so seamlessly you don’t even realize it’s a plugin. It can do essentially anything you normally would do with Git all from within Sublime. Some of the common commands you could use are:

  • git ini
  • git add
  • git remove
  • git commit
  • git pull
  • git push
  • git log
  • git diff
  • git checkout
  • git checkout
  • git branch

Git Gutter

 Official Resource

Git Gutter lets you see in your editors Gutter (next to the numbers) which lines are changed from the last Git Commit. It’s a nice touch that helps visualize your workflow. It’s also a helpful reminder to make sure your committing often enough.

DocBlockr

 Official Resource

DocBlockr makes “writing documentation a breeze”. It assists with all your docblock and comment blocks in your code. Some of its features include:

  • Docblock Completion
  • Function Documentation
  • Variable Documentation
  • Comment Extension
  • Comment Decoration

Comment Snippets

 Official Resource

This comment plugin is a little different. It’s less of a helper and more of just a bunch of useful snippets.

Section Comment Block

        
        /*=============================================
        =            Section comment block            =
        =============================================*/
        
        

Subsection Comment Block

        
        /*==========  Subsection comment block  ==========*/
        
        

To-do List

        
        /**
        
            TODO:
            - First todo item
            - Second todo item
        
        **/
        
        
        

End of Section Comment

        
        /*-----  End of Section comment block  ------*/
        
        

Markdown Preview

 Official Resource

Simple Markdown helper plugin that includes the following features:

  • Markdown Cheatsheat
  • Markdown Preview in Browser

Additional plugins

This covered plenty of plugins, and, admittedly, I don’t even use some of these in my normal workflow routine. Here’s a list of some other ones that might be worth checking out as well:

Lastly, Package Control tracks downloads and shows you which plugins are trending and which ones are popular. It’s an excellent resource for finding new and up and coming plugins.