My optimized Visual Studio Code setup

#vscode-setup.md

Similar to my Jetbrains/IntelliJ/Webstorm setup, this is a gist with everything I use on my vscode setup.
I plan to always keep it up to date.

Recommended to have git bash installed.

Very recommended reads

• Tips & Tricks
• Keyboard shortcuts (Other operating systems’ keyboard shortcuts at aka.ms/vscodekeybindings, or Go to Help -> Keyboard Shortcuts Reference)
• Interative Playground. Go to Help -> Interative playground
• Release notes(they always show cool existing and new features)
• Refactoring

Good code fonts

Prefer ttf variable > ttf static > otf static

• Cascadia code
• Fira code
• Hack
• input
• Hasklig
• SF Mono Ligaturized

Themes

• CodeSandbox Theme
• GitHub Theme

Icon themes

• Studio Icons
• Simple icons

Extensions:

General/Required

• sidebar-markdown-notes
• Better Comments
• Path Intellisense
• TypeScript Hero
• GitLens — Git supercharged
• Git Graph
• Disabled due to performance: colorize

Improves experience

• Surround
• Go to Next/Previous Member
• Disabled due to performance: Inline Parameters for VSCode

Linting/Formatting

• ESLint
• Prettier - Code formatter

Useful extensions to learn in the future:

• Provision
• Browse Lite

Shortcuts

These shortcuts are on Windows, and symbols are from an ABNT2 keyboard

] on ABNT2 is equals to \
´ on ABNT2 is equals to [

Some of the following commands also depends on keybindings.json to be configured the same as the below provided settings, and others depends on some extensions

More at aka.ms/vscodekeybindings

Shortcuts I'm currently learning

Ctrl + K Z = Turn on Zen mode (Caution with windows focus assist, maybe turn it off or it will hide your notifications)

Editing

Ctrl + Up/Down = Go to next/previous member(Extension: mishkinf.goto-next-previous-member)
Ctrl + Shift + T = Surround with(Extension: yatki.vscode-surround)
Shift + Alt + O = Organize(Extension: rbbit.typescript-hero)
Shift + Alt + Left/Right = Select more/Less
Shift + Alt + Up/Down = Duplicate up/down
Ctrl + Shift + O = Navigate symbols
Ctrl + Shift + L = Select all similar to current cursor
Ctrl + Shift + M = Problems tab
Ctrl + Shift + ] = Go to the end of the current bracket
Ctrl + Alt + W = Wrap with html tag(Depends on keybindings.json)
Shift + Alt + A = Comment "big"
Ctrl(Hold) + K + I = Show hover info tooltip
Ctrl + Shift + Space = Parameter hints
F8 = Cycle through errors
Ctrl + H = Open replace window
Ctrl + Alt + Enter = Confirm replacement
F12 / Ctrl + F12 / Shift + F12 / Alt + F12 / Ctrl + Shift + F12 (and any Ctrl + Shift variations) = Definitions/Implementations/Goto variations

Cursor

Alt + Click = Add multi cursor
Ctrl + Alt + Up/Down = Add multi cursor up/down
Shift + Alt + Click(Drag = Box selection

Terminal

Alt + Left/Right = Move between multiple terminals
Ctrl + Shift + 5 = Make new side terminal

View

Shift + Alt + - = When on explorer view, fold everything(Depends on keybindings.json)
Alt + Insert = When on explorer view, create a new file(Depends on keybindings.json)

Editor

Ctrl + Q = Quick open view
Ctrl + ] = Open current on right
Ctrl(Hold) + K + Left/Right = Focus left/right editor group
Ctrl(Hold) + [1..5] = Focus group 1..5
Ctrl + Shift + G G = Open definition right
Ctrl + W = Close tab
Ctrl + K W = Close all tabs
Ctrl + K U = Close saved
Ctrl + K Enter = Transform temporary tab in normal tab
Ctrl + K Shift + Enter = Pin/Unpin tab

Folding

Ctrl + Shift + ´ = Fold
Ctrl + Shift + [ = Unfold
Ctrl(Hold) + K + 0 = Fold All
Ctrl(Hold) + K + J = Unfold All
Ctrl(Hold) + K + ´ = Fold Recursive
Ctrl(Hold) + K + [ = Unfold Recursive

Common shortcuts I'm used to

Alt + Left/Right = Go to previous/Next on history (Depends on keybindings.json on non windows machines)
Alt + Up/Down = Move line up/down
Ctrl + PageDown/PageUp= Navigate between open tabs
Ctrl + Shift + . + Ctrl + Left/Right = Navigate on breadcrumb
Ctrl + B = Toggle Sidebar
Ctrl + Shift + E = Open explorer sidebar
Ctrl + E = Go to file, show recent edits (workbench.action.quickOpen)
Ctrl + P = Go to file, show recent edits (workbench.action.quickOpen)
Ctrl + Shift + P = Open commands console
Ctrl + Home/End = Go to End/Start of file
PageDown/PageUp = Scroll file pages
Ctrl + ArrowUp/ArrowDown = Scroll file line
Ctrl + Space = Display auto-complete/Import tooltip suggestions
Ctrl + . = Quick fix
Ctrl + ; = Comment current line or selection
Ctrl + K S = Save all tabs
F2 = Rename refactor

Configuring correct hardware acceleration for zen mode fix

This is a fix for when you use zen mode, but the elements does not show correctly

• Press Ctrl + P
• Type >
• Type runtime
• Open Configure runtime arguments
• Add "disable-hardware-acceleration": true or copy the argv.json file from this gist
• Restart vscode

Snippets

• React: %APPDATA%\Code\User\snippets\typescriptreact.json

argv.json

// This configuration file allows you to pass permanent command line arguments to VS Code.
// Only a subset of arguments is currently supported to reduce the likelyhood of breaking
// the installation.
//
// PLEASE DO NOT CHANGE WITHOUT UNDERSTANDING THE IMPACT
//
// NOTE: Changing this file requires a restart of VS Code.
{
	// Use software rendering instead of hardware accelerated rendering.
	// This can help in cases where you see rendering issues in VS Code.
	// "disable-hardware-acceleration": true,
	// Enabled by default by VS Code to resolve color issues in the renderer
	// See https://github.com/Microsoft/vscode/issues/51791 for details
	"disable-color-correct-rendering": true,
	"disable-hardware-acceleration": true
}

debug_ts-node-dev.md

How to debug a normal node server running with ts-node-dev

Run with: ts-node-dev --inspect --respawn --transpileOnly src/index.ts

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to server",
      "protocol": "inspector",
      "port": 9229,
      "restart": true,
      "cwd": "${workspaceRoot}"
    }
  ]
}

keybindings.json

// Place your key bindings in this file to override the defaultsauto[]
[
  {
    "key": "shift+alt+oem_minus",
    "command": "workbench.files.action.collapseExplorerFolders",
    "when": "!editorFocus"
  },
  {
    "key": "ctrl+alt+w",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection",
    "args": {
      "abbreviation": "div"
    }
  },
  {
    "key": "ctrl+alt+d",
    "command": "workbench.action.tasks.runTask",
    "args": "rnDevMenu"
  },
  {
    "key": "alt+insert",
    "command": "explorer.newFile",
    "when": "!editorFocus"
  },

  // Scrolling
  {
    "key": "alt+oem_2", // whatever keybinding you like
    "command": "editorScroll",
    "args": {
      "by": "line",
      "to": "down",
      "revealCursor": true, // set to true if you did want to move the cursor false is the default
      "value": 1
    },
    "when": "editorFocus"
  },
  {
    "key": "alt+abnt_c1", // whatever keybinding you like
    "command": "editorScroll",
    "args": {
      "by": "line",
      "to": "down",
      "revealCursor": true, // set to true if you did want to move the cursor false is the default
      "value": 3
    },
    "when": "editorFocus"
  },

  {
    "key": "shift+alt+oem_2", // whatever keybinding you like
    "command": "editorScroll",
    "args": {
      "by": "wrappedLine",
      "to": "up",
      "revealCursor": true, // set to true if you did want to move the cursor false is the default
      "value": 1
    },
    "when": "editorFocus"
  },
  {
    "key": "shift+alt+abnt_c1", // whatever keybinding you like
    "command": "editorScroll",
    "args": {
      "by": "wrappedLine",
      "to": "up",
      "revealCursor": true, // set to true if you did want to move the cursor false is the default
      "value": 3
    },
    "when": "editorFocus"
  },

  // https://stackoverflow.com/questions/51554277/how-can-i-configure-ctrlpgup-and-ctrlpgdown-keybindings-in-vscode-navigate-to

  {
    "key": "alt+home",
    "command": "cursorMove",
    "when": "editorTextFocus",
    "args": {
      "to": "viewPortTop"
    }
  },
  {
    "key": "alt+end",
    "command": "cursorMove",
    "when": "editorTextFocus",
    "args": {
      "to": "viewPortBottom"
    }
  },
  {
    "key": "shift+alt+home",
    "command": "cursorMove",
    "when": "editorTextFocus",
    "args": {
      "to": "viewPortCenter"
    }
  },
  {
    "key": "ctrl+shift+k",
    "command": "-editor.action.deleteLines",
    "when": "textInputFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+k",
    "command": "workbench.action.closeOtherEditors"
  },
  {
    "key": "ctrl+shift+f",
    "command": "workbench.action.quickTextSearch"
  }
]

