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
}
@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