Tinker Snippets for VS Code

global.code-snippets

{

    "Stateful react component": {
        "prefix": "recomp",
        "body": [
        "import styles from './${TM_FILENAME_BASE}.module.scss';",
        "import React, { Component } from 'react';",
        "import classnames from 'classnames';",
        "",
        "class ${TM_FILENAME_BASE} extends Component {",
            "\trender() {",
                "\t\treturn (",
                    "\t\t\t<div>",
                    "\t\t\t\t${0:Write your component here}",
                    "\t\t\t</div>",
                "\t\t);",
            "\t}",
        "}",
        "",
        "export default ${TM_FILENAME_BASE};",
        ],
        "description": "Simple react components"
    },

    "Stateless react component": {
      "prefix": "reless",
      "body": [
      "import styles from './${TM_FILENAME_BASE}.module.scss';",
      "import React from 'react';",
      "import classnames from 'classnames';",
      "",
      "const ${TM_FILENAME_BASE} = ({",
        "\t${1:Another props},",
        "\tclassName,",
        "\t...restProps",
        "\t}) => {",
          "\treturn (",
            "\t\t<div>",
            "\t\t\t${1:Write your component here}",
            "\t\t</div>",
          "\t);",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};",
      ],
      "description": "Simple react stateless components"
    },

    "SCSS import from src/tokens": {
      "prefix": "impcss",
      "body": [
      "@import 'src/tokens';",
      "",
      ".root {",
        "\t${0:Write your component here}",
      "}"
      ],
      "description": "Simple react scss import from src"
    },
    
    "Media queries using mixins": {
        "prefix": "medq",
        "body": [
        "@include screen(smallPhone) {",
          "\t",
        "}",
        "@include screen(phone) {",
          "\t",
        "}",
        "@include screen(tablet) {",
          "\t",
        "}",
        "@include screen(tabletLandscape) {",
          "\t",
        "}",
        "@include screen(desktop) {",
          "\t",
        "}",
        "@include screen(desktopWide) {",
          "\t",
        "}",
        ],
        "description": "Mixins for all  media queries."
      },
    
}