react_native.tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "rnDevMenu",
            "type": "shell",
            "presentation": {
                "echo": false,
                "reveal": "never",
                "focus": false,
                "panel": "new",
                "showReuseMessage": false,
                "clear": false
            },
            "command": "adb reverse tcp:8081 tcp:8081 && adb shell input keyevent 82"
        }
    ]
}

settings.json

{
  // Color customization
  "workbench.colorTheme": "GitHub Dark",
  "workbench.iconTheme": "simple-icons",
  "editor.fontFamily": "Jetbrains Mono",
  "editor.fontLigatures": true,
  "workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#fbff00"
  },

  // Terminal
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.fontFamily": "MesloLGS NF",

  // Git
  "git.autofetch": true,

  // Languages
  "javascript.referencesCodeLens.enabled": true,
  "typescript.referencesCodeLens.enabled": true,
  "typescript.implementationsCodeLens.enabled": true,

  // "[jsonc]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[json]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[typescriptreact]": {
  //   "editor.codeActionsOnSave": {
  //     "editor.action.organizeImports": true,
  //     "typescriptHero.imports.organize": true,
  //     "source.fixAll": true
  //   },
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[typescript]": {
  //   "editor.codeActionsOnSave": {
  //     "editor.action.organizeImports": true,
  //     "typescriptHero.imports.organize": true,
  //     "source.fixAll": true
  //   }
  // },
  // "[javascript]": {
  //   "editor.codeActionsOnSave": {
  //     "editor.action.organizeImports": true,
  //     "typescriptHero.imports.organize": true,
  //     "source.fixAll": true
  //   }
  // },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

  // Make goto actions open tab instead of mini editor
  "editor.gotoLocation.multipleDeclarations": "goto",
  "editor.gotoLocation.multipleImplementations": "goto",
  "editor.gotoLocation.multipleReferences": "goto",
  "editor.gotoLocation.multipleTypeDefinitions": "goto",
  "editor.gotoLocation.multipleDefinitions": "goto",
  "editor.gotoLocation.alternativeDeclarationCommand": "editor.action.goToImplementation",
  "editor.gotoLocation.alternativeDefinitionCommand": "editor.action.goToImplementation",
  "editor.gotoLocation.alternativeImplementationCommand": "editor.action.goToImplementation",
  "editor.gotoLocation.alternativeReferenceCommand": "editor.action.goToImplementation",
  "editor.gotoLocation.alternativeTypeDefinitionCommand": "editor.action.goToImplementation",

  "workbench.editor.labelFormat": "short",
  "editor.renderWhitespace": "trailing",
  "editor.suggestSelection": "first",

  "zenMode.fullScreen": false,
  "zenMode.centerLayout": false,
  "editor.accessibilitySupport": "off",
  "explorer.confirmDelete": false,
  "rpc.detailsEditing": "{problems}",
  "rpc.detailsViewing": "{problems}",
  "rpc.lowerDetailsDebugging": "Debugging {file_name}",
  "rpc.detailsIdling": "{empty}",
  "rpc.lowerDetailsIdling": "{empty}",
  "rpc.problemsText": "{problemsCount} problems found",
  "rpc.checkIdle": false,
  "rpc.appName": "Visual Studio Code",
  "rpc.removeElapsedTime": true,
  "rpc.removeDetails": true,
  "rpc.lowerDetailsEditing": "Working on {file_name}",
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  }
}

