Useful Sublime Text packages for front-end & general web development

Sublime text is one of the most powerful editors for web development.It's high customizable and can be more user-spesific with installing packages. Packages giving extra functionalities to editor. In this blog I'll list and try to explain packages I've used as front-end developer.

First of all you should install Package Control package manager. You can simply follow the steps on it's website. Dont forget to restart Sublime Text here.

After installing Package Control, you'll be able to install Sublime Text packages. Open Sublime Text command palette with cmd + shift + p then type package control. You'll see the following commands here you can do with Package Control.

Package Control command list

As you can see you can list,enable,disable,install and manage packages you've installed.

Navigate and select install package hit enter. (You can simply type install and hit enter after cmd + shift + p)

You can type the package name right after. And package control will search and show you the packages you may want to install.

Package Control install

Emmet

Emmet is web development toolkit which greatly improves HTML & CSS workflow. You can write faster your HTMLs with Emmet.
They have great explanation video on their site. Check http://emmet.io/

Jquery

Jquery package will help you out with Jquery functions. It has syntax highlighting and almost all of the jquery methods as snippets.
Jquery package

Sublime Linter

SublimeLinter is a plugin for Sublime Text 3 that provides a framework for linting code. Whatever language you code in, SublimeLinter can help you write cleaner, better, more bug-free code. LevelUpTuts have really nice video about sublime linter 3 usage. You can watch it here

Bracket Highlighter

Bracket and tag highlighter. Bracket Highlighter matches a variety of brackets such as: [ ], ( ), { }, " ", ' ' and even custom brackets. Bracket Highlighter

Colorpicker

Yeap. Inline color picker you can open picker with cmd + shift + c
Colorpicker

Colorhighlighter

ColorHighlighter which unobtrusively previews hexadecimal color values by underlaying the selected hex codes in different styles and icons.
Colorhighlighter

Java​Script & Node​JS Snippets

Javascript & NodeJS Snippets is great snippet typing tool for Sublime Text. You can check the whole list here


Extra enhancement plugins

Lets take a look at which plugins you can use for general development enviroment.

Multi Edit Utils

Multi Edit Utils plugin which enhances editing of multiple selections. In case you aren't familar with Sublime's awesome multiple selection features, visit this page.

Sidebar Enhancements

Extra functionality for side bar items.
Sidebar Enhancements

Gitgutter

Gitgutter plugin to show an icon in the gutter area indicating whether a line has been inserted, modified or deleted.
Gitgutter

Tabsextra

Extra functionality for tab items.
Tabsextra