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"
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
      "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”