VS Code

  • 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
  • JavaScript
    • ESLint
    • Jest Snippets
    • Prettier
  • MDX (Docusaurus)
    • VSCode MDX
  • React
    • React Native Snippet
    • Simple React Snippets
  • Ruby
    • Ruby LSP
    • Standard Ruby
  • TypeScript
    • Prettify TypeScript: Better Type Previews
    • Pretty TypeScript Errors

Settings

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

    "editor.fontFamily": "Dank Mono",
    "editor.fontLigatures": true,
    "editor.fontSize": 16,
    "editor.formatOnSave": true,
    "editor.minimap.enabled": false,
    "editor.stickyScroll.enabled": true,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",

    // turn off unwanted emmet extension
    "emmet.showExpandedAbbreviation": "never",

    "eslint.validate": [
        "javascript",
        "javascriptreact"
    ],

    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,

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

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

    "prettier.requireConfig": true,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[ruby]": {
      "editor.defaultFormatter": "testdouble.vscode-standard-ruby",
    },
    "rubyLsp.enabledFeatures": {
      "diagnostics": false
    },
    "telemetry.telemetryLevel": "off",
    "terminal.integrated.fontSize": 16,
    "workbench.colorTheme": "Oceanic Next Italic",
    "workbench.startupEditor": "none",

    // 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"
}

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”