04 Packages

Packages in Sublime Text are a collection of resource files used to extend functionalities, they can be: plugins, syntax highlighting, menus, snippets...

There are a lot of custom packages to install, you can install packages to your necessity or you can create your own package.

Packages

• Package Control
• SideBarEnhancements
• Prettify HTML CSS JS
• AutoFileName
• Tag
• Bracket Guard
• Bracket Highlighter
• Trailing Spaces
• Emmet
• Emmet LiveStyle
• Color Picker
• ColorHighlighter
• Color Helper
• Move Tab
• Inc-Dec-Value
• DocBlockr
• EditorConfig
• SFTP
• SublimeServer
• Gulp
• Alignment
• Can I Use
• CSS Comb
• Cheat Sheets
• Terminal
• GhostText for Sublime Text
• AlignTab
• More Layouts

Package Control

Package Control manage all packages, makes it simple to find, install, remove and keep packages up-to-date.

Menu > Tools > Install Package Control

How to use

Installing packages

• ctrl shift p
• Type install
• Select Package Control: Install Package
• Search the package you want to install

Removing packages

• ctrl shift p
• Type remove
• Select Package Control: Remove Package
• Find the package you want to remove

SideBarEnhancements

Provides enhancements to the operations on Sidebar of Files and Folders, like: new file/folder, edit, open/run, reveal, find in selected/parent/project, cut, copy, paste, paste in parent, rename, move, delete, refresh...

Tip - When a file is open in Sublime Text, open the command palette and type file copy

Prettify HTML CSS JS

Format HTML, CSS, JavaScript and JSON code.

AutoFileName

Autocomplete filenames and paths in HTML and CSS.

How to use

• In the file press ctrl space

Inserting markdown and stylus in the scope

Copy the file autofilename.sublime-settings in the folder C:\Users\{username}\AppData\Roaming\Sublime Text 3\Packages\User in windows, ~/Library/Application Support/Sublime Text 3/Packages/User in OS X or ~/.config/sublime-text-3/Packages/User in Linux.

Tag

Provides utilities to work with tags in HTML/XML: "Close tag on slash", "Tag indent or AutoFormat Tags", "Tag Remove", "Insert as Tag", "Tag Remove Attributes", "Tag Close", "Tag Lint"

How to use

• See the documentation: https://github.com/SublimeText/Tag

Bracket Guard

Immediately highlights incorrect brackets

Bracket Highlighter

Finds and highlights matching brackets such as: [], (), {}, "", '', , and even custom brackets.

Trailing Spaces

Highlight trailing spaces and delete them in a flash!

Setting Trim On Save

• Copy the file trailing_spaces.sublime-settings in the folder
  • C:\Users\{username}\AppData\Roaming\Sublime Text 3\Packages\User in windows
  • ~/Library/Application Support/Sublime Text 3 in OS X.

Emmet

Emmet is the most essential plugin for web-developers, it helps you write HTML and CSS code easily, expanding simple abbreviations into complex code snippets.

• Watch the demo in http://emmet.io/
• Read this great tutorial: Goodbye, Zen Coding. Hello, Emmet!
• Learn the syntax in Cheat Sheet

Emmet LiveStyle

Changes are transmitted from the editor to the browser and the browser into the editor.

Color Picker

Open a Color Picker in Sublime Text.

How to use

• ctrl shift c on Windows or command shift c on OS X

ColorHighlighter

Live Preview of color values in Stylesheets.

Tip

The key bindings that plugin, use some of the same useful standards key bindins of the Sublime Text , I usually disable them

• Menu Option tools -> color highlighter -> Disable default keybindings

• Menu Preferences -> Package Settings -> Color Highlighter -> Settings – User

{
    "ha_style": "filled"
}

Color Helper

Sublime plugin that provides helpful color tooltips

Move Tab

Plugin for Sublime Text to move tabs around with keyboard shortcut

Inc-Dec-Value

Increase / decrease of numbers, dates, hex color values, etc.

DocBlockr

Good plugin to help write documentation in JavaScript, PHP, CofeeScript, ...

How to use

• Press enter or tab after /** (or ###* for Coffee-Script).

EditorConfig

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles.

How to use

• See the documentation: EditorConfig Page

SFTP

FTP, FTPS and SFTP support for Sublime Text.

How to use

• Read the instructions.

SublimeServer

Turn you Sublime Text editor into a HTTP server

gulp

A Gulp task runner with snippets.

How to use

It's necessary a gulpfile.js in the open folder to run tasks.

• ctrl shift p
• Type gulp
• Select the task to run

See the documentation on sublime-gulp to snippets.

Alignment

A simple key-binding for aligning multi-line and multiple selections.

How to use

• ctrl alt a

Can I Use

Useful for quick check CSS property support on the Can I Use site.

How to use

• Mark or place your cursor over a CSS property and press ctrl alt f.

CSS Comb

Coding style formatter for CSS.

How to use

• ctrl shift c

Cheat Sheets

Quickly accessing cheat sheets

Terminal

Launch terminals from the current file or the root project folder.

How to use

• ctrl alt shift t - Open Terminal at Project Folder

• ctrl shift t - Open Terminal at File -

  This key binding is the same of the default sublime reopen closed tab, I prefer to switch to alt shift t.

Ghost Text

Allows live editing of Chrome text area or JS Code editor content with Sublime Text.

Addition Installation

• Chrome Extension

How to use

• In Chrome, click the GhostText button in the upper-right corner to open up Sublime Text.

Align​Tab

An alignment plugin for Sublime Text using regular expression

More Layouts