SublimeText Setup for React Stuff

README.md

Using: Sublime Text 3

Packages:

• Babel: Syntax definitions for ES6 + JSX
• SublimeLinter: Linter framework for Sublime Text 3
• SublimeLinter-contrib-standard: Linter supper for the 'standard' code style.

Guide to migrate from Sublime 2 to 3 (I think I referenced this): http://wesbos.com/migrating-to-sublime-text-3/

Preferences.sublime-settings

{
	"auto_complete": false,
	"bold_folder_labels": true,
	"color_scheme": "Packages/User/SublimeLinter/Monokai Extended (SL).tmTheme",
	"font_face": "Source Code Pro",
	"font_size": 13.0,
	"ignored_packages":
	[
		"Vintage"
	],
	"margin": 2,
	"rulers":
	[
		80
	],
	"show_full_path": true,
	"tab_size": 2,
	"theme": "Cola.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_automatic_white_space": true,
	"trim_trailing_white_space_on_save": true
}

react-component-skeleton.sublime-snippet

<snippet>
    <content><![CDATA[
import React from 'react'

class ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} extends React.Component {

  static propTypes = {

  }

  render () {
    return (
      ${0:<div />}
    )
  }
}

export default ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}

]]></content>
    <tabTrigger>rcc</tabTrigger>
    <scope>source.js</scope>
    <description>React: component skeleton</description>
</snippet>

redux-action-skeleton.sublime-snippet

<snippet>
    <content><![CDATA[
import {
  ACTION_CONSTANT,
  ACTION_CONSTANT_SUCCESS,
  ACTION_CONSTANT_FAILED
} from './'

// Simple action.
export function myAction (data) {
  return {type: ACTION_CONSTANT, data}
}

// Thunk for async requests.
export function myThunkAction () {
  return (dispatch, getState) => {
    dispatch({type: types.ACTION_CONSTANT})
    doTheThing((err, data) => {
      if (err) {
        dispatch({type: types.ACTION_CONSTANT_FAILED, err})
      } else {
        dispatch({type: types.ACTION_CONSTANT_SUCCESS, data})
      }
    })
  }
}

]]></content>
    <tabTrigger>rda</tabTrigger>
    <scope>source.js</scope>
    <description>Redux: action skeleton</description>
</snippet>

redux-reducer-skeleton.sublime-snippet

<snippet>
    <content><![CDATA[
import {
  ACTION_CONSTANT
} from '../actions'

const initialState = {}

const reducers = {

  [ACTION_CONSTANT]: (state, action) => {
    return state
  }
}

export default function (state = initialState, action) {
  if (reducers[action.type]) {
    return reducers[action.type](state, action)
  }
  return state
}

]]></content>
    <tabTrigger>rdr</tabTrigger>
    <scope>source.js</scope>
    <description>Redux: reducer skeleton</description>
</snippet>