Sublime Text

I am relatively new to using SublimeText as part of my development process, however the bit I have seen is very convincing and I'm hoping to include it even more as time progresses. Undoubtedly, the number one feature of SublimeText is the ability to include an unlimited number of open-source plugins (without any plugins it's simply a more stylish Notepad). Therefore this list is not definitive and I would greatly appreciate your feedback or other recommended plugins (for front-end web development) which we could include in this list.

For starters, download SublimeText from their website. I am using SublimeText 2 since version 3 is still in Beta so the below plugins are for Version 2. Whilst the portable version offers the same functionality as the installed one (minus the context menu); I recommend using the installed version unless you intend to purchase a licence. The reason is that occassionally a popup will appear reminding you that you are using an unlicenced version; whilst using the portable version, the same popup will appear every time you open the program.

1. Package Control

Yep, the first plugin on our list is a package to install more packages (kinda like Inception). The Package Control plugin facilitates managing your pacakges, installing, removing or changing shortcuts. Installing it will also be a bit more complicated, however also relatively simple.

Open up your console (View > Show Console) and run the code snippet on this page: https://sublime.wbond.net/installation. Once you restart SublimeText, you will have this installed successfully. To utilize it, simply press Ctrl+Shift+P to bring up the Command Palette and to install a new package, write out

Package Control: Install Package

2. Emmet

Emmet is used to improve your HTML & CSS workflow by writing CSS-like expressions that are dynamically parsed to output HTML/XML or CSS. Technically this could also be used with other programming languages, although I haven't tried it and would be eager to hear your feedback.

div.container>ul.generic-list>lorem10.item*4

Go to the end of the line and press Ctrl+e and watch the magic happen:

 <div class="container">
     <ul class="generic-list">
           <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, eius.</li>
            <li class="item">Earum optio, dolorum animi hic asperiores reprehenderit eum facilis cumque.</li>
         <li class="item">Eius consequatur soluta minus corporis illo aspernatur provident sequi cumque?</li>
          <li class="item">Eum officia quaerat dolore aliquid reprehenderit, sit placeat consequuntur sint.</li>
        </ul>
   </div>

 3. Git

If Git is your preferred source control, then you should consider including it in SublimeText as it includes some shortcuts and commands, such as Git: Add, Git: Pull, Git: Commit...etc. Not much more to say here.

4. HTML/CSS/JS Prettify

I am one of those developers that despises untidy code. No indentation, no idea when to start a new line...etc; drives me nuts. Visual Studio has a shortcut for Format Selection (Ctrl+K Ctrl+F) which formats your code into something legible and I used to run this shortcut every few mins (almost spastically). Once using SublimeText, I had to take care of this myself, resulting in me getting a bit lazy and my code losing it's syntactic beauty.

HTML/CSS/JS Prettify is one of my favourite plugins, just highlight your code and press Ctrl+Shift+H and it turns this:

 <div><ul class="generic-list"><li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, praesentium!</li>
       <li class="item">Rerum porro rem iste aliquam vel recusandae officiis alias quisquam?</li>     
</ul></div>

 into this gorgeousness:

<div>
    <ul class="generic-list">
        <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, praesentium!</li>
        <li class="item">Rerum porro rem iste aliquam vel recusandae officiis alias quisquam?</li>
    </ul>
</div>

5. TextMate SCSS

If you have read some of our previous blogs on Dev Tools, you might now that we are using SASS to build our stylesheets. Another great plugin for SASS developers, is TextMate SCSS which offers intellisense and adds some trendy colours to your *.scss files.

6. Terminal

Are you a Windows user who hates navigating to the project folder through the command prompt? Using theTerminal package, simply Ctrl+Shift+T and you can open the terminal (PowerShell in Windows) in the file's working directory. Especially great for when you're using grunt.

7. SublimeLinter

Last but not least, a SublimeLinter; plugin that "lints" (is that even a word?) files for style and potential errors, including marking some special annotations such as "TODO". SublimeLinter runs in the background so there are no shortcuts, but you are required to install the separate lint plugins (ex: csslint) through npm and make sure that your plugins are available in your PATH environment variable.

npm install -g csslint

Example:

As I have mentioned, I am relatively new to the world of SublimeText, so feel free to leave a comment in the box below with your suggestions.

8. SideBarEnhancements

UPDATE: I had to add SideBarEnhancements, which creates a pane on the left of your screen from where you could see your open files, browse between files and folders in your project, create new files...etc. Definitely recommended. Unfortunately the one for Sublime Text 2 is discontinued, but you could find it here. You will need to open the folder where you have your packages installed (Preferences > Browse Packages) and paste the extracted folder into that directory. Enjoy.

Thank you and have a fantastic weekend.