AtomSnippets.cson

Hi Fullstack Friends!

This gist will walk you through installing snippets I have created to help you work faster and more efficiently in Express!


--- Installation Instructions ---
1. Open ~/.atom/snippets.cson
2. Copy all the code below the {COPY CODE BELOW HERE} line
3. Paste it below the final default comment
4. Open a .js file and test the snippets using something like aget and then cycling through tab!


Atom uses cson notation for writing snippets - you can read more about it here:
https://www.sitepoint.com/use-code-snippets-atom/
---

Here is a Summary of the snippets I have included for you:
  
You use the snippets by typing the below code and pressing tab. 
The snippets have been set up so that your first tab will place you in something like an Arrow Functions parameter,
The second tab will move you in to the function body.
The third tab will move you below your snippet.

Just type one of the below commands and start tabbing away!

#ES6
arr                      - create arrow function with 1 parameter

#Express Router Routes
rget                     - create Express Route for get
rpost                    - create Express Route for post
rdelete                  - create Express Route for delete
rput                     - create Express Route for put

#Express App Routes
aget                   - create Express Route for app.get
apost                    - create Express Route for app.post
adelete                  - create Express Route for app.delete
aput                     - create Express Route for app.put


#Middleware Boilerplate
appuse                   - create app.use middleware line 
bodyParser Middleware    - create bodyParser boilerplate
appErrorHandler          - create standard error handler route for app.use
appStatic                - create app.use('/', express.static(path.join(__dirname, '')));  Make sure you install path!



---  CODE ----
{ COPY AND PASTE CODE BELOW HERE INTO YOUR ~/atom/snippets.cson file!
  Then save, open a new file, and type 'appuse' and hit tab to test it!
  .cson uses indentation to define its objects, please make sure your indentation comes in to your file in a similar manner
  Every snippet should be one tab further than the '.source.js' line 
  Please let me know if you have any questions                          }

--- COPY BELOW HERE ---
'.source.js':
#Arrow Function
  'Arrow Func with 1 parameter':
    'prefix': 'arr'
    'body': """
    (${1:param}) => {
      ${2}
    };
    ${3}
      """
#Snippets for Express Routes using router
  'router.get Express':
    'prefix': 'rget'
    'body': """
    router.get(\'${1:Route}\', (req, res, next) => {
      ${2}
    });
    ${3}
    """
  'router.post Express':
    'prefix': 'rpost'
    'body': """
    router.post(\'${1:Route}\', (req, res, next) => {
      ${2}
    });
    ${3}
    """
  'router.delete Express':
    'prefix': 'rdelete'
    'body': """
    router.delete(\'${1:Route}\', (req, res, next) => {
      ${2}
    });
    ${3}
    """
  'router.put Express':
    'prefix': 'rput'
    'body': """
    router.put(\'${1:Route}\', (req, res, next) => {
      ${2}
    });
    ${3}
    """
#Snippets for Express Routes using app
  'app.get Express':
    'prefix': 'aget'
    'body': """
    app.get(\'${1:Route}\', (req, res, next) => {
      ${2}
    });
    ${3}
    """
  'app.post Express':
    'prefix': 'apost'
    'body': """
    app.post(\'${1:Route}\', (req, res, next) => {
      ${2}
    });
    ${3}
    """
  'app.delete Express':
    'prefix': 'adelete'
    'body': """
    app.delete(\'${1:Route}\', (req, res, next) => {
      ${2}
    });
    ${3}
    """
  'app.put Express':
    'prefix': 'aput'
    'body': """
    app.put(\'${1:Route}\', (req, res, next) => {
      ${2}
    });
    ${3}
    """
  'app.use Express':
    'prefix': 'appuse'
    'body': """
    app.use(\'${1:Route}\', ${2:(req, res, next)} => {
      ${3}
    });
    ${4}
    """
  'bodyParser Express Boilerplate':
    'prefix': 'bodyParser Middleware'
    'body': """
    //bodyParser middleware
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
    ${1}
    """
  'default Express Error Handler':
    'prefix': 'appErrorHandler'
    'body': """
    //Error Handler
    app.use('/', (err, req, res, next) => {
      res.status(err.status || 500).json(err);${1}
    });
    ${2}
    """
  'App Use Static':
    'prefix': 'appStatic'
    'body': """
    //Static Handling
    app.use(\'${1:/}\', express.static(path.join(__dirname, \'${2}\')));
    ${3}
    """
  #Snippets for Sequelize
  'define db':
    'prefix': 'newDb'
    'body': """
    const db = new Sequelize('postgress://localhost:5432/${1:dbName}');
    ${2}
    """
#Import - React / Redux / React-Redux
  'import react':
    'prefix': 'ireact'
    'body': 'import React from \'react\';'
  'import react-dom':
    'prefix': 'ireactDom'
    'body': 'import ReactDOM from \'react-dom\';'
  'import axios':
    'prefix': 'iaxios'
    'body': 'import axios from \'axios\';'
  'import react-router':
    'prefix': 'irouter'
    'body': 'import { Router, Route, hashHistory, IndexRedirect, IndexRoute } from \'react-router\';'
  'import connect':
    'prefix': 'iconnect'
    'body': 'import { connect } from \'react-redux\';'
  'import provider':
    'prefix': 'iprovider'
    'body': 'import { Provider } from \'react-redux\';'
  'import createStore & applyMiddleware':
    'prefix': 'istore-middleware'
    'body': 'import { createStore, applyMiddleware } from \'redux\';'
  'import createLogger':
    'prefix': 'icreatelogger'
    'body': 'import createLogger from \'redux-logger\';'
  'import thunkMiddleware':
    'prefix': 'ithunk'
    'body': 'import thunkMiddleware from \'redux-thunk\';'
  'general import':
    'prefix': 'import'
    'body': 'import { ${1:something} } from \'${2:somewhere}\';'
#Export - React / Redux / React-Redux
  'export connect, mapStateToProps, mapDispatchToProps':
    'prefix': 'econnect'
    'body': 'const mapStateToProps = (state, ownProps) => {\n\t${1:// your code here }\n};\n\nconst mapDispatchToProps = (dispatch) => {\n\t${2:// your code here}\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(${3:SOMECOMPONENT})'
#Render - React / Redux / React-Redux
  'ReactDOM render':
    'prefix': 'rreactdom'
    'body': 'ReactDOM.render(\n\t<${1:SomeRootComponent} />,\n\tdocument.getElementById(\'${2:SomeApp}\')\n);'