Skip to content

Instantly share code, notes, and snippets.

@Irungaray
Last active March 9, 2022 22:37
Show Gist options
  • Save Irungaray/c82ad4653d73656a37cf5110ee9840ce to your computer and use it in GitHub Desktop.
Save Irungaray/c82ad4653d73656a37cf5110ee9840ce to your computer and use it in GitHub Desktop.
Custom VSCodium Config & Snippets for React

react-snippets.code-snippets:

{
"customReactArrowFunctionExportComponent": {
    "prefix": "rafce",
    "body": [
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "    return (",
			"        <>$0</>",
			"    )",
      "};",
      "",
      "export { ${1:${TM_FILENAME_BASE}} }",
      ""
    ],
    "description": "Custom React Arrow Function Component with ES7 module system",
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
	"customPropTypes": {
    "prefix": "cpt",
    "body": [
      "${1:${TM_FILENAME_BASE}}.propTypes = {",
			"    $0",
			"}"
    ],
    "description": "Prop Types declaration",
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
}

keybindings.json:

// Place your key bindings in this file to override the defaults
  [
  // Terminal focus
  { "key": "ctrl+`", "command": "workbench.action.terminal.focus"},
  { "key": "ctrl+`", "command": "workbench.action.focusActiveEditorGroup", "when": "terminalFocus"},

  // Switch terminals
  { "key": "ctrl+down", "command": "workbench.action.terminal.focusNext", "when": "terminalFocus" },
  { "key": "ctrl+up", "command": "workbench.action.terminal.focusPrevious", "when": "terminalFocus" },

  // New file
  {
    "key": "ctrl+n",
    "command": "explorer.newFile"
  },
  {
    "key": "ctrl+shift+[Backslash]",
    "command": "editor.action.commentLine",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+7",
    "command": "-editor.action.commentLine",
    "when": "editorTextFocus && !editorReadonly"
  }
]

settings.json:

{
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"terminal.integrated.allowChords": false,
"editor.minimap.enabled": false,
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
},
"editor.parameterHints.enabled": false,
"editor.hover.enabled": true,
"update.mode": "none",
"workbench.iconTheme": "material-icon-theme",
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.tabWidth": 4,
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"terminal.integrated.shell.linux": "/usr/bin/zsh",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.semi": false,
"explorer.compactFolders": false,
"bracketPairColorizer.depreciation-notice": false,
"workbench.colorTheme": "Nord",
"editor.semanticTokenColorCustomizations": {
    "[Nord]": {
        "enabled": true
    }
},
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
                "meta.embedded",
                "source.groovy.embedded"
            ],
            "settings": {
                "foreground": "#03a762"
            }
        },
        {
            "scope": "comment",
            "settings": {
                "foreground": "#88846F"
            }
        },
        {
            "scope": "string",
            "settings": {
                "foreground": "#E6DB74"
            }
        },
        {
            "scope": [
                "punctuation.definition.template-expression",
                "punctuation.section.embedded"
            ],
            "settings": {
                "foreground": "#F92672"
            }
        },
        {
            "scope": [
                "meta.template.expression"
            ],
            "settings": {
                "foreground": "#ee04bb"
            }
        },
        {
            "scope": "constant.numeric",
            "settings": {
                "foreground": "#AE81FF"
            }
        },
        {
            "scope": "constant.language",
            "settings": {
                "foreground": "#AE81FF"
            }
        },
        {
            "scope": "constant.character, constant.other",
            "settings": {
                "foreground": "#AE81FF"
            }
        },
        {
            "scope": "variable",
            "settings": {
                "foreground": "#e71295",
                "fontStyle": ""
            }
        },
        {
            "scope": "variable.other.property.jsx",
            "settings": {
                "foreground": "#c9d1f7",
                "fontStyle": "bold"
            }
        },
        {
            "scope": "variable.other.constant.object.jsx",
            "settings": {
                "foreground": "#f6ffa2",
                "fontStyle": "bolder"
            }
        },
        {
            "scope": "variable.other",
            "settings": {
                "foreground": "#fbff00",
                "fontStyle": ""
            }
        },
        {
            "scope": "meta.object-literal.key",
            "settings": {
                "foreground": "#cd64d6",
                "fontStyle": ""
            }
        },
        {
            "scope": "keyword",
            "settings": {
                "foreground": "#F92672"
            }
        },
        {
            "scope": "storage",
            "settings": {
                "foreground": "#F92672",
                "fontStyle": ""
            }
        },
        {
            "scope": "storage.type",
            "settings": {
                "foreground": "#66D9EF",
                "fontStyle": "italic"
            }
        },
        {
            "scope": "entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution",
            "settings": {
                "foreground": "#A6E22E",
                "fontStyle": "underline"
            }
        },
        {
            "scope": "entity.other.inherited-class",
            "settings": {
                "foreground": "#A6E22E",
                "fontStyle": "italic underline"
            }
        },
        {
            "scope": "entity.name.function",
            "settings": {
                "foreground": "#A6E22E",
                "fontStyle": ""
            }
        },
        {
            "scope": "variable.parameter",
            "settings": {
                "foreground": "#FD971F",
                "fontStyle": "italic"
            }
        },
        {
            "scope": "entity.name.tag",
            "settings": {
                "foreground": "#F92672",
                "fontStyle": ""
            }
        },
        {
            "scope": "entity.other.attribute-name",
            "settings": {
                "foreground": "#A6E22E",
                "fontStyle": ""
            }
        },
        {
            "scope": "support.function",
            "settings": {
                "foreground": "#66D9EF",
                "fontStyle": ""
            }
        },
        {
            "scope": "support.constant",
            "settings": {
                "foreground": "#66D9EF",
                "fontStyle": ""
            }
        },
        {
            "scope": "support.type, support.class",
            "settings": {
                "foreground": "#66D9EF",
                "fontStyle": "italic"
            }
        },
        {
            "scope": "support.other.variable",
            "settings": {
                "fontStyle": ""
            }
        },
        {
            "scope": "invalid",
            "settings": {
                "foreground": "#F44747",
                "fontStyle": ""
            }
        },
        {
            "scope": "invalid.deprecated",
            "settings": {
                "foreground": "#F44747"
            }
        },
        {
            "scope": "meta.structure.dictionary.json string.quoted.double.json",
            "settings": {
                "foreground": "#CFCFC2"
            }
        },
        {
            "scope": "meta.diff, meta.diff.header",
            "settings": {
                "foreground": "#75715E"
            }
        },
        {
            "scope": "markup.deleted",
            "settings": {
                "foreground": "#F92672"
            }
        },
        {
            "scope": "markup.inserted",
            "settings": {
                "foreground": "#A6E22E"
            }
        },
        {
            "scope": "markup.changed",
            "settings": {
                "foreground": "#E6DB74"
            }
        },
        {
            "scope": "constant.numeric.line-number.find-in-files - match",
            "settings": {
                "foreground": "#AE81FFA0"
            }
        },
        {
            "scope": "entity.name.filename.find-in-files",
            "settings": {
                "foreground": "#E6DB74"
            }
        },
        {
            "scope": "markup.quote",
            "settings": {
                "foreground": "#F92672"
            }
        },
        {
            "scope": "markup.list",
            "settings": {
                "foreground": "#E6DB74"
            }
        },
        {
            "scope": "markup.bold, markup.italic",
            "settings": {
                "foreground": "#66D9EF"
            }
        },
        {
            "scope": "markup.inline.raw",
            "settings": {
                "foreground": "#FD971F",
                "fontStyle": ""
            }
        },
        {
            "scope": "markup.heading",
            "settings": {
                "foreground": "#A6E22E"
            }
        },
        {
            "scope": "markup.heading.setext",
            "settings": {
                "foreground": "#A6E22E",
                "fontStyle": "bold"
            }
        },
        {
            "scope": "markup.heading.markdown",
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "scope": "markup.quote.markdown",
            "settings": {
                "foreground": "#75715E",
                "fontStyle": "italic"
            }
        },
        {
            "scope": "markup.bold.markdown",
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "scope": "string.other.link.title.markdown,string.other.link.description.markdown",
            "settings": {
                "foreground": "#AE81FF"
            }
        },
        {
            "scope": "markup.underline.link.markdown,markup.underline.link.image.markdown",
            "settings": {
                "foreground": "#E6DB74"
            }
        },
        {
            "scope": "markup.italic.markdown",
            "settings": {
                "fontStyle": "italic"
            }
        },
        {
            "scope": "markup.strikethrough",
            "settings": {
                "fontStyle": "strikethrough"
            }
        },
        {
            "scope": "markup.list.unnumbered.markdown, markup.list.numbered.markdown",
            "settings": {
                "foreground": "#F8F8F2"
            }
        },
        {
            "scope": [
                "punctuation.definition.list.begin.markdown"
            ],
            "settings": {
                "foreground": "#A6E22E"
            }
        },
        {
            "scope": "token.info-token",
            "settings": {
                "foreground": "#6796E6"
            }
        },
        {
            "scope": "token.warn-token",
            "settings": {
                "foreground": "#CD9731"
            }
        },
        {
            "scope": "token.error-token",
            "settings": {
                "foreground": "#F44747"
            }
        },
        {
            "scope": "token.debug-token",
            "settings": {
                "foreground": "#B267E6"
            }
        },
        {
            "scope": "variable.language",
            "settings": {
                "foreground": "#FD971F"
            }
        }
    ]

},

}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment