Thoriq Firdaus (Http://www.hongkiat.com/blog/author/thoriq/) Web Design (Http://www.hongkiat.

com/blog/category/design/)
Get daily articles in your inbox for free.

18 Essential Plugins to Get More

Out Of Sublime Text

Insert email address

Subscribe!

Popular In Web Design

How to Customize
Visual Studio Code
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/customizing/blog/customizingvisual-studio-code/)
visual-studio-

Even though SublimeText comes with a bunch of great features

code/)

(http://www.hongkiat.com/blog/sublime-text-tips/) that help our work as web

developers, like any other tool, there will always be a room for enhancements.
This is when plugins can be real useful (and we are huge fans of plugins
(http://www.hongkiat.com/blog/essential-wordpress-plugins/)).
Before we proceed, maybe youd like to check out our previous posts on
SublimeText to see what it can do in its native state:

Fresh Resources for

Web Developers
May 2016
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/designers/blog/designersdevelopersdevelopers-monthlymonthly05-2016/)
05-2016/)
Thoriq Firdaus
(Http://www.hongkiat.com
/blog/author/thoriq/)

Easy Color Picking In Sublime Text (http://www.hongkiat.com/blog/sublimetext-color-addition/)

Manage Notes And Lists With Sublime Text (http://www.hongkiat.com
/blog/sublime-text-task-management/)
How To Compile Sass With Sublime Text (http://www.hongkiat.com
/blog/sublime-text-compiling-sass/)

15 Online Typography
Tools All Designers
Should Know
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/online/blog/onlinetypographytypography-tools/)
tools/)
Nancy Young
(Http://www.hongkiat.com
/blog/author/nancy_young/)

How To Refresh Changes On Browser With Sublime Text

(http://www.hongkiat.com/blog/sublime-text-refresh-browser/)
Adding CSS Vendor Prex Automatically With Sublime Text
(http://www.hongkiat.com/blog/css-automatic-vendor-prex/)
Moving on, in this post, we have put together a few plugins that you may need to
install to ll the functionalities that are missing from SublimeText.

10 Programming
Languages You
Wouldnt Want To
(http://www.hongkiat.com
Code In
/blog/worst(http://www.hongkiat.com
bizarre/blog/worst-bizarreprogramminglanguages/)
programminglanguages/)
Ashutosh KS
(Http://www.hongkiat.com
/blog/author/ashutosh_ks/)

RECOMMENDED READING:

12 Most-Wanted Sublime Text Tips And Tricks (http://www.hongkiat.com

/blog/sublime-text-tips/).

1. Package Control (https://sublime.wbond.net/installation)

Package Control is the rst thing that you have to install right away after

10 Conversion
Services For Your
Coding Needs
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/reliable/blog/reliable-codingcodingservices/)
services/)
Kate Dagli

installing SublimeText. With it, you can install, upgrade, remove, and view with
ease the list of packages or plugins that you have installed in SublimeText.

Anna Monus
(Http://www.hongkiat.com
/blog/author/anna_monus/)

Deciphering The
Curious Case of How
Japanese Web Design
(http://www.hongkiat.com
Works [Op-Ed]
/blog/japanese(http://www.hongkiat.com
web-design/)
/blog/japaneseweb-design/)
Rean
(Http://www.hongkiat.com
/blog/author/rean/)

Showcase of 40 Bold
& Beautiful Illustrated
Websites
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/bold/blog/bold-beautifulbeautifulillustrated-websites/)
illustratedwebsites/)

2. Emmet (http://emmet.io/)
In a nutshell, Emmet allows us to write HTML and CSS faster with

Nancy Young
(Http://www.hongkiat.com
/blog/author/nancy_young/)

abbreviations/shortcuts,
then expand them in valid HTML tags. This is one of my
Do Designers Live In A Bubble?

20 Deliciously Designed Food & Drink Menus

most frequently used shortcut, which is a time-saver:

(http://www.hongkiat.com/blog/designers-bubbles/
)

(http://www.hongkiat.com/blog/beautifully-designed-food-menus/
)

((h4>a[rel=external])+p>img[width=500 height=320])*12

It creates 12 lists of Headings followed with an image. I can then ll in my

content without worrying about messing up the format.
How Good Portfolios
Can Be Your Asset
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/bethemes/blog/bethemesbuildingbuildinggood-portfolio/)
good-portfolio/)
Guest Contributor
(Http://www.hongkiat.com
/blog/author
/guest_contributors/)

20 Web Design
Concepts That Will
Blow Your Mind
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/cool/blog/cool-websitewebsiteexperiments/)
experiments/)
Nancy Young
(Http://www.hongkiat.com
/blog/author/nancy_young/)

MORE:

Writing HTML & CSS Faster With Emmet (http://www.hongkiat.com

/blog/html-css-faster-emmet/)

3. SublimeLinter (https://github.com/titoBouzout
/SideBarEnhancements/tree/st3)
SublimeLinter has recently been rebuilt and polished for SublimeText 3. The

How Creativity & Care

Power Your Coding
Needs
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/creativity/blog/creativitycoding-needs/)
coding-needs/)
Guest Contributor
(Http://www.hongkiat.com
/blog/author
/guest_contributors/)

new version certainly comes with a set of new features. Rather than putting all
linters in one package, the developer allows you to select and install only the ones
that you regularly use.

Complete Guide to
Using WebP Image
Format
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/webp/blog/webp-guide/)
guide/)
Hongkiat Lim
(Http://www.hongkiat.com
/blog/author/hongkiat/)

Why All Developers

Should Learn
Command Line
(http://www.hongkiat.com
(http://www.hongkiat.com
/blog/developers/blog/developerscommand-line/)
command-line/)
Jake Rocheleau
(Http://www.hongkiat.com
/blog/author/jake/)

MORE:

A Look Into SublimeLinter 3 (http://www.hongkiat.com/blog/lookinto-sublimelinter-3/)

4. SublimeEnhancements (https://github.com/titoBouzout
/SideBarEnhancements/tree/st3)
SidebarEnhancements has a few new things in the Sidebar menu including New
File Creation in the current project folder, Moving File and Folder, Duplicating
File and Folder, Open in Finder and Browser, Refresh, and a bunch more.

 Do Designers Live In A Bubble?

(http://www.hongkiat.com/blog/designers-bubbles/
)

20 Deliciously Designed Food & Drink Menus

(http://www.hongkiat.com/blog/beautifully-designed-food-menus/
)

5. PackageResourceViewer (https://github.com/skuroda
/PackageResourceViewer)
With PackageResourceViewer, you can view, and edit packages that come from
SublimeText easily. You can also extract package, which will copy it to the User
folder so you can safely edit it.

6. Git (https://github.com/kemayo/sublime-text-git)
This plugin integrates SublimeText with Git (http://git-scm.com/) so you can run
some Git commands from SublimeText such as Add and Committing Files,
Viewing Log, and Annotating Files.

7. Terminal (https://github.com/wbond/sublime_terminal)
This plugin lets you open your project folders (http://www.sublimetext.com
/docs/2/projects.html) in Terminal directly from SublimeText with a hotkey. It is
a very helpful plugin when you need to execute command lines at the given
folder.

 Do Designers Live In A Bubble?

(http://www.hongkiat.com/blog/designers-bubbles/
)

20 Deliciously Designed Food & Drink Menus

(http://www.hongkiat.com/blog/beautifully-designed-food-menus/
)

8. CSSComb (http://csscomb.com/)
CSSComb is a plugin to sort CSS properties. If you need your codes to be tidy and
in the right order, this plugin will let you customize the order of the properties.
This is also helpful when you work with a team of developers, each with their own
preferences of writing code.

MORE:

Sorting And Organizing CSS Using CSSComb (http://www.hongkiat.com

/blog/css-sorting-with-csscomb/)

9. CanIUse (http://azd325.github.io/sublime-text-caniuse/)
With this plugin, 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
(http://caniuse.com/).

10. Alignment (https://github.com/wbond

/sublime_alignment)
Alignment lets you align your codes including PHP, JavaScript, and CSS, thus
making it neat and more readable. See the following screenshot for the beforeand-after comparison.

 Do Designers Live In A Bubble?

(http://www.hongkiat.com/blog/designers-bubbles/
)

20 Deliciously Designed Food & Drink Menus

(http://www.hongkiat.com/blog/beautifully-designed-food-menus/
)

11. Trimmer (https://github.com/jonlabelle/Trimmer)

This plugin helps you remove unnecessary spaces, as well as trailing spaces,
which could cause some errors In JavaScript.

12. ColorPicker (http://weslly.github.io/ColorPicker/)

With this plugin you can select and add colors to SublimeText with the native
color wheel from your OS.

MORE:

Easy Color Picker in SublimeText (http://www.hongkiat.com/blog/sublimetext-color-addition/)

13. MarkDown Editing (https://github.com/SublimeTextMarkdown/MarkdownEditing)

Even though SublimeText is capable of viewing and editing Markdown les, it
treats it as plain text with very poor formatting. This plugin is useful for giving
better support with proper color highlighting for Markdown in SublimeText.

 Do Designers Live In A Bubble?

(http://www.hongkiat.com/blog/designers-bubbles/
)

20 Deliciously Designed Food & Drink Menus

(http://www.hongkiat.com/blog/beautifully-designed-food-menus/
)

MORE:

Writing Web Content With Markdown (http://www.hongkiat.com/blog/webcontent-with-markdown/)

14. FileDiffs (https://github.com/colinta/SublimeFileDiffs)

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

15. DocBlockr (https://github.com/spadgos/sublime-jsdocs)

DocBlokr lets you create documentation or annotation for your codes with ease,
by parsing the functions, parameters, variables, and automatically adding some
possible documentation (see the screenshot below).

16. Custom Themes

Believe it or not, having a different theme can induce your creativity and ideas.
Below are several great custom themes that gives SublimeText a different,
possibly better look.
SpaceGray (https://github.com/kkga/spacegray/)

 Do Designers Live In A Bubble?

(http://www.hongkiat.com/blog/designers-bubbles/
)

20 Deliciously Designed Food & Drink Menus

(http://www.hongkiat.com/blog/beautifully-designed-food-menus/
)

Centurion (https://github.com/allanhortle/Centurion)

Soda (http://buymeasoda.github.io/soda-theme/)

17. Snippets
Snippets can help you write code faster by reusing code pieces. While you can
also create your own set of code snippets, there are several snippet packages
ready for use right away. Here are just some of them:
Foundation (https://github.com/zurb/foundation-5-sublime-snippets) A
collection of snippets to build Foundation 5 framework components such as
the Buttons, Tabs, and Navigation.
Bootstrap 3 (https://github.com/JasonMortonNZ/bs3-sublime-plugin) If
you prefer Bootstrap, try this.
Bootstrap 3 for Jade (https://github.com/rs459/bootstrap3-jade-sublimeplugin) This plugin combines Bootstrap 3 with Jade syntax.
jQuery Mobile (https://github.com/MobPro/Sublime-jQuery-MobileSnippets) A collection of snippets to build jQuery Mobile components
and layouts.
HTML5 Boilerplate (https://github.com/sloria/sublime-html5-boilerplate)
this snippet lets you create HTML5 Boilerplate documents in a snap.

18. Additional Syntax Support ()

Languages that are not supported in SublimeText may not display with proper

syntax
highlighting.
They include LESS, Sass, SCSS, Stylus, and Jade, so if you are 20 Deliciously Designed Food & Drink Menus
Live In A Bubble?
Do Designers
working with those languages, here are the plugins to install, for syntax support.
(http://www.hongkiat.com/blog/designers-bubbles/
)

(http://www.hongkiat.com/blog/beautifully-designed-food-menus/
)

LESS (https://github.com/danro/LESS-sublime)
Sass (https://github.com/nathos/sass-textmate-bundle)
SCSS (https://github.com/MarioRicalde/SCSS.tmbundle)
Stylus (https://github.com/billymoon/Stylus)
Jade (https://github.com/P233/Jade-Snippets-for-Sublime-Text-2)

Readers also read:

YAMM3 Build
Megamenu For
Bootstrap 3
(http://www.hongkiat.com
/blog/bootstrapmegamenuyamm3/)

PAUSE

HD

Writing Web
Content with
Markdown
(http://www.hongkiat.com
/blog/webcontentwith-markdown/)

MUTE

Writing For The

Web: Tips &
Common
Mistakes We
Make
(http://www.hongkiat.com
/blog/writingfor-theweb-tipscommonmistakeswe-make/)

Read more posts on: essential (http://www.hongkiat.com/blog/tag/essential/) ,

sublime text (http://www.hongkiat.com/blog/tag/sublime-text/) ,
sublime text plugin (http://www.hongkiat.com/blog/tag/sublime-text-plugin/)

About (/blog/about-us/)
for Us (/blog/write-for-us/)

Advertise (/blog/advertise/)

Contact (/blog/contact/)

Publishing Policy (/blog/publishing-policy/)

(http://www.exabytes.com/)

Submit Tips (/blog/submit-news-tips/)

Privacy (/blog/privacy-policy-for-hongkiatcom/)

Authors (/blog/authors/)

Write

Sitemap (/blog/sitemap.xml)

(https://www.maxcdn.com/)