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

'.text.html.vue .source.js.embedded.html':
  'Vue data':
    prefix: 'data'
    body: """
      data() {
        return {
          $1
        }
      },
    """
  'Vue props':
    prefix: 'props'
    body: """
      props: {
        ${1:propName}: {
          type: ${2:String},
          default: ${0}
        },
      },
    """
  'Vue methods':
    prefix: 'methods'
    body: """
    methods: {
      ${1:name}() {
        ${0}
      },
    },
    """
  'Vue computed':
    prefix: 'computed'
    body: """
    computed: {
      ${1:name}() {
        return ${0}
      },
    },
    """
  'Vue watchers':
    prefix: 'watch'
    body: """
    watch: {
      ${1:name}(value) {
        ${0}
      },
    },
    """
  'Vue import component':
    prefix: 'import'
    body: 'import ${1:New} from \'@/components/${1:New}.vue\''

'.text.html.vue':
  'Vue component skeleton':
    prefix: 'vue'
    body: """
      <template>
      $2
      </template>

      <script>
      export default {
        name: '$1',
      }
      </script>

    """
  'Vue style tag':
    prefix: 'vstyle'
    body: """
      <style lang="scss" scoped>
      $1
      </style>
    """

".source.js.jsx":
  "ES6 Arrow function":
    prefix: "6fn"
    body: "const $1 = ($2) => $3"

  "Import React":
    prefix: "imr"
    body: "import React from 'react';"
  "Import ReactDOM":
    prefix: "imrd"
    body: "import ReactDOM from 'react-dom';"
  "React: class skeleton (ES6)":
    prefix: "rcla"
    body: "class $1 extends React.Component {\n\trender() {\n\t\treturn (\n\t\t\t$2\n\t\t)\n\t}\n}"
  "React: fetch call (ES6)":
    prefix: "rfetch"
    body: "fetch($1)\n\t.then(response => response.json())\n\t.then(data => {})"

  "React: Link component tag":
    prefix: "link"
    body: "<Link to=\"$1\">$2</Link>"
  "React: Route component tag":
    prefix: "route"
    body: "<Route path=\"$1\" component={$2}>$3</Route>"
  "React: Router component tag":
    prefix: "router"
    body: "<Router history={ $1 }>$2</Router>"

  "Webpack config starter":
    prefix: "wpc"
    body: """
      module.exports = {
        entry: '$1',
        output: {
          path: '$2',
          filename: '$3',
        },
        devServer: {
          inline: true,
          contentBase: '$4',
          port: 3333
        },
        module: {
          loaders: [
            {
              test: ${5:/\\\\.js\$/},
              exclude: ${6:/node_modules/},
              loader: '${7:babel}'
            }
          ]
        }
      }
    """