10+ Necessary Sublime Text Plugins for Web Developers

By Focusoncode May 29, 2018

Sublime Text is adored by many programmers, for now, is one of the most popular code editors. What made Sublime Text stand out from any other code editor in the market, is the integration of a package manager that can be used to add custom plugins and custom Sublime Text themes to personalize the coding experience. To help developers get the most of Sublime, we decided to make a list containing some of the extensions.

1.Package Control

What makes everything from this list works is package control. It enables the easy installation, download, and update of packages or plugins into Sublime Text.

sublime-text-plugins

 

2.Emmet

Emmet is the single most successful tool of its kind. This sublime text plugin gives you a combination of syntax highlighting and syntax tooltips for HTML and CSS.
There are a lot of things that you can accomplish with Emmet, but I will just tell you my favorite here. Type HTML:5 and press Ctrl/Cmd + e, and it is expanded to a basic HTML 5 page template. Simple!
Ex. to build out a navigation you only need to type the following code:

#page>div.logo+ul#navigation>li*5>a{Item $}

which will expand to :

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>

3.Alignment

Alignment plugin helps to easily align multiple selections, or multi-line selections. What that means is you can align multiple selections, or lines, via delimiter such as =. Simply type ctrl + alt + a on Windows, or cmd + ctrl + a on a Mac, to align your selection. To align with :follow this tutorial to setup custom delimiters.

sublime-text-plugins

4.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.

sublime-text-plugins

5.ColorPicker

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.

sublime-text-plugins

6.DocBlockr

If you follow coding guidelines strictly, this is one plugin that makes your task easier. DocBlokr helps you in creating proper comments for your code, by parsing the functions, parameters, variables, and automatically adding the basic items. Start with “/**” and DocBlockr does the rest for you. For instance, check how DocBlockr makes my life easier by creating a format for me to fill based on my comment.

sublime-text-plugins

7.Minify

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, JSON, and SVGs.

sublime-text-plugins

This package relies on external node.js libraries for minifying and beautifying, so you will need to install them separately:

<g class="gr_ gr_646 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="646" data-gr-id="646">npm</g> install -g clean-<g class="gr_ gr_644 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="644" data-gr-id="644">css</g> <g class="gr_ gr_647 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="647" data-gr-id="647">uglifycss</g> js-beautify <g class="gr_ gr_645 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="645" data-gr-id="645">html</g>-<g class="gr_ gr_648 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="648" data-gr-id="648">minifier</g> uglify-js <g class="gr_ gr_649 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="649" data-gr-id="649">minjson</g> <g class="gr_ gr_650 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="650" data-gr-id="650">svgo</g>

8.Git

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.

sublime-text-plugins

9.JavaScript & NodeJS Snippets

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.

sublime-text-plugins

10.GitHubinator

GitHubinator is a plugin that shows selected text on a remote GitHub or Bitbucket repository. You simply highlight the text you want to search for, right click to open the context menu and launch the corresponding Github or Bitbucket web page in your default browser. This plugin is amazing if you need to figure out who’s worked on a file previously, or check the Git blame.

sublime-text-plugins

11. Babel

sublime-text-plugins
Babel adds syntax definitions for ES6 JavaScript, with React JSX extensions.

12. SideBarEnhancements

SideBarEnhancements provides enhancements to the operations on Sidebar of Files and Folders for Sublime Text. Particularly, it sets delete options as a “Move to trash,” includes an “Open with…”, gives you the ability to move files, and more.

sublime-text-plugins

13.GhostText

GhostText is probably one of the coolest plugins I’ve seen in awhile. It allows you to link your Sublime Text editor to text areas in a browser. For example, you could work on a CodePen, but do all the editing in your main text editor. You just need to install the plugin and browser extension. Simply highlight the text area you want to link, and click the browser extension: then magic happens.

 sublime-text-plugins

Share This

Leave a Comment

Your email address will not be published.