Atom snippets

atom-snippets.cson

# 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:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson

'.source.coffee':
  'kd view':
    'prefix': 'kd ='
    'body':"""
    kd = require 'kd.js'

    module.exports = class ${1:CustomView} extends kd.CustomHTMLView
      constructor: (options = {}, data) ->
        ${2:options.cssClass = '$3'}
        super options, data
        $4
    """

'.source.js':
  'generic import':
    'prefix': 'import'
    'body': "import $1 from '${2:$1}'"

  'import a component from components/':
    'prefix': 'icomp'
    'body': "import $1 from 'components/$1'"

  'import a container from containers/':
    'prefix': 'icont'
    'body': "import $1 from 'containers/$1'"

  'import a page from pages/':
    'prefix': 'ipage'
    'body': "import $1 from 'pages/$1'"

  'import a route from routes/':
    'prefix': 'iroute'
    'body': "import $1 from 'routes/$1'"

  'import a widget from widgets/':
    'prefix': 'iwidget'
    'body': "import $2 from 'widgets/$1/$2'"

  'import React':
    'prefix': 'ireact'
    'body': """import React, { Component } from 'react'"""

  'create React stateful class component':
    'prefix': 'creactclass'
    'body': """
    import React, { Component } from 'react'
    import PropTypes from 'prop-types'

    export default class ${1:MyComponent} extends Component {
      static.propTypes = {
        ${2:// prop types}
      }

      render() {
        return ${3:<div>${4:Hello world}</div>}
      }
    }
    """

  'import styled-components':
    'prefix': 'istyled'
    'body': "import styled from 'styled-components'"

  'export default named function':
    'prefix': 'exfunc'
    'body': """
    export default function $1 ($2) {
      return $2
    }
    """

  'export default function':
    prefix: '_edf'
    body: '''
    export default function ${1:functionName}(${2:args}) {
      return (
        ${3:// return value}
      )
    }
    '''

  'export function':
    prefix: '_ef'
    body: '''
    export function ${1:functionName}(${2:args}) {
      return (
        ${3:// return value}
      )
    }
    '''

  'export default class':
    'prefix': 'class'
    'body': """
    ${1:export default }class ${2:ClassName} ${3:extends ${4:ParentClass}} {
      constructor(${5:options}) {
        ${5:super(${5:options})}
      }
    }
    """

  'use babel with global atom':
    'prefix': 'babel'
    'body': """
    'use babel'
    /* globals atom */
    """

  'new Promise':
    'prefix': 'prom'
    'body': """
    return new Promise((resolve${1:, reject}) => {
      $2
    })
    """

  'React stateless functional component':
    prefix: 'stateless'
    body: """
    const $1 = ({ $2 }) => (
      $3
    )

    export default $1
    """