Essential Sublime Text Plugins for Web Developers

By: Sunil Kumar |  In: Web Developement  |  Last Updated: 2018/06/10

When I started web development, Notepad++ and Dreamweaver were my favourite choices among all the text-editors or IDE available. But I was somehow bored of using them.

So I started looking for a new text-editor and I found Sublime. After reading a lot of positive reviews I thought to try it once.

And trust me after using a number of days I was like Wow….

The creators of Sublime Text say it’s a text editor you’ll fall in love with and, having worked with it for almost two years now, I must say I completely agree with them. What makes Sublime Text even better is its extensibility.

Before starting with this tutorial I assume that you have PACKAGE CONTROL. If you don’t, Installing it is a just two-second process.

1. Package Control

Package Control is the first and mandatory thing we should have after Installing Sublime Text. Using Package Control you can Install, Update or view all the package/plugins available for Sublime Text.

The simplest method of installation of Package Control is through the Sublime Text console.

Go to package installation & copy the long command there.

Open the Sublime Text console by pressing Ctrl+`.

Paste the command you copied into the Sublime Text console and press Enter.

Restart your Sublime.

Now you can access it through command palette (Cmd  + Shift + P (Mac) or Ctrl + Shift + P Windows and Linux) ) and type Install Package and press enter.

Here a list of the packages will open where you can find all the packages.

Here I am listing some of my favourite packages-

2. Xdebug

Web programming is not an easy task as there are thousands of scripts are running on the server at the same time. If any fault occurs in any script and you don’t have any idea about the bug/fault It’s going to be very hard to fix the bug. But using XDebug you can do it more easily.

3. EMMET

In a nutshell, Emmet allows us to write HTML and CSS faster with abbreviations/shortcuts, then expand them in the valid HTML tags. This is one of my most favourite package, which is a time-saver.

for example, you just type div>ul>li[class=listing]*6 and hit Tab key and it will be converted to

 <div>
    <ul>
 	<li class="listing"></li>
 	<li class="listing"></li>
 	<li class="listing"></li>
 	<li class="listing"></li>
 	<li class="listing"></li>
 	<li class="listing"></li>
    </ul>
</div>

4. Git

This plugin integrates SublimeText with Git so you can run some Git commands from SublimeText such as Add and Committing Files, Viewing Log, and Annotating Files. You can do all the stuff like add, commit, stash, merge and all things inside sublime.

5. CanIUse

With CanIUse, you can check the browser support for CSS properties and HTML elements that you are using. To use it, highlight the CSS property or the HTML element, and it will bring you to the appropriate page in CanIUse.com.

6. ColorPicker

With ColorPicker, you can select and add colours to SublimeText with the native color wheel from your OS. After installation press ctrl+shift+c to launch it inside Sublime.

7. FileDiffs

FileDiffs allows you to see the differences between two files in SublimeText. You can compare files with copied data from Clipboard, a File in the Project, File that is currently open, and between saved and unsaved files.

8. Multiple cursors

Many editors have added multiple cursors, but Sublime Text still does it the best.

If you’ve never tried it, go learn about it somewhere, but here’s a quick intro:

Open up a file. Hold “Ctrl” (cmd on Mac) and click several places around the file. Now start typing. BOOM.

Another great trick: Place your cursor on a common word (for example, a variable name). Now press Super-D a few times. You now have several instances of that variable selected and you can manipulate them all at once.

9. Google Spell Check

Use Google magic to fix spelling. Replaces the selected text with Google’s spelling correction. Google has a far better spell checker than most tools.

This does not replace the built-in spell checker, offer a list of suggestions, or adds words to the built-in dictionary. Instead, it replaces the selected text with the Google search page’s recommended spelling. It’s like magic. Outright uncanny how accurate Google can be. The text isn’t affected if Google thinks you’ve got it right.

10. DocBlockr

This is an extension for those of you who like to add detailed comments to function definitions. DocBlockr allows you to effortlessly generate descriptions for your functions including the parameters they take, the returned value, and variable types.

11. AllAutocomplete

Sublime Text’s default autocomplete considers words that are present in the current file only. The AllAutocomplete plug-in, however, searches all open files to find matches while suggesting words.

12. SublimeLinter

This package enables the code editor to check for syntax errors, bad practices, or other mistakes that the developer may have made. SublimeLinter itself just acts as a base framework for linting, so you also need to install separate plugins for each language you code in.

NOTE-As per Official site The Sublime Text 2 version is no longer being supported for SublimeLinter.

Also Read:

Comments


  • Thank you for another informative site. Where else could I get that kind of information written in such an ideal way? I have a project that I am just now working on, and I have been on the look out for such info.

  • Leave a Comment

    Your email address will not be published.

    *


    Sunil Kumar


    I am the owner of acmeextension. I am a passionate writter and reader. I like writting technical stuff and simplifying complex stuff.
    Know More

    Subscribe to our mailing list