Sublime set up

bp.sublime-snippet

<snippet>
  <content><![CDATA[
@include breakpoint(${1}) {
  ${2}
}
]]></content>
  <tabTrigger>bp</tabTrigger>
  <scope>source.scss</scope>
</snippet>

bpl.sublime-snippet

<snippet>
  <content><![CDATA[
@media (--large) {
  ${1}
}
]]></content>
  <tabTrigger>bpl</tabTrigger>
  <scope>source.css</scope>
</snippet>

bpm.sublime-snippet

<snippet>
  <content><![CDATA[
@media (--medium) {
  ${1}
}
]]></content>
  <tabTrigger>bpm</tabTrigger>
  <scope>source.css</scope>
</snippet>

bpmh.sublime-snippet

<snippet>
  <content><![CDATA[
@include breakpoint(medium-high) {
  ${1}
}
]]></content>
  <tabTrigger>bpmh</tabTrigger>
  <scope>source.scss</scope>
</snippet>

bpml.sublime-snippet

<snippet>
  <content><![CDATA[
@include breakpoint(medium-low) {
  ${1}
}
]]></content>
  <tabTrigger>bpml</tabTrigger>
  <scope>source.scss</scope>
</snippet>

bps.sublime-snippet

<snippet>
  <content><![CDATA[
@media (--at-bp-small-only) {
  ${1}
}
]]></content>
  <tabTrigger>bps</tabTrigger>
</snippet>

cg.sublime-snippet

<snippet>
  <content><![CDATA[
console.group('${1}');
  console.log(${2});
console.groupEnd();
]]></content>
  <tabTrigger>cg</tabTrigger>
</snippet>

clc.sublime-snippet

<snippet>
  <content><![CDATA[
console.log(`%c ${1:this} \${${1:this}}`, 'color: ${2:orange}');
]]></content>
  <tabTrigger>clc</tabTrigger>
</snippet>

consolelog.sublime-snippet

<snippet>
  <content><![CDATA[
console.log(${1:this});
]]></content>
  <tabTrigger>cl</tabTrigger>
  <scope>source.js</scope>
</snippet>

destructure.sublime-snippet

<snippet>
  <content><![CDATA[
const {
  $1,
} = this.props;
]]></content>
  <tabTrigger>dstr</tabTrigger>
</snippet>

Preferences.sublime-settings

{
	"auto_complete_commit_on_tab": true,
	"bold_folder_labels": true,
	"caret_extra_bottom": 1,
	"caret_extra_top": 1,
	"caret_extra_width": 1,
	"caret_style": "phase",
	"color_scheme": "Packages/User/SublimeLinter/Oceanic Next (SL).tmTheme",
	"fade_fold_buttons": false,
	"folder_exclude_patterns":
	[
		"node_modules",
		".git",
		".nyc_output",
		".clusternator",
		"dist"
	],
	"font_options":
	[
	],
	"font_size": 14,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"BufferScroll",
		"Color Scheme - Default",
		"GitGutter",
		"Material Color Scheme",
		"Theme - Cobalt2",
		"Vintage"
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"line_padding_bottom": 2,
	"line_padding_top": 2,
	"spacegray_sidebar_font_xlarge": true,
	"spacegray_sidebar_tree_xlarge": true,
	"tab_size": 2,
	"theme": "Oceanic Next.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": "true"
}

proptype-array-of.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.arrayOf(
  ${1}
),
]]></content>
  <tabTrigger>ptao</tabTrigger>
  <scope>source.js</scope>
</snippet>

proptype-bool.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.bool,
]]></content>
  <tabTrigger>ptb</tabTrigger>
  <scope>source.js</scope>
</snippet>

proptype-func.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.func,
]]></content>
  <tabTrigger>ptf</tabTrigger>
  <scope>source.js</scope>
</snippet>

proptype-number.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.number,
]]></content>
  <tabTrigger>ptn</tabTrigger>
  <scope>source.js</scope>
</snippet>

proptype-shape.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.shape({
  ${1}
}),
]]></content>
  <tabTrigger>ptsh</tabTrigger>
  <scope>source.js</scope>
</snippet>

proptype-string.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.string,
]]></content>
  <tabTrigger>pts</tabTrigger>
  <scope>source.js</scope>
</snippet>

pt.sublime-snippet

<snippet>
  <content><![CDATA[
import PropTypes from 'prop-types';

${1:Component}.defaultProps = {
  ${2}
};

${1:Component}.propTypes = {
  ${2}
};
]]></content>
  <tabTrigger>pt</tabTrigger>
  <scope>source.js</scope>
</snippet>

rct.sublime-snippet

<snippet>
  <content><![CDATA[
import React from 'react';
import { shallow } from 'enzyme';

import ${1:COMPONENT} from './index';

describe('${1:COMPONENT}', () => {
  const defaultProps = {
  };

  it('creates a ${1:COMPONENT} component', () => {
    const wrapper = shallow(<${1:COMPONENT} { ...defaultProps } />);

    expect(wrapper, 'component not found').to.be.lengthOf(1);
    expect(wrapper.children(), 'child contents not found').to.not.be.lengthOf(0);
  });
});
]]></content>
  <tabTrigger>rct</tabTrigger>
  <scope>source.js</scope>
</snippet>

rsc.sublime-snippet

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

const ${1:ComponentName} = () => (
  <div>
    ${1:ComponentName}
  </div>
);

export default ${1:ComponentName};
]]></content>
  <tabTrigger>rscp</tabTrigger>
  <scope>source.js</scope>
</snippet>

rscp.sublime-snippet

<snippet>
  <content><![CDATA[
import React, { PropTypes } from 'react';

function ${1:ComponentName}({
  ${2:props},
}) {
  return (
    ${3}
  );
}

${1:ComponentName}.propTypes = {
  ${2:props},
};

export default ${1:ComponentName};
]]></content>
  <tabTrigger>rscp</tabTrigger>
  <scope>source.js</scope>
</snippet>

tc.sublime-snippet

<snippet>
  <content><![CDATA[
<TranslatedCopy copyID='${1:APP_}' />
]]></content>
  <tabTrigger>tc</tabTrigger>
</snippet>

varc.sublime-snippet

<snippet>
  <content><![CDATA[
var(--color-${1});
]]></content>
  <tabTrigger>varc</tabTrigger>
  <scope>source.css</scope>
</snippet>