typescriptreact.json

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // },
  "React function component with type and props": {
    "prefix": ["react:default"],
    "body": [
      "import React from 'react';",
      "",
      "type ${0:ComponentName}Props = {};",
      "",
      "const ${0:ComponentName}: React.FC<${0:ComponentName}Props> = ({}) => (",
      "  <div>",
      "    <span></span>",
      "  </div>",
      ");",
      "",
      "export default ${0:ComponentName};",
      ""
    ],
    "description": "A react default component."
  },
  "React function component with type, props and return": {
    "prefix": ["react:defaultReturn"],
    "body": [
      "import React from 'react';",
      "",
      "type ${0:ComponentName}Props = {};",
      "",
      "const ${0:ComponentName}: React.FC<${0:ComponentName}Props> = ({}) => {",
      "  return (",
      "    <div>",
      "      <span></span>",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${0:ComponentName};",
      ""
    ],
    "description": "A react default component."
  },
  "Next js SSG staticProps": {
    "prefix": ["next:staticProps"],
    "body": [
      "import React from 'react';",
      "import { InferGetStaticPropsType, NextPage, GetStaticPaths, GetStaticProps } from 'next';",
      "",
      "type ${0:ComponentName}GetStaticProps = {",
      "  // Params",
      "};",
      "",
      "type ${0:ComponentName}Props = InferGetStaticPropsType<typeof getStaticProps>;",
      "",
      "const ${0:ComponentName}: NextPage<${0:ComponentName}Props> = ({}) => {",
      "  return <${0:ComponentName}Template />;",
      "};",
      "",
      "export const getStaticPaths: GetStaticPaths = async () => {",
      "  return {",
      "    paths: [],",
      "    fallback: true",
      "  };",
      "};",
      "",
      "export const getStaticProps: GetStaticProps<${0:ComponentName}GetStaticProps> = async ({ params }) => {",
      "  const props: ${0:ComponentName}GetStaticProps = { ...params };",
      "",
      "  return {",
      "    props,",
      "    // we will attempt to re-generate the page:",
      "    // - when a request comes in",
      "    // - at most once every X seconds",
      "    revalidate: REVALIDATE_SECONDS",
      "  };",
      "};",
      "",
      "export default ${0:ComponentName};",
      ""
    ],
    "description": "Makes a next component that uses getStaticProps"
  },
  "Next js SSG serverProps": {
    "prefix": ["next:serverProps"],
    "body": [
      "import React from 'react';",
      "import { InferGetServerSidePropsType, NextPage, GetServerSideProps } from 'next';",
      "",
      "type ${0:ComponentName}GetServerProps = {",
      "  // Params",
      "",
      "  // Query",
      "",
      "  // Props",
      "  user?: AuthUser;",
      "",
      "  // Rehydration",
      "",
      "};",
      "",
      "type ${0:ComponentName}Props = InferGetServerSidePropsType<typeof getServerSideProps>;",
      "",
      "const ${0:ComponentName}: NextPage<${0:ComponentName}Props> = ({ user }) => {",
      "  const { accessToken } = useUser({ initialData: user });",
      "  return <${0:ComponentName}Template />;",
      "};",
      "",
      "export const getServerSideProps: GetServerSideProps<${0:ComponentName}GetServerProps> = async (ctx) => {",
      "  // Require the user to be logged in for this page",
      "  const user = await requiredAuth(ctx);",
      "",
      "  // Initialize the props with some default values",
      "  const props: ${0:ComponentName}GetServerProps = {",
      "    ...ctx?.query,",
      "    ...ctx?.params,",
      "    user",
      "  };",
      "",
      "  // If we have the required params for this page",
      "  if (ctx.params && ctx.params.locale /* && make sure to add params check for each param */) {",
      "    try {",
      "      // Run fetch logic",
      "    } catch (err) {",
      "      // Do nothing for now. The client side will get the same error when trying to call the query",
      "      logging.error(err, `Failed to load props for [${0:ComponentName}]`, {",
      "        params: ctx.params,",
      "        query: ctx.query,",
      "        userId: user?.user?.sub",
      "      });",
      "    }",
      "  } else {",
      "    redirect('/404', '/404', ctx.req, ctx.res);",
      "  }",
      "",
      "  return {",
      "    props",
      "  };",
      "};",
      "",
      "export default ${0:ComponentName};",
      ""
    ],
    "description": "Makes a next component that uses getServerSideProps"
  },
  "useState snippet": {
    "prefix": "react:useState",
    "body": "const [${1}, set${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}] = useState(${2:default${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}});",
    "description": "use state but it camel cases"
  },
}