12+ Awesome Sublime Text Plugins for Web Development

There are many code editors available in the market, but there is hardly any doubt that Sublime is the best among all. To make your life easier while writing tons of codes, we have compiled a list of 12+ awesome Sublime text plugins for web development.

There are several reasons why Sublime Text is among the top code editors around the world. Not only is offers high speed but it is also very easy to use. But, one of the best things about this editor is that it supports some really useful and effective plugins.

The good thing is that there are lots of plugins available for this editor. Many developers across the world have created high quality plugins for it. However, this could also be a big challenge.  Sometimes it becomes difficult for the programmer to find the right plugin from the list of hundreds of them. This is the reason why we have handpicked some of the most effective and useful plugins that you can use to get great results.

In fact, there is a plugin called Package Control that actually helps you manage and organize all the Sublime Text plugins. It makes addition and removal of the plugins easy.

Package Control

We cannot start off our list without mentioning Package Control. It’s the plugin manager for Sublime, and without it installing and removing packages would be a huge pain. If you do not have Package Control installed, make sure you do that first, as it will allow you to quickly try out the other plugins in this article.

JavaScript & NodeJS Snippets

sublime-text-plugins1

A collection of shorthand snippets for writing common JavaScript expressions much faster. Why write document.querySelector('selector'); when you can simply type qs, press tab, and let Sublime do the rest of the work.

Emmet

sublime-text-plugins2

Like the previous plugin in the list, this one let’s you use snippets to write code faster. The difference here is that instead of JS expresions, Emmet works for HTML and CSS, letting you write long tags, nested elements, or whole page templates in one go.

Emmet is a bit complex, so if want a simpler alternative you could try a similar plugin called HTML Snippets. It has less features, but is way easier to use, and has a great straightforward documentation.

Advanced New File

sublime-text-plugins3

This awesome package makes it possible to create new files blazingly fast. Instead of browsing folders, and using the menus, you simply open a prompt with super+alt+n and write the path to your new file. The plugin will also add any non-existing directories from the path, and even supports auto completion for folder names.

Git

sublime-text-plugins4

A Git integration that works directly from the Sublime Text command palette. The package provides quick access to a number of commonly used Git commands, allowing developers to add files, make commits, or open the Git logs, without ever leaving Sublime.

GitGutter

sublime-text-plugins5

Very useful extension that marks each line in your source code, telling you its Git status and giving you an overview of the changes that have occurred. GitGutter can be used to compare your files to the git HEAD, origin, a branch of your choice, or even certain commits.

Side Bar Enhancements

sublime-text-plugins6

In Sublime Text the project you are working on is overviewed in the left side panel. Although it gives you some options for working with your files, the available default actions are quite limited. This plugin changes that by adding over 20 options to the right-click menu, including Open in browser, duplicate, and lots of other useful stuff.

ColorPicker

sublime-text-plugins7

A tiny, useful color picker that is very simple to use and great for quickly grabbing color hex values. The plugin opens in a separate window and allows you to choose a color from a palette or use an eye dropper to extract color from anywhere on your screen.

Placeholders

sublime-text-plugins8

Sublime Text 3 has a built-in Lorem Ipsum generator that you can use for creating dummy text. The Placeholders plugin extends that functionality and allows ST to quickly generate for you placeholder images, forms, lists, and tables.

DocBlockr

sublime-text-plugins9

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.

SublimeCodeIntel

sublime-text-plugins10

Code intelligence plugin that indexes your source files and enables you to find function definitions and jump to them. This extension works for a plethora of popular and not-so-popular programming languages.

Minify

sublime-text-plugins11

A code minifer and beautifier in one. Minify takes your current opened file, and creates a new .min or .pretty version of it in the same directory. Works with CSS, HTML, JavaScript, JSONs, and SVGs.

Sublime Linter

sublime-text-plugins12

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.

Color Highlighter

sublime-text-plugins13

A feature you can see in many other IDEs and text editors, but is missing from Sublime, is color previews. Using the Color Highlighter extension you can enable it in ST, allowing you to see how all hex and RGBA values are translated to color, directly in your style sheets.

Language Packs

sublime-text-plugins14