• Breaking News

    Tuesday, November 1, 2016

    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

    No comments:

    Post a Comment