Last active
May 24, 2017 19:14
-
-
Save Crizzooo/a1cd9db366748e208c8acdd342229c93 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Hi Fullstack Friends! | |
This gist will walk you through installing snippets I have created to help you work faster and more efficiently in Express! | |
This gist is specifically for Sublime Users. | |
--- INSTALLATION INSTRUCTIONS --- | |
Each Snippet must be installed individually using the following steps: | |
1. Tools -> Developer -> New Snippet. | |
2. Copy and Paste each snipper beginning and ending with <snippet> and </snippet> | |
and paste it over everything in the file that opens | |
when you click Tools -> Developer -> New Snippet. | |
3. Hit Ctrl + S and the Finder will open in the folder you need to save the snippets to. | |
IMPORTANT: Each snipper must be saved like the following: | |
snippet_name.sublime-snippet | |
If you leave off the .sublime-snippet, Sublime WILL NOT recognize the file as a snippet. | |
4. Create a new file ending in .js, and test one of the below snippet Triggers (i.e aget) | |
5. Type the trigger, and then press tab to cycle through the predefined cursor points. | |
The final tab will move you outside of your snippet! | |
Each of the below snippets needs to be installed separately. | |
You can read more about writing Snippets in Sublime here: | |
https://www.granneman.com/webdev/editors/sublime-text/top-features-of-sublime-text/quickly-insert-text-and-code-with-sublime-text-snippets/ | |
Copy and Paste each snippet from this gist below (COPY CODE BELOW HERE) in to their own sublime-snippet file. | |
---- | |
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! | |
----------------- | |
{ COPY EACH BELOW SNIPPET IN TO THEIR OWN FILE USING TOOLS -> DEV -> NEW SNIPPET } | |
#Arrow Func with 1 parameter: | |
<snippet> | |
<content><![CDATA[ | |
(${1:param}) => { | |
${2} | |
}; | |
${3} | |
]]></content> | |
<tabTrigger>arr</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
#Snippets for Express Routes using router | |
#router.get Express: | |
<snippet> | |
<content><![CDATA[ | |
router.get('${1:Route}', (req, res, next) => { | |
${2} | |
}); | |
${3} | |
]]></content> | |
<tabTrigger>rget</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
#router.post Express: | |
<snippet> | |
<content><![CDATA[ | |
router.post('${1:Route}', (req, res, next) => { | |
${2} | |
}); | |
${3} | |
]]></content> | |
<tabTrigger>rpost</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
#router.delete Express: | |
<snippet> | |
<content><![CDATA[ | |
router.delete('${1:Route}', (req, res, next) => { | |
${2} | |
}); | |
${3} | |
]]></content> | |
<tabTrigger>rdelete</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
#router.put Express: | |
<snippet> | |
<content><![CDATA[ | |
router.put('${1:Route}', (req, res, next) => { | |
${2} | |
}); | |
${3} | |
]]></content> | |
<tabTrigger>rput</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
#Snippets for Express Routes using app | |
<snippet> | |
<content><![CDATA[ | |
app.get('${1:Route}', (req, res, next) => { | |
${2} | |
}); | |
${3} | |
]]></content> | |
<tabTrigger>aget</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
# app.post Express: | |
<snippet> | |
<content><![CDATA[ | |
app.post('${1:Route}', (req, res, next) => { | |
${2} | |
}); | |
${3} | |
]]></content> | |
<tabTrigger>apost</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
# app.delete Express: | |
<snippet> | |
<content><![CDATA[ | |
app.delete('${1:Route}', (req, res, next) => { | |
${2} | |
}); | |
${3} | |
]]></content> | |
<tabTrigger>adelete</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
# app.put Express: | |
<snippet> | |
<content><![CDATA[ | |
app.put('${1:Route}', (req, res, next) => { | |
${2} | |
}); | |
${3} | |
]]></content> | |
<tabTrigger>aput</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
# app.use Express: | |
<snippet> | |
<content><![CDATA[ | |
app.use('${1:Route}', ${2:(req, res, next)} => { | |
${3} | |
}); | |
${4} | |
]]></content> | |
<tabTrigger>appuse</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
# bodyParser Express Boilerplate: | |
<snippet> | |
<content><![CDATA[ | |
//bodyParser middleware | |
app.use(bodyParser.urlencoded({ extended: false })); | |
app.use(bodyParser.json()); | |
${1} | |
]]></content> | |
<tabTrigger>bodyParser Middleware</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
# default Express Error Handler: | |
<snippet> | |
<content><![CDATA[ | |
//Error Handler | |
app.use('/', (err, req, res, next) => { | |
res.status(err.status || 500).json(err);${1} | |
}); | |
${2} | |
]]></content> | |
<tabTrigger>appErrorHandler</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> | |
# App Use Static: | |
<snippet> | |
<content><![CDATA[ | |
//Static Handling | |
app.use('${1:/}', express.static(path.join(__dirname, '${2}'))); | |
${3} | |
]]></content> | |
<tabTrigger>appStatic</tabTrigger> | |
<scope>source.js</scope> | |
</snippet> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment