My Sublime Text setup

It’s obvious that almost all web developer and front-end developers use Sublime Text. Every one has there own use case and reasons for using ST, some might say its clear, fast and slim some might say its beautiful, highly customizeble and slick. I want to share my ST settings and plugins that I use as a front-end developer.

Sublime Text is a sophisticated text editor for code markup and prose You’ll love the slick user interface extraordinary features and amazing performance

Some of the main features of ST that I believe are Beautiful User Interface, Awesome Editing, Customization, Automation.

Sublime Text Features

First off, I want to share my ST User settings; You can see the settings below or you can get it from this gist.

{
  "color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme",
  "detect_indentation": true,
  "ensure_newline_at_eof_on_save": true,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "file_exclude_patterns":
  [
    ".DS_Store",
    "*.scssc",
    "*.gem"
  ],
  "folder_exclude_patterns":
  [
    ".git",
    ".sass-cache",
    ".bundle",
    ".tmp",
    "tmp",
    "node_modules"
  ],
  "font_face": "Monaco",
  "font_options":
  [
    "no_bold",
    "subpixel_antialias"
  ],
  "font_size": 13.0,
  "highlight_line": true,
  "highlight_modified_tabs": true,
  "ignored_packages":
  [
    "Vintage"
  ],
  "rulers":
  [
  ]
}

You can make this as your settings just by copying and pasting this to your User - Settings.

Now as I said before, ST is highly customized there are many plugins that you can do almost every thing you want just by installing plugin. Here are some plugins that I use.

Package Control

Package Control is one of my favorite plugins, it allows users to manage packages very easily, with one shortcut you have access to a long list of plugins available to install and update is automatically handled. To install it open the console View → Show Console or Ctrl + `, then paste the following code :

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

or you can visit https://sublime.wbond.net/installation

Emmet

Emmet my most favorite plugin, this enables me to code css and html blazingly fast and this will provide great shotcuts and handfull of other trick which will save ample amount of time.

Emmet

For more details and installation visit http://emmet.io/

Sidebar Enhancements Makes the sidebar more user friendly and improves its usability by adding more options to it. You can delete files and open files using certain programs like Photoshop. giving you more options on new files, moving files, copying files and opening files in another program.

Sidebar enhancements

You can get the source https://github.com/titoBouzout/SideBarEnhancements or install via package manager.

Emmet LiveStyle

This awesome plugins which the combines the power of chrome and sublime text. This enables me to style real quickly without any refreshing or saving the file.

Emmet LiveStyle is a plugin for live bi-directional (editor↔browser) CSS editing of new generation. Currently, it works in Google Chrome, Safari and Sublime Text, more browsers and editors will be available later.

Live style for chrome

Checkout the installaiton guide http://livestyle.emmet.io/install/

BracketHighlighter

Bracket Highlighter matches a variety of brackets such as: [], (), {}, "", '', <tag></tag>, and even custom brackets. This is a very handy plugin with this you can easly find out where is the closing tag.

Bracket hilighter

Get brackethighlighter at https://github.com/facelessuser/BracketHighlighter or install from package control.

JsFormat

JsFormat is a javascript formatting plugin for Sublime Text. It uses the command-line/python-module javascript formatter from http://jsbeautifier.org/ to format whole js or json files, or the selected portion(s). You can get the souce from https://github.com/jdc0589/JsFormat

Text-Pastry

Text Pastry is a plugin for Sublime Text that will give you the necessary tools to insert or paste a bunch of text, a range of numbers or generated UUIDs into your selected locations.

Plugin for Sublime Text. Insert/Paste a range of words, numeric sequences or UUIDs at once.

Ever wanted to paste incrementing numbers or five lines from your clipboard into five different locations at once? Text Pastry can help you out!

Text pastry

More details https://github.com/duydao/Text-Pastry