Atom snippets
# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
# 'Console log':
# 'prefix': 'log'
# 'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson
'.source.js':
'React Stateless Component':
'prefix': 'rsc'
'body': """
import React from 'react'
const ${1:Name} = (${2:props}) => {
return (
<h3>${1:Name}</h3>
)
}
export default ${1:Name};
"""
'React Component':
'prefix': 'rc'
'body': """
import React, { Component } from 'react';
class ${1:Name} extends Component {
render() {
return (
<h3>${1:Name}</h3>
)
}
}
export default ${1:Name};
"""
'React Connect Container Component':
'prefix': 'rcc'
'body': """
import React, { Component } from 'react';
import { connect } from 'react-redux';
class ${1:Name} extends Component {
render() {
return (
<h3>${1:Name}</h3>
)
}
}
const mstp = ({ ${3:state }) => ({ ${3:state });
export default connect(mstp)(${1:Name});
"""
'React Redux Form Container Component':
'prefix': 'rrf'
'body': """
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Form, Button } from 'semantic-ui-react';
import UiFieldText from '../common/UiFieldText';
class ${1:name}Form extends Component {
handleSubmit = (values) => {
this.props.save(values);
this.props.reset();
}
render() {
const { handleSubmit, save } = this.props;
return (
<Form onSubmit={handleSubmit(this.handleSubmit)}>
<Field name="${2:field}" placeholder="${2:field}" component={UiFieldText} />
<Button>${3:Save}</Button>
</Form>
)
}
}
export default reduxForm({
form: '${1:name}'
})(${1:name}Form);
"""
'Promise Arrow Function':
'prefix': 'afpr'
'body': """
const ${1:name} = (${2:params}) => new Promise((resolve, reject) =>{
resolve()
})
"""
'import Spread Component':
'prefix': 'imp'
'body': """
import { $1 } from '$2';$3
"""
'React Spread props':
'prefix': 'cps'
'body': """
const { $1 } = this.props;$2
"""
'React Spread state':
'prefix': 'css'
'body': """
const { $1 } = this.state;$2
"""
'React Constructor':
'prefix': 'ctor'
'body': """
constructor(props) {
super(props);
this.state = {};
this.${1:method} = this.${1:method}.bind(this);
}
"""
'import Module Component':
'prefix': 'impm'
'body': """
import $1 from '$1';$2
"""
'import File Component':
'prefix': 'impf'
'body': """
import $1 from './$1';$2
"""
'require module':
'prefix': 'reqm'
'body': """
const $1 = require('$1');$2
"""
'require file':
'prefix': 'reqf'
'body': """
const $1 = require('./$1');$2
"""
'require destructor file':
'prefix': 'reqd'
'body': """
const { $1 } = require('$2');$3
"""
'eslint disable rule':
'prefix': 'esld'
'body': """
/* eslint-disable ${1:no-console} */$2
"""
'Express route':
'prefix': 'route'
'body': """
${1:api}.${2:get}('/${3:users}', (req, res) => {
res.${4:send}($5);
});$6
"""
'json stringify':
'prefix': 'jss'
'body': """
JSON.stringify(${1:data}, null, 2)
"""
'Redux Reducer':
'prefix': 'redr'
'body': """
export default (state = [], action) => {
switch (action.type) {
case '${1:SOME_TYPE}':
return state;
default:
return state;
}
}
"""