-
-
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 | |
| } |
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>
If you're using Atom, check here.
How about Intellij, pls...
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)
Brackets.io snippets anyone?
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
Intellij please!
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
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
@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.
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)
React Native Statefull Component (rnccs)
React Native Statefull Component (duck)