• Cmd-Shift-P, "Shell Command"

Keyboard Shortcuts

• Cmd-K, Cmd-Zero: fold all code blocks

Disabling Telemetry

It's not complete: https://www.roboleary.net/tools/2022/04/20/vscode-telemetry.html

• "telemetry.telemetryLevel": "off"
• Cmd-Shift-P > "Preferences: Configure Runtime Arguments" > "enable-crash-reporter": false

Extensions

• General
  • Prettify JSON
• Themes
  • Oceanic Next Italic
  • RailsCasts
• Elixir
  • Elixir snippets
  • ElixirLS
  • Phoenix Framework
• JavaScript
  • Oxc
• Ruby
  • Shopify Ruby
• Tailwind
  • Tailwind CSS IntelliSense
• TypeScript
  • Prettify TypeScript: Better Type Previews
  • Pretty TypeScript Errors

Settings

• Cmd-Shift-P, "Settings", JSON

{
    "chat.disableAIFeatures": true,
    "editor.fontFamily": "Dank Mono",
    "editor.fontLigatures": true,
    "editor.fontSize": 16,
    "editor.minimap.enabled": false,
    "editor.stickyScroll.enabled": true,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    // "emmet.showExpandedAbbreviation": "never", // turn off unwanted emmet extension
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,
    "telemetry.telemetryLevel": "off",
    "terminal.integrated.fontSize": 16,
    "terminal.integrated.initialHint": false,
    "window.autoDetectColorScheme": true,
    "workbench.editor.empty.hint": "hidden",
    "workbench.startupEditor": "none"

    // don't prompt about git
    "git.openRepositoryInParentFolders": "never",

    // Disable built-in JS formatter and validation, which conflicted with ESLint and might conflict with Prettier
    "js/ts.format.enabled": false,
    "js/ts.validate.enabled": false,

    "[javascript]": {
      // "editor.defaultFormatter": "esbenp.prettier-vscode" // for running Prettier separately
      // "editor.defaultFormatter": "dbaeumer.vscode-eslint" // for running Prettier through ESlint
      // "editor.defaultFormatter": "oxc.oxc-vscode"
    },
    "[javascriptreact]": {
      // same as above
    },
    "[typescript]": {
      // same as above
    },
    "[typescriptreact]": {
      // same as above
    },

    // turning off "help"; maybe not doing this anymore
    "editor.codeLens": false,
    "editor.parameterHints.enabled": false,
    "editor.quickSuggestions": {
        "other": false,
        "comments": false,
        "strings": false
    },
    // end turning off "help"

// oxlint and oxfmt

  "editor.codeActionsOnSave": {
    "source.fixAll.oxc": "explicit"
  },
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true,
  "eslint.enable": false,
  "prettier.enable": false,

    "[javascript]": {
      "editor.defaultFormatter": "oxc.oxc-vscode"
    },
    "[javascriptreact]": {
      // same as above
    },
    "[typescript]": {
      // same as above
    },
    "[typescriptreact]": {
      // same as above
    },

// eslint and prettier

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "prettier.requireConfig": true,
    "[javascript]": {
      // "editor.defaultFormatter": "esbenp.prettier-vscode" // for running Prettier separately
      // "editor.defaultFormatter": "dbaeumer.vscode-eslint" // for running Prettier through ESlint
    },
    "[javascriptreact]": {
      // same as above
    },
    "[typescript]": {
      // same as above
    },
    "[typescriptreact]": {
      // same as above
    },

    // for projects that use Prettier through ESLint (like with @react-native/eslint-config)
    // put in workspace settings
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "always"
    },

    // for projects that use Prettier separately from ESLint
    "editor.formatOnSave": true,

// ruby

    "[ruby]": {
        "editor.defaultFormatter": "Shopify.ruby-lsp"
    },
    "rubyLsp.enabledFeatures": {
        "codeActions": true,
        "diagnostics": true,
        "formatting": true
    },
    "rubyLsp.formatter": "standard", // NOTE: need to add standard to the gemfile
    "rubyLsp.linters": [
        "standard"
    ],

// tailwind

    "tailwindCSS.experimental.classRegex": [
        "class:\\s*['\"`]([^'\"`]*)['\"`]",
        "class\\s*=\\s*['\"`]([^'\"`]*)['\"`]",
        ":class\\s*=>\\s*['\"`]([^'\"`]*)['\"`]",
        "class_names\$begin:math:text$\(\[\^\)\]\*\)\\$end:math:text$"
    ],

// elixir and phoenix

	"elixirLS.suggestSpecs": false,
	"elixirLS.dialyzerEnabled": true,
	"elixirLS.signatureAfterComplete": false,
	"elixirLS.fetchDeps": false,
	"files.associations": {
		"*.heex": "phoenix-heex"
	},
	"files.exclude": {
		"**/_build": true,
		"**/deps": true,
		"**/.elixir_ls": true
	},
	"[elixir]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "JakeBecker.elixir-ls"
	},
	"[phoenix-heex]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "JakeBecker.elixir-ls"
	},
	"emmet.includeLanguages": {
		"elixir": "html",
		"phoenix-heex": "html"
	},
	"emmet.triggerExpansionOnTab": true
}

Ruby projects .vscode/settings.json:

{
  "window.autoDetectColorScheme": false,
  "workbench.colorTheme": "Spinel",
}

To get auto-imports, add @types/… imports to package.json or to jsconfig.json typeAcquisition.include

Command-click to go to definition file: https://github.com/Microsoft/vscode/issues/16320

• The jsconfig.json option

Snippets

Jest

• desc - a describe call with a block
• it - synchronous test
• ita - asynchronous test (async keyword)

React

May want to type the function name first to get VS Code to import it.

• uef - useEffect call with no deps
• usf - useState call with destructuring

React Native

• rnss - StyleSheet.create block

Terminal

• Move to the right: right-click on terminal title bar and choose "Move Panel Right"