Skip to content

Instantly share code, notes, and snippets.

@tylermcginnis
Created June 2, 2016 19:04
Show Gist options
  • Save tylermcginnis/0089ee0942d44e615098f83b01e1ce4a to your computer and use it in GitHub Desktop.
Save tylermcginnis/0089ee0942d44e615098f83b01e1ce4a to your computer and use it in GitHub Desktop.
{
"auto_complete_commit_on_tab": true,
"color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
"draw_white_space": "all",
"font_face": "Fira Mono",
"font_size": 20,
"tab_size": 2,
"theme": "Brogrammer.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_automatic_white_space": true,
"trim_trailing_white_space_on_save": true
}
@tylermcginnis
Copy link
Author

tylermcginnis commented Jul 28, 2016

React Native Course Snippets

In order to create a new snippet in Sublime select "Tools" -> "New Snippet". Paste in the snippets below and be sure the filename ends in ".sublime-snippet". For example, the name of my stateless functional component snippet is "react-functional.sublime-snippet".

React Native Functional Component (rnccf)

<snippet>
    <content><![CDATA[
import React, { PropTypes } from 'react'
import { View, StyleSheet, Text } from 'react-native'

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

}

export default function ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} (props) {
  return (
    ${0:<View>
      <Text>
        ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}
      </Text>
    </View>}
  )
}

const styles = StyleSheet.create({

})

]]></content>
    <tabTrigger>rnccf</tabTrigger>
    <scope>source.js</scope>
    <description>React Native Stateless Functional Component Skeleton</description>
</snippet>

React Native Statefull Component (rnccs)

<snippet>
    <content><![CDATA[
import React, { PropTypes, Component } from 'react'
import { View, Text } from 'react-native'

export default class ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} extends Component {
  static propTypes = {}
  state = {}
  render () {
    return (
      ${0:<View>
        <Text>
          ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}
        </Text>
      </View>}
    )
  }
}

]]></content>
    <tabTrigger>rnccs</tabTrigger>
    <scope>source.js</scope>
    <description>React Native Statefull Component Skeleton</description>
</snippet>

React Native Statefull Component (duck)

<snippet>
    <content><![CDATA[
const initialState = {}

export default function ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} (state = initialState, action) {
  switch (action.type) {
    default :
      return state
  }
}
]]></content>
    <tabTrigger>duck</tabTrigger>
    <scope>source.js</scope>
    <description>Redux Module skeleton</description>
</snippet>

@tylermcginnis
Copy link
Author

tylermcginnis commented Sep 5, 2016

Redux Course Snippets

In order to create a new snippet in Sublime select "Tools" -> "New Snippet". Paste in the snippets below and be sure the filename ends in ".sublime-snippet". For example, the name of my stateless functional compnent snippet is "react-functional.sublime-snippet".

RC

<snippet>
    <content><![CDATA[
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import {  } from 'components'
function mapStateToProps (state, props) {
  return {
  }
}
function mapDispatchToProps (dispatch, props) {
  return bindActionCreators( , dispatch)
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)()
]]></content>
    <tabTrigger>rc</tabTrigger>
    <scope>source.js</scope>
    <description>Redux Connect Skeleton</description>
</snippet>

RCCS

<snippet>
    <content><![CDATA[
import React from 'react'
const ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} = React.createClass({
  render () {
    return (
      ${0:<div></div>}
    )
  },
})
export default ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}
]]></content>
    <tabTrigger>rccs</tabTrigger>
    <scope>source.js</scope>
    <description>React Component - Statefull</description>
</snippet>

RCCF

<snippet>
    <content><![CDATA[
import React, { PropTypes } from 'react'
export default function ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} (props) {
  return (
    ${0:<div></div>}
  )
}
]]></content>
    <tabTrigger>rccf</tabTrigger>
    <scope>source.js</scope>
    <description>React Stateless Functional Component Skeleton</description>
</snippet>

@tylermcginnis
Copy link
Author

If you're using Atom, check here.

@JimmyLv
Copy link

JimmyLv commented Sep 8, 2016

How about Intellij, pls...

@findmory
Copy link

VS Code instructions

[1] Edit Settings: Preferences > User Settings (⌘+,)

{
    "editor.fontFamily": "Fira Mono",
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "files.trimTrailingWhitespace": true
}

[2] Install Fira Mono font from here: https://www.fontsquirrel.com/fonts/fira-mono

[3] Install Oceanic-next Color Theme
Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.
ext install Oceanic-Next

[4] Install Brogrammer Theme
Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.
ext install Theme-Brogrammer

[5] Run Babel inside VS Code (see: https://code.visualstudio.com/docs/languages/javascript#_use-next-generation-javascript)

The Babel transpiler turns ES6 files into readable ES5 JavaScript with Source Maps. You can easily integrate Babel into your workflow by adding the configuration below to your tasks.json file (located under the workspace's .vscode folder). The isBuildCommand switch makes this task the Task: Run Build Task gesture. isWatching tells VS Code not to wait for this task to finish.

{
    "version": "0.1.0",
    "command": "${workspaceRoot}/node_modules/.bin/babel",
    "isShellCommand": true,
    "tasks": [
        {
            "args": ["src", "--out-dir", "lib", "-w", "--source-maps"],
            "taskName": "watch",
            "suppressTaskName": true,
            "isBuildCommand": true,
            "isWatching": true
        }
    ]
}

Once you have added this, you can start Babel with the ⇧⌘B (Run Build Task) command and it will compile all files from the src directory into the lib directory.

[6] Snippets
Preferences > User Snippets (javascript.json)

{
    "React Native Stateless Functional Component Skeleton": {
        "prefix": "rnccf",
        "body": "import React, { PropTypes } from 'react'\nimport { View, StyleSheet, Text } from 'react-native'\n\n${1:${FileName}}.propTypes = {\n\n}\n\nexport default function ${1:${FileName}} (props) {\n\treturn (\n\t\t<View>\n\t\t\t<Text>\n\t\t\t\t$1\n\t\t\t</Text>\n\t\t</View>\n\t)\n}\n\nconst styles = StyleSheet.create({\n\n})\n",
        "description": "React Native Stateless Functional Component Skeleton"

    },

    "React Native Statefull Component": {
        "prefix": "rnccs",
        "body":"import React, { PropTypes, Component } from 'react'\n\nimport { View, Text } from 'react-native'\n\nexport default class $1 extends Component {\n\tstatic propTypes = {}\n\tstate = {}\n\trender () {\n\t\treturn (\n\t\t\t<View>\n\t\t\t\t<Text>\n\t\t\t\t\t$2\n\t\t\t\t</Text>\n\t\t\t</View>\n\t\t)\n\t}\n\}",
        "description": "React Native Statefull Component"
    }

}

(These are the first two, which should give you an idea how to complete the rest)

@GiddM
Copy link

GiddM commented Nov 29, 2016

Brackets.io snippets anyone?

@igolden
Copy link

igolden commented Dec 5, 2016

Here's the equivalent snippets for Vim UltiSnips, minus setting names from current file name.

rnccf

snippet rnccf
import React, { PropTypes } from 'react'
import { View, StyleSheet, Text } from 'react-native'

$1.propTypes = {

}

export default function ${1:FunctionName} (props) {
	return (
		<View>
			<Text>
			 $1
			</Text>
		</View>
	)
}


const styles = StyleSheet.create({
	$0

})

endsnippet

rnccs

snippet rnccs
import React, { PropTypes, Component } from 'react'
import { View, Text } from 'react-native'

export default class ${1:ClassName} extends Component {
	static propTypes = {}
	state = {}
	render () {
		return (
			${0:<View>
				<Text>
					$1
				</Text>
			</View>}
		)
	}
}
endsnippet

duck

snippet duck
const initialState = {}

export default function ${1:FunctionName} (state = initialState, action) {
	switch (action.type) {
		default :
			return state
	}
}
endsnippet

@botmaster
Copy link

Intellij please!

@RJNY
Copy link

RJNY commented Dec 16, 2016

Thanks @igolden, I've expanded upon what you did and made them take the file basename by default.
You can see all of @tylermcginnis above code snippets for vim in the gist below

React Vim Snippets gist

@RJNY
Copy link

RJNY commented Dec 21, 2016

Update:
The gist above contains the vimified version of Tylers snippets, but as I go through the course, I find myself making more snippets. if you're interested, take a look at my dotfiles/javascript.snippets. I'll leave the above gist as-is

@rdyson
Copy link

rdyson commented Feb 10, 2018

@botmaster @JimmyLv and anyone else using Intellij, you can use Live Templates to achieve the same thing as Sublime's snippets.

Info here:
https://blog.jetbrains.com/webstorm/2018/01/using-and-creating-code-snippets

and all available variables (including filename and filename without extension) here:
https://www.jetbrains.com/help/idea/live-template-variables.html

As an example, you can set up a Live Template for a React Native Functional Component by going to Preferences > Editor > Live Templates and creating a new Template Group (I called mine React Native) and then a new Live Template in that group. The abbreviation is rnccf, description is whatever you want, and the "Template text" is as follows:

import { View, Text } from 'react-native'

$ComponentName$.propTypes = {

}

export default function $ComponentName$ (props) {
  return (
    <View>
      <Text>
        $ComponentName$
      </Text>
    </View>
  )
}

$ComponentName$ creates a variable, which you edit by clicking "Edit variables". Make the "Expression" for this variable fileNameWithoutExtension(), and then define the available contexts by clicking "Define" below the template text. It's a similar process for creating the other snippets.

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