VS Code Settings

Themes/Color

• Just Black
  • See editor.tokenColorCustomizations in my VS Code settings for a few modifications I make to the theme.

Extensions

• Theme / Editor Experience
  • FontSize ShortCuts
    • Change the font size with keyboard shortcuts.
  • vscode-icons
    • Nice / colorful icons for many different file types
  • ESLint
    • Integrates ESLint JS
  • Prettier
    • Automatically format javascript, JSON, CSS, Sass
  • Paste JSON as Code
    • Auto generate TypeScript (and other languages) types from JSON data., and HTML files.
  • PostCSS Intellisense and Highlighting
    • Works better than the other more popular one of a similar name.
  • Code Spell Checker
    • Spell check markdown, comments and variable names.
  • Pretty TypeScript Errors
    • Makes TS errors more human readable.
• Useful Tools
  • Paste JSON as Code
    • Auto generate TypeScript (and other languages) types from JSON data.
  • Code Snap
    • Take pictures of code with your VS Code Theme / Font settings.
  • Thunder Client
    • Make HTTP requests from inside VS Code (similar to Postman / Insomnia).
• Languages and Libraries
  • XML Tools
    • XML Formatting, XQuery, and XPath Tools for Visual Studio Code.
  • Tailwind CSS IntelliSense
    • Intelligent Tailwind CSS tooling for VS Code.
  • React
    • ES7+ React/Redux/React-Native snippets
      • Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
    • CSS to JSS
      • Convert CSS to JSS
    • CSS in JS
      • Get syntax highlighting when working with CSS in JS template strings.
    • vscode-styled-components
      • Syntax highlighting for styled-components.
  • Volar
    • Language support for Vue 3
  • Svelte for VS Code
    • Svelte language support for VS Code.
  • Prisma
    • Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.
  • htmx-tags
    • Provides HTMX tag completion in HTML files in VSCode
  • Markdown Mermaid Preview
    • View Mermaid diagrams when previewing Markdown.

Extension package names for easy install

nur.just-black
fosshaas.fontsize-shortcuts
vscode-icons-team.vscode-icons
dbaeumer.vscode-eslint
esbenp.prettier-vscode
quicktype.quicktype
vunguyentuan.vscode-postcss
streetsidesoftware.code-spell-checker
yoavbls.pretty-ts-errors
quicktype.quicktype
adpyke.codesnap
rangav.vscode-thunder-client
DotJoshJohnson.xml
bradlc.vscode-tailwindcss
dsznajder.es7-react-js-snippets
infarkt.css-to-jss
paulmolluzzo.convert-css-in-js
styled-components.vscode-styled-components
Vue.volar
svelte.svelte-vscode
Prisma.prisma
otovo-oss.htmx-tags
bierner.markdown-mermaid

Settings

{
    "codesnap.backgroundColor": "#000000",
    "codesnap.containerPadding": "0px",
    "codesnap.showWindowControls": false,
    "codesnap.transparentBackground": true,
    "cSpell.enabled": true,
    "cSpell.enableFiletypes": [
      "mdx"
    ],
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.detectIndentation": true,
    "editor.fontLigatures": true,
    "editor.fontSize": 12,
    "editor.formatOnPaste": false,
    "editor.inlineSuggest.enabled": true,
    "editor.lineHeight": 0,
    "editor.linkedEditing": true,
    "editor.minimap.enabled": false,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "editor.suggestSelection": "first",
    "editor.tabSize": 2,
    "editor.tokenColorCustomizations": {
      "textMateRules": [
        {
          "scope": [
            "keyword.operator",
            "punctuation.separator"
          ],
          "settings": {
            "fontStyle": ""
          }
        },
        {
          "scope": [
            "comment",
            "comment.block"
          ],
          "settings": {
            "fontStyle": "italic",
            "foreground": "#F5F"
          }
        },
        {
          "name": "envKeys",
          "scope": "string.quoted.double.env,source.env,constant.numeric.env",
          "settings": {
            "foreground": "#19354900"
          }
        }
      ]
    },
    "editor.unicodeHighlight.invisibleCharacters": false,
    "emmet.showAbbreviationSuggestions": false,
    "eslint.enable": true,
    "eslint.validate": [
      "vue",
      "react",
      "typescript",
      "html",
      "javascript"
    ],
    "explorer.openEditors.visible": 1,
    "extensions.ignoreRecommendations": true,
    "files.autoSave": "onWindowChange",
    "git.autofetch": true,
    "git.openRepositoryInParentFolders": "never",
    "markdown.preview.fontSize": 12,
    "screencastMode.keyboardOptions": {
      "showCommandGroups": false,
      "showCommands": false,
      "showKeybindings": true,
      "showKeys": false,
      "showSingleEditorCursorMoves": true
    },
    "search.exclude": {
      "**/*.code-search": true,
      "**/bower_components": true,
      "**/node_modules": true
    },
    "search.useIgnoreFiles": false,
    "svelte.enable-ts-plugin": true,
    "terminal.integrated.fontSize": 11,
    "vsicons.dontShowNewVersionMessage": true,
    "window.zoomLevel": 2,
    "workbench.colorTheme": "Night Owl",
    "workbench.iconTheme": "vscode-icons",
    "workbench.editor.labelFormat": "medium",
    "workbench.editor.showTabs": "none",
    "workbench.sideBar.location": "right",
    "workbench.startupEditor": "newUntitledFile",
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[handlebars]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[markdown]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[svelte]": {
      "editor.defaultFormatter": "svelte.svelte-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "explorer.confirmDragAndDrop": false,
    "explorer.confirmDelete": false,
  }

