VSCode ui snippets & tasks #vscode #snippets #javascript #typescript

js.code-snippets

{
    "Log to console (String)": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": "#log",
        "body": [
            "console.log('$1');",
            "$0"
        ],
        "description": "Log to the console (String)"
    },
    "Map Function": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": [
            "#map"
        ],
        "body": [
            "[${1:array}].map(() => {",
            "\t$0",
            "\treturn;",
            "});",
            ""
        ],
        "description": "Map function"
    },
    "Arrow Function": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": [
            "#arw"
        ],
        "body": [
            "const ${1:name} = () => {",
            "\t$0",
            "\treturn;",
            "};",
            ""
        ],
        "description": "Arrow function"
    }
}

task.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Create new UI component",
            "type": "shell",
            "linux": {
                "command": [
                    "mkdir -p ./src/components/${input:promptPath}",
                    "&& touch ./src/components/${input:promptPath}/${input:promptPath}.stories.mdx",
                    "&& touch ./src/components/${input:promptPath}/${input:promptPath}.test.tsx",
                    "&& touch ./src/components/${input:promptPath}/${input:promptPath}.scss",
                    "&& touch ./src/components/${input:promptPath}/${input:promptPath}.tsx"
                ],
            },
            "problemMatcher": []
        },
    ],
    // Before using, install the extension:
    // https://marketplace.visualstudio.com/items?itemName=rioj7.command-variable
    "inputs": [
        {
            "id": "promptPath",
            "type": "command",
            "command": "extension.commandvariable.promptStringRemember",
            "args": {
                "key": "name",
                "description": "Enter a component name"
            }
        },
    ]
}

ui.code-snippets

{
    "Storybook story (ts)": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": "#ui story ts",
        "body": [
            "import React from 'react';",
            "import { ComponentStory, ComponentMeta } from '@storybook/react';",
            "import { ${1:${TM_FILENAME_BASE}} } from './$1';",
            "",
            "export default {",
            "    title: '${2:Components}/$1',",
            "    component: $1,",
            "    argTypes: {",
            "    ",
            "    },",
            "} as ComponentMeta<typeof $1>;",
            "",
            "const Template: ComponentStory<typeof $1> = (args) => (",
            "    <$1 {...args} />",
            ");",
            "",
            "export const ${3:Default} = Template.bind({});",
            "",
            "$3.args = {",
            "",
            "};",
            "$0"
        ],
        "description": "Storybook story (ts)"
    },
    "Storybook export component": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": "#ui component export",
        "body": [
            "export { $1 } from './$1/$1';",
            "export type { $1Props } from './$1/$1';",
            "$0"
        ]
    },
    "Storybook story (mdx)": {
        "scope": "markdown",
        "prefix": "#ui story mdx",
        "body": [
            "import { ${1:${TM_FILENAME/(.*).stories.mdx?/${1}/}} } from './$1';",
            "import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';",
            "",
            "<Meta",
            "    component={$1}",
            "    title='${2:Components}/$1'",
            "/>",
            "",
            "<!-- Component template -->",
            "export const Template = args => <$1 {...args} />;",
            "",
            "<!-- Component control-tab types -->",
            "export const argTypes = {}",
            "",
            "<!-- Component defaults control args -->",
            "export const argsDefault = {};",
            "",
            "<!-- Component documentation -->",
            "# $1",
            "- [Overview](#overview)",
            "- [Props](#props)",
            "- [Example](#example)",
            "",
            "## Overview",
            "${3:Optional Description}",
            "",
            "<Canvas withToolbar>",
            "    <Story args={argsDefault} argTypes={argTypes} name='Overview'>",
            "        {Template.bind({})}",
            "    </Story>",
            "</Canvas>",
            "",
            "## Props",
            "<ArgsTable of={$1} />",
            "",
            "## Variants",
            "",
            "### Example",
            "<Canvas className=\"${4:stack or grid ?}\"  withToolbar>",
            "    <Story name=\"Example\">",
            "        <$1 />",
            "    </Story>",
            "</Canvas>",
            "$0"
        ],
        "description": "Storybook story (mdx)"
    }
}