VS Code snippets

global.code-snippets

{
    "Component": {
        "prefix": "mkComponent",
        "body": [
            "import React, { type ReactNode } from 'react';",
            "",
            "interface ${TM_FILENAME_BASE/(.*)\\..+$/$1/}Props {",
            "    children: ReactNode;",
            "}",
            "",
            "export default function ${TM_FILENAME_BASE/(.*)\\..+$/$1/}({ children }: ${TM_FILENAME_BASE/(.*)\\..+$/$1/}Props) {",
            "    return <div className=\"\">{children}</div>;",
            "}",
            ""
        ],
        "description": "A stateless function component"
    },
    "Function": {
        "prefix": "mkFunction",
        "body": [
            "export function $1(arg: {$2}): null {",
            "    return null;",
            "}",
            ""
        ],
        "description": "A function component"
    },
    "Name component": {
        "prefix": "mkNamedComponent",
        "body": [
            "import React, { type ReactNode } from 'react';",
            "",
            "interface ${TM_FILENAME_BASE/(.*)\\..+$/$1/}Props {",
            "    children: ReactNode;",
            "}",
            "",
            "const ${TM_FILENAME_BASE/(.*)\\..+$/$1/} = ({ children }: ${TM_FILENAME_BASE/(.*)\\..+$/$1/}Props) => {",
            "    return <div className=\"\">{children}</div>;",
            "}",
            "",
            "export { ${TM_FILENAME_BASE/(.*)\\..+$/$1/} };",
            ""
        ],
        "description": "A stateless function component"
    },
    "Remix Route": {
        "prefix": "mkRemixRoute",
        "body": [
            "import { json } from '@remix-run/node';",
            "import { useLoaderData } from '@remix-run/react';",
            "",
            "export async function loader() {",
            "    return json({ count: 1 });",
            "}",
            "",
            "export async function action() {",
            "    // const form = await request.formData();",
            "    return null;",
            "}",
            "",
            "export default function $1Route() {",
            "    const { count } = useLoaderData<typeof loader>();",
            "",
            "    return <>{count}</>;",
            "}",
        ],
        "description": "Remix Route"
    },
    "Remix Resource Route": {
        "prefix": "mkRemixResourceRoute",
        "body": [
            "import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';",
            "import { json } from '@remix-run/node';",
            "",
            "export async function loader({ request }: LoaderFunctionArgs) {",
            "    return json({});",
            "}",
            "",
            "export async function action({ request }: ActionFunctionArgs) {",
            "    if (request.method === \"POST\") {",
            "      /* handle \"POST\" */",
            "    } else if (request.method === \"PUT\") {",
            "      /* handle \"PUT\" */",
            "    } else if (request.method === \"PATCH\") {",
            "      /* handle \"PATCH\" */",
            "    } else if (request.method === \"DELETE\") {",
            "      /* handle \"DELETE\" */",
            "    }",
            "}",
            "",
        ],
        "description": "Remix Route"
    },
    "Remix Loader": {
        "prefix": "mkLoader",
        "body": [
            "export async function loader({ request }: LoaderFunctionArgs) {",
            "    return json({});",
            "}"
        ],
        "description": "Remix loader function"
    },
    "Remix Action": {
        "prefix": "mkAction",
        "body": [
            "export async function action({ request }: ActionFunctionArgs) {",
            "    // const form = await request.formData();",
            "    return null;",
            "}"
        ],
        "description": "Remix action function"
    },
    "Remix Error Boundary": {
        "prefix": "mkErrorBoundary",
        "body": [
            "export function ErrorBoundary() {",
            "    const error = useRouteError();",
            "",
            "    if (isRouteErrorResponse(error)) {",
            "        return (",
            "            <div>",
            "                <h1>",
            "                    {error.status} {error.statusText}",
            "                </h1>",
            "                <p>{error.data}</p>",
            "            </div>",
            "        );",
            "    } else if (error instanceof Error) {",
            "        return (",
            "            <div>",
            "                <h1>Error</h1>",
            "                <p>{error.message}</p>",
            "                <p>The stack trace is:</p>",
            "                <pre>{error.stack}</pre>",
            "            </div>",
            "        );",
            "    } else {",
            "        return <h1>Unknown Error</h1>;",
            "    }",
            "}"
        ],
        "description": "Remix Error Boundary"
    },
    "Reducer": {
        "prefix": "mkUseReducer",
        "body": [
            "const initialState = { count: 0 };",
            "",
            "type ACTIONTYPE =",
            "  | { type: \"increment\"; payload: number }",
            "  | { type: \"decrement\"; payload: string };",
            "",
            "function reducer(state: typeof initialState, action: ACTIONTYPE) {",
            "  switch (action.type) {",
            "    case \"increment\":",
            "      return { count: state.count + action.payload };",
            "    case \"decrement\":",
            "      return { count: state.count - Number(action.payload) };",
            "    default:",
            "      throw new Error();",
            "  }",
            "}",
            "",
            "const [state, dispatch] = useReducer(reducer, initialState);"
        ],
        "description": "Reducer"
    },
    "List": {
        "prefix": "mkList",
        "body": [
            "<ul>",
            "    {['abc'].map((str) => <li key={str}>{str}</li>)}",
            "</ul>"
        ],
        "description": "Generic unordered list"
    },
    "Prisma Model Skeleton": {
        "prefix": "mkPrismaModel",
        "body": [
            "model $1 {",
            "    id        String   @id @default(cuid())",
            "    createdAt DateTime @default(now())",
            "    updatedAt DateTime @updatedAt",
            "}"
        ],
        "description": "Most basic model"
    },
    "Node.js Script": {
        "prefix": "mkNodeScript",
        "body": [
            "\"use strict\";",
            "",
            "async function main() {",
            "\ttry {",
            "\t\t// Your code here",
            "\t} catch (error) {",
            "\t\tconsole.error('Error:', error);",
            "\t}",
            "}",
            "",
            "main();"
        ],
        "description": "Create a basic Node.js script with async/await support"
    },
    "Code block": {
        "prefix": "mkCodeBlock",
        "body": [
            "<pre>",
            "    <code>",
            "        {JSON.stringify($1, null, 4)}",
            "    </code>",
            "</pre>"
        ],
        "description": "Code block"
    }
}