18 Plugins Esenciales Para Sacar Más Provecho de Sublime Text

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


/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


/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


/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


/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]


/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


/blog/bold-beautiful-

illustrated-websites/)



2/8

(http://www.hong .

/blog/bethemes-

building-good-portfolio/)

How Good Portfolios

Can Be Your Asset


/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


/blog/cool-website-

experiments/)


(http://www.hong .

/blog/creativity-

coding-needs/)

How Creativity & Care

Power Your Coding

Needs


/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


/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


/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)


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.






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.






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.






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/)






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





hi hli h i Th i l d LESS S SCSS S l d J d if


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


/blog/bootstrap-

megamenu-

yamm3/)

Writing Web

Content with

Markdown


/blog/web-

content-

with-markdown/)

Writing For The

Web: Tips &

Common

Mistakes We

Make


/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/)





18 Plugins Esenciales Para Sacar Más Provecho de Sublime Text

Documents

Transcript of 18 Plugins Esenciales Para Sacar Más Provecho de Sublime Text