Skip to content

Instantly share code, notes, and snippets.

@cjpais
Created September 1, 2021 14:26
Show Gist options
  • Save cjpais/1c754e32876ecb3f8dc7605c12f475fb to your computer and use it in GitHub Desktop.
Save cjpais/1c754e32876ecb3f8dc7605c12f475fb to your computer and use it in GitHub Desktop.
@shahruz shared nextjs & react vscode snippets
{
"React Function Component": {
"prefix": "rfc",
"body": [
"import React from 'react'",
"",
"const ${name:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = () => {",
"\treturn (",
"\t\t<div className=\"${classname:${TM_FILENAME_BASE/(.*)/${1:/downcase}/}}\">",
"\t\t\t$0",
"\t\t\t<style jsx>{`",
"\t\t\t\t.${classname:${TM_FILENAME_BASE/(.*)/${1:/downcase}/}} {",
"\t\t\t\t\t",
"\t\t\t\t}",
"\t\t\t`}</style>",
"\t\t</div>",
"\t)",
"}",
"",
"export default ${name:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}};"
]
},
"React Native Function Component": {
"prefix": "rnfc",
"body": [
"import React from 'react'",
"import { View, Text, StyleSheet } from 'react-native'",
"",
"const ${name:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = () => {",
"\treturn (",
"\t\t<View>",
"\t\t\t$0",
"\t\t</View>",
"\t)",
"}",
"",
"const styles = StyleSheet.create({",
"\t",
"});",
"",
"export default ${name:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}};"
]
},
"Generic Function": {
"prefix": "gfunc",
"body": [
"const ${name:${TM_FILENAME_BASE/(.*)/${1:/pascalCase}/}} = () => {",
"\t$0",
"}",
"",
"export default ${name:${TM_FILENAME_BASE/(.*)/${1:/pascalCase}/}};"
]
},
"Next Scripts": {
"prefix": "next-scripts",
"body": [
"\"scripts\": {",
"\t\"dev\" : \"next\",",
"\t\"build\" : \"next build\",",
"\t\"start\" : \"next start\"",
"},"
]
},
"Styled JSX": {
"prefix": "style-jsx",
"body": ["<style jsx>{`", "\t$0", "`}</style>"]
},
"Styled Global JSX": {
"prefix": "style-jsx-global",
"body": ["<style jsx global>{`", "\t$0", "`}</style>"]
},
"React div": {
"prefix": "div-react",
"body": ["<div className=\"$0\"></div>"]
},
"React span": {
"prefix": "span-react",
"body": ["<span className=\"$0\"></span>"]
},
"React img": {
"prefix": "img-react",
"body": ["<img className=\"$0\" src={``}/>"]
},
"System Font Stack": {
"prefix": "sfs",
"body": [
"font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";"
]
},
"Mono Font Stack": {
"prefix": "sfsmono",
"body": [
"font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;"
]
},
"Media Query": {
"prefix": "mq",
"body": ["@media (max-width: 768px) {", "\t$0", "}"]
},
"Next API Function": {
"prefix": "next-api",
"body": [
"import { NextApiHandler } from 'next';",
"",
"const api: NextApiHandler = async (req, res) => {",
"\t$0",
"\treturn res.json({});",
"};",
"",
"export default api;"
]
},
"CSS Top Left Bottom Right": {
"prefix": "tlbr",
"body": ["top: 0; left: 0; right: 0; bottom: 0;"]
},
"JSON Preview Component": {
"prefix": "json-preview",
"body": ["<pre>{JSON.stringify($0, null, 2)}</pre>"]
},
"console.log()": {
"prefix": "clog",
"body": ["console.log($0);"]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment