Snippets for VSCode

DiegoNataloSnippets.code-snippets.json

{
  "Create react component": {
    "scope": "javascriptreact,typescriptreact",
    "prefix": "rc",
    "body": [
      "export function $1() {",
      "  return (",
      "    $2",
      "  )",
      "}"
    ],
    "description": "Create a basic component."
  },

  "Prettier plugin tailwindcss": {
    "scope": "javascript",
    "prefix": "pp",
    "body": [
      "module.exports = {",
      "  plugins: [",
      "    require('prettier-plugin-tailwindcss'),",
      "    require('prettier-plugin-organize-imports')",
      "  ]",
      "}"
    ],
    "description": "Config prettier plugins."
  },

  "Import HTMLAttributes": {
    "scope": "typescriptreact",
    "prefix": "iha",
    "body": [
      "import { $1HTMLAttributes } from 'react'",
      "",
      "interface ${TM_DIRECTORY/^.+\\\\(.*)$/$1/}Props extends $1HTMLAttributes<HTML$2Element> {",
      "  $3",
      "}"
    ],
    "description": "Import HTMLAttributes"
  },

  "Create Styled-Component": {
    "scope": "javascript,typescript",
    "prefix": "sc",
    "body": [
      "import styled from 'styled-components'",
      "",
      "export const $1 = styled.$2`",
      "  $3",
      "`"
    ],
    "description": "Create Styled-Component"
  },

  //CSS
  "Create Global CSS": {
    "scope": "css,scss",
    "prefix": "global",
    "body": [
      "* {",
      "  margin: 0;",
      "  padding: 0;",
      "  box-sizing: border-box;",
      "}",
      "",
      ":focus {",
      "  outline: transparent;",
      "  box-shadow: 0 0 0 2px red;",
      "}",
      "",
      "body {",
      "  background: #333;",
      "  -webkit-font-smoothing: antialiased;",
      "}",
      "",
      "body, input, textarea, button {",
      "  font-family: 'Arial', sans-serif;",
      "  font-weight: 400;",
      "  font-size: 1rem;",
      "}"
    ],
    "description": "Create Global CSS"
  }
}