Sublimetext packages

A set of recommended packages and tooling configurations for Cà phê shift.

Our conventional IDE for Front End development is SubLime Text 3. Inside this folders are predefined snippets and settings for it:

Sublime Text Recommended Plugins:

• Alignment: Help align code for better readability (especially in long properties list). Shortcut has been switch to ctrl+shift+a due to conflicts with SublimeLinter
• All Autocomplete: List and suggest completion for all the words appeared in opened files
• Babel: Language definitions for ES6+ JavaScript with React JSX syntax extensions.
• Color Highlighter: is a plugin for the Sublime text 2 and 3, which underlays selected hexadecimal colorcodes (like "#FFFFFF", "rgb(255,255,255)", "white", etc.) with their real color. Also, plugin adds color picker to easily modify colors.
• CSS3: The most complete CSS support for Sublime Text 3
• DocBlockr: Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript...
• EditorConfig: Helps developers maintain consistent coding styles between different editors. See .editorconfig snippet.
• Emmet: Previously known as Zen Coding. Greatly enhance HTML & CSS workflow.
• FuzzyFilePath: Autocomplete relative or absolute file paths in Sublime Text project folder. Similar to AutoFileName but with fuzzy search capability.
• GitGutter: A [ST3] plugin to see git diff in gutter
• Handlebars: [ST3] package for Handlebars.js templates
• Hex to HSL Color Converter: plugin to convert CSS Hex colors to HSL
• HTML-CSS-JS Prettify: HTML, CSS, JavaScript and JSON code formatter for Sublime Text 2 and 3 via node.js
• Insert Nums: A Sublime Text 2 and 3 plugin, that inserts (consecutive) numbers across multiple selections or modifies the selections' contents with expressions. Huge configurability.
• JSCS-Formatter: Sublime Text 3 Plugin to autoformat your javascript code according to the JSCS configuration files you already have.
• Markdown Preview: Preview and build your markdown files quickly in your web browser from sublime text 2/3.
• MarkdownEditing: Powerful Markdown package for Sublime Text with better syntax understanding and good color schemes.
• Open Finder: (OSX only) Provides a command for opening Finder in the current directory.
• Package Control: The de facto package manager for Sublime Text. You already used it to install these plugins.
• Pretty JSON: plugin for [ST3] to pretty [and minify] json
• PxToEm: plugin to convert px to em with comments. Shortcut was changed to ctrl+shift+e to avoid linter conflicts.
• ReactJS: Sublime Text helpers for React/JSX
• SCSS: The TextMate SCSS Official Bundle. Now Compatible with SublimeText2/3.
• Select Quoted: A Sublime Text 2/3 plugin at add a "Expand Selection to Quoted" command
• SublimeLinter: Interactive (real time feedback) code linting framework for Sublime Text 3. This is just the base framework, additional packages for related languages need to be installed.
• SublimeLinter-contrib-scss-lint: SublimeLinter plugin for Sass scss syntax, using the Ruby gem backend scss-lint
• SublimeLinter-csslint: SublimeLinter plugin for CSS, using NodeJS package csslint.
• SublimeLinter-jscs: SublimeLinter 3 plugin for NodeJS package jscs, a code style checking tool.
• SublimeLinter-jshint: SublimeLinter plugin for JavaScript, using NodeJS package jshint.
• SublimeLinter-json: SublimeLinter plugin for JSON.
• SublimeLinter-jsxhint: SublimeLinter 3 plugin for JSX (React.js), using the NodeJS package jsxhint.
• Terminal: Launch terminals from the current file or the root project folder.

Note: key bindings for the plugins to be added

Preferences.sublime-settings

Here's an extract of the system preference with explanation comments:

{
    //this must be set in user settings to be enabled in MAC OSX
    "scroll_past_end": true,
    // The delay, in ms, before the auto complete window is shown after typing
    // Note: Delaying this to have the completion files more likely
    // to be included in the auto complete list
    "auto_complete_delay": 200,
    // For best practices, will be overriden by EditorConfig
    "trim_trailing_white_space_on_save": true,
    // Esier to spot edited tabs
    "highlight_modified_tabs": true,
    // default tabsize is 2
    "tab_size": 2,
    // convert tabs into spaces
    "translate_tabs_to_spaces": true
}

Some of the entries were commented out in the real file to keep the preferences more agnostic. It's up to you to turn them on or use different settings.

Thanks to

• Paul Irish and his dotfiles repository from which the OSX section is based on.
• Thanh Tran and his dotfiles repository from which this repo is forked and standardized further.

---

© 2015 Cà phê shift