-
7/26/2019 18 Plugins Esenciales Para Sacar Ms Provecho de Sublime Text
1/8
18 Essential Plugins to Get More
Out Of Sublime Text
Thoriq Firdaus (Http://www.hongkiat.com/blog/author/thoriq/) Web Design (Http://www.hongkiat.com/blog/category/design/)
Even though SublimeText comes with a bunch of great features
(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:
Easy Color Picking In Sublime Text (http://www.hongkiat.com/blog/sublime-
text-color-addition/)
Manage Notes And Lists With Sublime Text (htt
p://www.hongkiat.com
/blog/sublime-text-task-management/)
How To Compile Sass With Sublime Text (http://www.hongkiat.com
/blog/sublime-text-compiling-sass/)
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.
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 Controlis the rst thing that you have to install right away after
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.
2. Emmet (htt
p://emmet.io/)
In a nutshell, Emmetallows us to write HTML and CSS faster with
Get daily articles in your inbox for free.
Insert email address Subscribe!
Popular In Web Design
(http://www.hong .
/blog/customizin
visual-studio-
code/)
How to CustomizeVisual Studio Code
(http://www.hongkiat.com
/blog/customizing-
visual-studio-code/)
Anna Monus(Http://www.hongkiat.com/blog/author/anna_monus/)
(http://www.hong .
/blog/designers-
developers-
monthly-
05-2016/)
Fresh Resources for
Web Developers
May 2016
(http://www.hongkiat.com
/blog/designers-
developers-monthly-
05-2016/)
Thoriq Firdaus(Http://www.hongkiat.com/blog/author/thoriq/)
(http://www.hong .
/blog/online-
typography-
tools/)
15 Online Typography
Tools All Designers
Should Know
(http://www.hongkiat.com
/blog/online-
typography-tools/)
Nancy Young(Http://www.hongkiat.com/blog/author/nancy_young/)
(http://www.hong .
/blog/worst-
bizarre-
programming-
languages/)
10 Programming
Languages YouWouldnt Want To
Code In
(http://www.hongkiat.com
/blog/worst-bizarre-
programming-
languages/)
Ashutosh KS(Http://www.hongkiat.com/blog/author/ashutosh_ks/)
(http://www.hong .
/blog/reliable-
coding-services/)
10 Conversion
Services For Your
Coding Needs
(http://www.hongkiat.com
/blog/reliable-coding-services/)
Kate Dagli
(http://www.hong .
/blog/japanese-
web-design/)
Deciphering The
Curious Case of How
Japanese Web Design
Works [Op-Ed]
(http://www.hongkiat.com
/blog/japanese-
web-design/)
Rean(Http://www.hongkiat.com/blog/author/rean/)
(http://www.hong .
/blog/bold-
beautiful-
illustrated-
websites/)
Showcase of 40 Bold& Beautiful Illustrated
Websites
(http://www.hongkiat.com
/blog/bold-beautiful-
illustrated-websites/)
Nancy Young(Http://www.hongkiat.com/blog/author/nancy_young/)
-
7/26/2019 18 Plugins Esenciales Para Sacar Ms Provecho de Sublime Text
2/8
(http://www.hong .
/blog/bethemes-
building-good-portfolio/)
How Good Portfolios
Can Be Your Asset
(http://www.hongkiat.com
/blog/bethemes-
building-
good-portfolio/)
Guest Contributor(Http://www.hongkiat.com/blog/author/guest_contributors/)
(http://www.hong .
/blog/cool-
website-
experiments/)
20 Web Design
Concepts That Will
Blow Your Mind
(http://www.hongkiat.com
/blog/cool-website-
experiments/)
Nancy Young(Http://www.hongkiat.com/blog/author/nancy_young/)
(http://www.hong .
/blog/creativity-
coding-needs/)
How Creativity & Care
Power Your Coding
Needs
(http://www.hongkiat.com
/blog/creativity-
coding-needs/)
Guest Contributor(Http://www.hongkiat.com/blog/author/guest_contributors/)
(http://www.hong .
/blog/webp-
guide/)
Complete Guide to
Using WebP Image
Format
(http://www.hongkiat.com
/blog/webp-guide/)
Hongkiat Lim(Http://www.hongkiat.com/blog/author/hongkiat/)
(http://www.hong .
/blog/developers
command-line/)
Why All Developers
Should Learn
Command Line
(http://www.hongkiat.com
/blog/developers-
command-line/)
Jake Rocheleau(Http://www.hongkiat.com/blog/author/jake/)
abbreviations/shortcuts, then expand them in valid HTML tags. This is one of my
most frequently used shortcut, which is a time-saver:
((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.
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
new version certainly comes with a set of new features. Rather than putting all
lintersin one package, the developer allows you to select and install only the ones
that you regularly use.
MORE:
A Look Into SublimeLinter 3 (http://www.hongkiat.com/blog/look-
into-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-bu)
20 Deliciously Designed Food & Drink Menus
(http://www.hongkiat.com/blog/beautifully -designed- food)
-
7/26/2019 18 Plugins Esenciales Para Sacar Ms Provecho de Sublime Text
3/8
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-bu)
20 Deliciously Designed Food & Drink Menus
(http://www.hongkiat.com/blog/beautifully -designed- food)
-
7/26/2019 18 Plugins Esenciales Para Sacar Ms Provecho de Sublime Text
4/8
8. CSSComb (http://csscomb.com/)
CSSCombis 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 before-
and-after comparison.
Do Designers Live In A Bubble?
(http://www.hongkiat.com/blog/designers-bu)
20 Deliciously Designed Food & Drink Menus
(http://www.hongkiat.com/blog/beautifully -designed- food)
-
7/26/2019 18 Plugins Esenciales Para Sacar Ms Provecho de Sublime Text
5/8
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/sublime-
text-color-addition/)
13. MarkDown Editing (https://github.com/SublimeText-
Markdown/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-bu)
20 Deliciously Designed Food & Drink Menus
(http://www.hongkiat.com/blog/beautifully -designed- food)
-
7/26/2019 18 Plugins Esenciales Para Sacar Ms Provecho de Sublime Text
6/8
MORE:
Writing Web Content With Markdown (http://www.hongkiat.com/blog/web-
content-with-markdown/)
14. FileDiffs (https://github.com/colinta/SublimeFileDiffs)
FileDiffsallows 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-bu)
20 Deliciously Designed Food & Drink Menus
(http://www.hongkiat.com/blog/beautifully -designed- food)
-
7/26/2019 18 Plugins Esenciales Para Sacar Ms Provecho de Sublime Text
7/8
Centurion (https://github.com/allanhortle/Centurion)
Soda (http://buymeasoda.github.io/soda-theme/)
17. Snippets
Snippetscan 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 5framework 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-sublime-
plugin) This plugin combines Bootstrap 3 with Jade syntax.
jQuery Mobile (https://github.com/MobPro/Sublime-jQuery-Mobile-
Snippets) A collection of snippets to build jQuery Mobile components
andlayouts.
HTML5 Boilerplate (https://github.com/sloria/sublime-html5-boilerplate)
this snippet lets you create HTML5 Boilerplate documentsin a snap.
18. Additional Syntax Support ()
Languages that are not supported in SublimeText may not display with proper
Do Designers Live In A Bubble?
(http://www.hongkiat.com/blog/designers-bu)
20 Deliciously Designed Food & Drink Menus
(http://www.hongkiat.com/blog/beautifully -designed- food)
hi hli h i Th i l d LESS S SCSS S l d J d if
-
7/26/2019 18 Plugins Esenciales Para Sacar Ms Provecho de Sublime Text
8/8
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/)
syntax highlighting. They include LESS, Sass, SCSS, Stylus, and Jade, so if you are
working with those languages, here are the plugins to install, for syntax support.
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/bootstrap-
megamenu-
yamm3/)
Writing Web
Content with
Markdown
(http://www.hongkiat.com
/blog/web-
content-
with-markdown/)
Writing For The
Web: Tips &
Common
Mistakes We
Make
(http://www.hongkiat.com
/blog/writing-
for-the-
web-tips-
common-
mistakes-
we-make/)
MUTEHD PAUSE
About (/blog/about-us/) Advertise (/blog/advertise/) Contact (/blog/contact/) Submit Tips (/blog/submit-news-tips/) Authors (/blog/authors/) Write
for Us (/blog/write-for-us/) Publishing Policy (/blog/publishing-policy/) Privacy (/blog/privacy-policy-for-hongkiatcom/) Sitemap (/blog/sitemap.xml)
(http://www.e xabytes.com/) (http s://www.maxcdn .co m/)
Do Designers Live In A Bubble?
(http://www.hongkiat.com/blog/designers-bu)
20 Deliciously Designed Food & Drink Menus
(http://www.hongkiat.com/blog/beautifully -designed- food)