Skip to content

Instantly share code, notes, and snippets.

@brunano21
Last active February 16, 2017 09:32
Show Gist options
  • Save brunano21/29e9309d3058f3e67d9504f862b596b2 to your computer and use it in GitHub Desktop.
Save brunano21/29e9309d3058f3e67d9504f862b596b2 to your computer and use it in GitHub Desktop.
My Sublime Text 3 Setup

Sublime Text 3 Setup

Install Package Control

Install Package Control for easy package management.

  1. Open the console with Ctrl+`
  2. Paste in the following:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

From here on out, use Package Control to install everything. +Shift+P, then type Install to get a list of installable packages you can livesearch through. Watch the Status Bar for installation progress.

Add Some Style

Install Material Theme for some UI customisations. You'll need to restart Sublime after installation for the changes to take effect.

I prefer the darker version. See the JSON settings below to see how to set it.

About the color scheme, I got used with Monokai Extended colors.

Add Some Useful Packages

All installed with Package Manager. +Shift+P and type install. Then start typing the name of the extension you want to install.

General

  • SideBarEnhancements Provides enhancements to the operations on Sidebar of Files and Folders.
  • Alignment - Easy alignment of multiple selections and multi-line selections.
  • zz File Icons - File icons for improved visual grepping.
  • SublimeServer - Turns you Sublime Text editor into a HTTP server, and serves all the open project folders.
  • FileDiffs - Shows diffs between the current file, or selection(s) in the current file, and clipboard, another file, or unsaved changes.
  • BracketHighlighter - Matches a variety of brackets such as: [], (), {}, "", '', #!xml , and even custom brackets.
  • WakaTime - Automatic time tracking and metrics generated from your programming activity.

Documentation

  • DocBlockr - Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript, C & C++.

HTML, CSS & JS

  • SublimeCodeIntel - Full-featured code intelligence and smart autocomplete engine.
  • Emmet - (Formerly Zen Coding) For lightning fast coding.
  • SublimeLinter - A framework for linting code.
  • SublimeLinter-contrib-eslint - Llinter plugin for SublimeLinter provides an interface to ESLint
  • Color Picker - A multi-platform color picker plugin.
  • Color Highlighter - Previews color values by underlaying the selected hex codes in different styles, coloring text or gutter icons.
  • HTML-CSS-JS Prettify - HTML, CSS, JavaScript and JSON code formatter for Sublime Text 2 and 3 via node.js.
  • LESS - LESS syntax highlighting.
  • All Autocomplete - Extend Sublime autocompletion to find matches in all open files of the current window.

Git

  • GitGutter - A Sublime Text 2/3 plugin to see git diff in gutter.

Markdown

  • MarkdownEditing - Better Markdown editing from within Sublime.
  • Markdown Live Preview - Live markdown preview.
  • Markdown Preview - Preview and build your markdown files quickly in your web browser from sublime text 2/3.
  • SmartMarkdown - Some useful shortcuts for working with Markdown in Sublime. Brings better integration with Pandoc.
  • WordCount - Provides a real-time Word Count and character count in the status-bar.

Settings - User

Accessible via: SublimeTextPreferencesSettings – User, or with +`,'.'

This is a JSON file of custom user configuration settings. Kept in alphabetical order for easy reference.

Note: As a JSON file no comments can be included. Any you add will be stripped out on saving. I have added them anyway for clarification.

{
    "always_show_minimap_viewport": true,
    "auto_complete": true,
    "bold_folder_labels": true,
    "caret_extra_bottom": 2,
    "caret_extra_top": 2,
    "caret_extra_width": 2,
    "caret_style": "phase",
    "close_windows_when_empty": true,
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
    "copy_with_empty_selection": false,
    "detect_indentation": false,
    "draw_centered": false,
    "draw_minimap_border": true,
    "draw_white_space": "selection",
    "enable_tab_scrolling": true,
    "ensure_newline_at_eof_on_save": true,
    "fade_fold_buttons": false,
    "folder_exclude_patterns":
    [
        ".git",
        ".bundle",
        ".sass-cache"
    ],
    "font_face": "Inconsolata",
    "font_options":
    [
        "gray_antialias"
    ],
    "font_size": 12,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],
    "line_padding_bottom": 3,
    "line_padding_top": 3,
    "material_theme_accent_cyan": true,
    "material_theme_arrow_folders": true,
    "material_theme_big_fileicons": true,
    "material_theme_compact_sidebar": true,
    "material_theme_small_tab": true,
    "mouse_wheel_tabswitch": true,
    "overlay_scroll_bars": "enabled",
    "show_definitions": true,
    "sidebar_font_small": true,
    "sidebar_large": true,
    "tab_size": 4,
    "tabs_small": true,
    "theme": "Material-Theme-Darker.sublime-theme",
    "trim_trailing_white_space_on_save": true,
    "wide_caret": true
}

A complete list of Settings can be referenced in SublimeTextPreferencesSettings – Default.

Override any which aren't to your taste.

NOTE: material_ starting properties come from Material Theme plugin.

Key Bindings - User

Accessible via: SublimeTextPreferencesKey Bindings – User.

Key bindings are the productivity engine which allow you to become one with your text editor. I try to stick with all the defaults to make for an easy install and less chance of potential future clashes. The following are a few small edits I make along with some package specific controls:

[
    // Reveal the currently open file in the sidebar
    { "keys": ["ctrl+super+r"], "command": "reveal_in_side_bar" },

    // AdvancedNewFile
    { "keys": ["ctrl+alt+n"], "command": "advanced_new_file_new" },

    // Create a new snippet [Jeffrey Way]
    { "keys": ["alt+super+n"], "command": "new_snippet" },

    // Open iTerm
    { "keys": ["ctrl+alt+t"], "command": "open_terminal" },

    // Select (or type) the syntax to apply to the current view.
    { "keys": ["ctrl+shift+y"], "command": "show_overlay", "args": {"overlay": "command_palette", "text": "Set Syntax: "} },

    // swap the keybindings for paste and paste_and_indent
    { "keys": ["super+v"], "command": "paste_and_indent" },
    { "keys": ["super+shift+v"], "command": "paste" },

    // [HTMLPrettify] Format your HTML, CSS, and JS
    { "keys": ["super+shift+h"], "command": "htmlprettify" },

    // Close tag
    { "keys": ["super+."], "command": "close_tag" },

    // Alignment
    { "keys": ["super+shift+a"], "command": "alignment" },

    // Wrap selection in tag
    {
        "keys"      :   ["alt+shift+t"],
        "command"   :   "insert_snippet",
        "args": {
            "contents": "<${1:p}>${0:$SELECTION}</${1}>"
        }
    },

]

Disclaimer

Partially copied from ijy/sublime-text-3-setup.md.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment