javascript-snippets.txt

Arrow function
abbr: af
($1) => {$2}

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:
# https://atom.io/docs/latest/using-atom-basic-customization#cson
# INSTALL STARS
# $ apm stars --install
'.jade':
    'Jade Translate':
        'prefix': 'tr'
        'body': '{{\'${1:code}\' | translate}}'
'.js*':
    'JS debugger':
        'prefix': 'deb'
        'body': 'debugger'
    'AngularJS Translate':
        'prefix': 'tr'
        'body': '$filter(\'translate\')(\'${1:code}\')'
    'ePreventDefault':
        'prefix': 'epv'
        'body': 'e.preventDefault();$0'
    'string regex Match':
        'prefix': 'match'
        'body': '${1:stringVariable}.match(/${2:regex}/ig)$0'
    'Set Timeout':
        'prefix': 'sto'
        'body': """
                setTimeout(function () {
                    ${1}
                }, ${2:1000});$0
                """
    'Set Timeout ES6':
        'prefix': 'sto6'
        'body': """
                setTimeout(() => {
                    ${1}
                }, ${2:1000});$0
                """
    'Set Interval':
        'prefix': 'siv'
        'body': """
                setInterval(function () {
                    ${1}
                }, ${2:1000});$0
                """
    'Set Interval ES6':
        'prefix': 'siv6'
        'body': """
                setInterval(() => {
                    ${1}
                }, ${2:1000});$0
                """
    'Foreach Norm JS':
        prefix: 'fe'
        body: """
              forEach(function ($1) {
                  $2
              });$0
                    """
    'Foreach JS ES6':
        prefix: 'fe6'
        body: """
              forEach(($1) => {
                  $2
              });$0
                    """
    "React: componentDidMount: fn() { ... }":
        prefix: "cdm"
        body: "componentDidMount: function() {\n\t${1}\n},"

    "React: componentDidUpdate: fn(pp, ps) { ... }":
        prefix: "cdup"
        body: "componentDidUpdate: function(prevProps, prevState) {\n\t${1}\n},"

    "React: componentWillMount: fn() { ... }":
        prefix: "cwm"
        body: "componentWillMount: function() {\n\t${1}\n},"

    "React: componentWillReceiveProps: fn(np) { ... }":
        prefix: "cwr"
        body: "componentWillReceiveProps: function(nextProps) {\n\t${1}\n},"

    "React: componentWillUnmount: fn() { ... }":
        prefix: "cwun"
        body: "componentWillUnmount: function() {\n\t${1}\n},"

    "React: componentWillUpdate: fn(np, ns) { ... }":
        prefix: "cwu"
        body: "componentWillUpdate: function(nextProps, nextState) {\n\t${1}\n},"

    "React: cx({ ... })":
        prefix: "cx"
        body: "cx({\n\t$1: $2\n});"

    "React: forceUpdate(...)":
        prefix: "fup"
        body: "forceUpdate(${1:callback});"

    "React: getDefaultProps: fn() { return {...} } ":
        prefix: "gdp"
        body: "getDefaultProps: function() {\n\treturn {\n\t\t${1}\n\t};\n},"

    "React: getInitialState: fn() { return {...} } ":
        prefix: "gis"
        body: "getInitialState: function() {\n\treturn {\n\t\t${1}: ${2}\n\t};\n},"

    "React: isMounted()":
        prefix: "ism"
        body: "isMounted()"

    "React: propTypes { ... }":
        prefix: "pt"
        body: "propTypes: {\n\t${1}: React.PropTypes.${2:string}\n},"

    "React: component skeleton":
        prefix: "rcc"
        body: "var React = require('react');\nvar PropTypes = React.PropTypes;\n\nvar ${1} = React.createClass({\n\n\trender: function() {\n\t\treturn (\n\t\t\t${0:<div />}\n\t\t);\n\t}\n\n});\n\nmodule.exports = ${1};"

    "React: render: fn() { return ... }":
        prefix: "ren"
        body: "render: function() {\n\treturn (\n\t\t${1:<div />}\n\t);\n}"

    "React: setState({ ... })":
        prefix: "sst"
        body: "setState({\n\t${1}: ${2}\n});"

    "React: shouldComponentUpdate: fn(np, ns) { ... }":
        prefix: "scu"
        body: "shouldComponentUpdate: function(nextProps, nextState) {\n\t${1}\n},"

    "React: this.props.":
        prefix: "props"
        body: "this.props.${1}"

    "React: this.state.":
        prefix: "state"
        body: "this.state.${1}"

    "React: render(component, container, [callback])":
        prefix: "rrc"
        body: "ReactDOM.render(${1:<$2 />}, ${3:document.body}${4:, ${5:callback}});"
    # React >0.13 (ES6)
    "React: componentDidMount() { ... } (ES6)":
        prefix: "cdm6"
        body: "componentDidMount() {\n\t${1}\n}"

    "React: componentDidUpdate(pp, ps) { ... } (ES6)":
        prefix: "cdup6"
        body: "componentDidUpdate(prevProps, prevState) {\n\t${1}\n}"

    "React: componentWillMount() { ... } (ES6)":
        prefix: "cwm6"
        body: "componentWillMount() {\n\t${1}\n}"

    "React: componentWillReceiveProps(np) { ... } (ES6)":
        prefix: "cwr6"
        body: "componentWillReceiveProps(nextProps) {\n\t${1}\n}"

    "React: componentWillUnmount() { ... } (ES6)":
        prefix: "cwun6"
        body: "componentWillUnmount() {\n\t${1}\n}"

    "React: componentWillUpdate(np, ns) { ... } (ES6)":
        prefix: "cwu6"
        body: "componentWillUpdate(nextProps, nextState) {\n\t${1}\n}"

    "React: static defaultProps = { ... }":
        prefix: "dp"
        body: "static defaultProps = {\n\t${1}\n};"

    "React: this.state = { ... }":
        prefix: "is"
        body: "this.state = {\n\t${1}: ${2}\n}"

    "React: static propTypes = { ... } (ES6)":
        prefix: "pt6"
        body: "static propTypes = {\n\t${1}: React.PropTypes.${2:string}\n};"

    "React: class skeleton":
        prefix: "rcd"
        body: "import React from 'react'\nimport PropTypes from 'prop-types';\n\nclass $1 extends React.Component {\n\trender () {\n\t\n\t}\n}\n\nexport default ${1};"

    "React: component skeleton (ES6)":
        prefix: "rcc6"
        body: "import React, { PropTypes } from \'react\'\n\nconst $1 = React.createClass({\n\trender () {\n\t\treturn (\n\t\n\t\t)\n\t}\n})\n\nexport default ${1}\n"

    "React: stateless component (ES6)":
        prefix: "rcs"
        body: "import React from \'react\';\nimport PropTypes from 'prop-types';\n\nconst $1 = (${2:props}) => {\n\treturn (\n\t\t${3:<div />}\n\t)\n}\n\nexport default ${1}\n"

    "React: render() { return ... } (ES6)":
        prefix: "ren6"
        body: "render() {\n\treturn (\n\t\t${1:<div />}\n\t);\n}"

    "React: setState({ ... }) (ES6)":
        prefix: "sst6"
        body: "this.setState({\n\t${1}: ${2}\n});"

    "React: shouldComponentUpdate(np, ns) { ... } (ES6)":
        prefix: "scu6"
        body: "shouldComponentUpdate(nextProps, nextState) {\n\t${1}\n}"

    "React: const { props: { ... } } = this (ES6)":
        prefix: "props6"
        body: "const { props: { ${1} } } = this"
    "React: const { state: { ... } } = this (ES6)":
        prefix: "state6"
        body: "const { state: { ${1} } } = this"
    "React: const { refs: { ... } } = this (ES6)":
        prefix: "refs6"
        body: "const { refs: { ${1} } } = this"

    "PropTypes.func.isRequired":
        prefix: "ptf"
        body: "PropTypes.func.isRequired"

    "PropTypes.string.isRequired":
        prefix: "pts"
        body: "PropTypes.string.isRequired"

    "PropTypes.object.isRequired":
        prefix: "pto"
        body: "PropTypes.object.isRequired"

    "PropTypes.array.isRequired":
        prefix: "pta"
        body: "PropTypes.array.isRequired"

    "PropTypes.bool.isRequired":
        prefix: "ptb"
        body: "PropTypes.bool.isRequired"

    "PropTypes.number.isRequired":
        prefix: "ptn"
        body: "PropTypes.number.isRequired"

    "PropTypes.node.isRequired":
        prefix: "ptnode"
        body: "PropTypes.node.isRequired"

    "PropTypes.element.isRequired":
        prefix: "pte"
        body: "PropTypes.element.isRequired"

    "PropTypes.any.isRequired":
        prefix: "ptany"
        body: "PropTypes.any.isRequired"

    "PropTypes.shape({...}).isRequired":
        prefix: "ptshape"
        body: "PropTypes.shape({ $1: $2 }).isRequired"
'.jsx':
    'React Descructuring':
        'prefix': 'des'
        'body': 'var {$1} = $2;$0'
    'React Descructuring':
        'prefix': 'des6'
        'body': 'const {${1}: $2} = ${0:this}'
    'React className Attribute':
        'prefix': 'cln'
        'body': 'className="$1"$0'
    'React create class using ES6 Descructuring snippet':
        'prefix': 'rccd'
        'body': """
                import React, { PropTypes } from 'react'

                const $1 = React.createClass({
                    render () {
                        return (
                            <${2:div}>
                                $0
                            </${2:div}>
                        )
                    }
                })

                module.exports = $1;
                """
    'React Form':
        'prefix': 'rform'
        'body': """
                <form ref="form" onSubmit={this.onSubmit} className="${1}-form">
                </form>
                """
    'Karma it':
        'prefix': 'it'
        'body': """
                it('$1', () => {
                    $2
                });
                """
    'Karma expect':
        'prefix': 'exp'
        'body': """
                expect(${1:VariableName}).to${2}()$0;
                """
    "PropTypes.shape({...}).isRequired":
        prefix: "condjsx"
        body: """
            {
              ${1:CONDITION} ?
              (
                $2
              ) : ${3:''}
            }$0
              """
    "TranslationMessages for React":
        prefix: "trr"
        body: """
            <FormattedMessage id='${1:MESSAGE_ID}'/>$0
              """
    "Import for TranslationMessages for React":
        prefix: "trrimport"
        body: """
            import { FormattedMessage } from 'react-intl';$0
              """

    "TranslationMessages with callback for React":
        prefix: "trrc"
        body: """
            <FormattedMessage id=${1:MessageId}>
                {(message) => ${2:message}}
            </FormattedMessage>$0
              """
    "TranslationMessages import for React":
        prefix: "ptimport"
        body: """
            import PropTypes from 'prop-types';
              """
    "jsx then...catch":
        prefix: "thencatch"
        body: """
            then((response) => {
                console.log(`Success ~ ${response}`);
                return new Promise(function (resolve) {
                  resolve(response);
                });
            }).catch((err) => {
                console.error(`Error !! ${err}`);
                return new Promise(function (resolve, reject) {
                  reject(err);
                });
            })
              """

'.ts':
    'Console log':
        'prefix': 'log'
        'body': 'console.log($1);$0'
    'Getter':
        'prefix': 'g'
        'body': """
                  get ${1:property}(): ${4:type} {
                      return this.${2:_property};
                  }
                """
    'Setter':
        'prefix': 's'
        'body': """
                  set ${1:property}(${3:value}: ${4:type}) {
                      this.${2:_property} = ${3:value};
                  }
                  $0
                """
    'Getter Setter':
        'prefix': 'gs'
        'body': """
                  get ${1:property}(): ${4:type} {
                      return this.${2:_property};
                  }

                  set ${1:property}(${3:value}: ${4:type}) {
                      this.${2:_property} = ${3:value};
                  }
                  $0
                """
    'Import':
        'prefix': 'imp'
        'body': """
                  import \{${1:class}\} from '/${2}';$0
                """
    'Constructor':
        'prefix': 'con'
        'body': """
                  constructor(${1:params}) {
                      ${2:;}
                  }$0
                """
    'Public method':
        'prefix': 'pub'
        'body': """
                  public ${1:functionName}(${2:params}) {
                      ${3}
                  }$0
                """
    'protected':
        'prefix': 'prot'
        'body': """
                protected
                """
    'private':
        'prefix': 'priv'
        'body': """
                private
                """
    'public':
        'prefix': 'publ'
        'body': """
                public
                """