Skip to content

Instantly share code, notes, and snippets.

@Crizzooo
Last active May 24, 2017 19:14
Show Gist options
  • Save Crizzooo/a1cd9db366748e208c8acdd342229c93 to your computer and use it in GitHub Desktop.
Save Crizzooo/a1cd9db366748e208c8acdd342229c93 to your computer and use it in GitHub Desktop.
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