Keybindings

[
  {
    "key": "cmd+1",
    "command": "workbench.action.openEditorAtIndex1"
  },
  {
    "key": "ctrl+1",
    "command": "-workbench.action.openEditorAtIndex1"
  },
  {
    "key": "cmd+2",
    "command": "workbench.action.openEditorAtIndex2"
  },
  {
    "key": "ctrl+2",
    "command": "-workbench.action.openEditorAtIndex2"
  },
  {
    "key": "cmd+3",
    "command": "workbench.action.openEditorAtIndex3"
  },
  {
    "key": "ctrl+3",
    "command": "-workbench.action.openEditorAtIndex3"
  },
  {
    "key": "cmd+4",
    "command": "workbench.action.openEditorAtIndex4"
  },
  {
    "key": "ctrl+4",
    "command": "-workbench.action.openEditorAtIndex4"
  },
  {
    "key": "cmd+5",
    "command": "workbench.action.openEditorAtIndex5"
  },
  {
    "key": "ctrl+5",
    "command": "-workbench.action.openEditorAtIndex5"
  },
  {
    "key": "cmd+6",
    "command": "workbench.action.openEditorAtIndex6"
  },
  {
    "key": "ctrl+6",
    "command": "-workbench.action.openEditorAtIndex6"
  },
  {
    "key": "cmd+7",
    "command": "workbench.action.openEditorAtIndex7"
  },
  {
    "key": "ctrl+7",
    "command": "-workbench.action.openEditorAtIndex7"
  },
  {
    "key": "cmd+8",
    "command": "workbench.action.openEditorAtIndex8"
  },
  {
    "key": "ctrl+8",
    "command": "-workbench.action.openEditorAtIndex8"
  },
  {
    "key": "cmd+9",
    "command": "workbench.action.openEditorAtIndex9"
  },
  {
    "key": "ctrl+9",
    "command": "-workbench.action.openEditorAtIndex9"
  },
  {
    "key": "ctrl+1",
    "command": "workbench.action.focusFirstEditorGroup"
  },
  {
    "key": "cmd+1",
    "command": "-workbench.action.focusFirstEditorGroup"
  },
  {
    "key": "ctrl+3",
    "command": "workbench.action.focusThirdEditorGroup"
  },
  {
    "key": "cmd+3",
    "command": "-workbench.action.focusThirdEditorGroup"
  },
  {
    "key": "ctrl+6",
    "command": "workbench.action.focusSixthEditorGroup"
  },
  {
    "key": "cmd+6",
    "command": "-workbench.action.focusSixthEditorGroup"
  },
  {
    "key": "ctrl+7",
    "command": "workbench.action.focusSeventhEditorGroup"
  },
  {
    "key": "cmd+7",
    "command": "-workbench.action.focusSeventhEditorGroup"
  },
  {
    "key": "ctrl+2",
    "command": "workbench.action.focusSecondEditorGroup"
  },
  {
    "key": "cmd+2",
    "command": "-workbench.action.focusSecondEditorGroup"
  },
  {
    "key": "ctrl+4",
    "command": "workbench.action.focusFourthEditorGroup"
  },
  {
    "key": "cmd+4",
    "command": "-workbench.action.focusFourthEditorGroup"
  },
  {
    "key": "ctrl+5",
    "command": "workbench.action.focusFifthEditorGroup"
  },
  {
    "key": "cmd+5",
    "command": "-workbench.action.focusFifthEditorGroup"
  },
  {
    "key": "ctrl+8",
    "command": "workbench.action.focusEighthEditorGroup"
  },
  {
    "key": "cmd+8",
    "command": "-workbench.action.focusEighthEditorGroup"
  }
]