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
• Tailwind
  • Tailwind CSS IntelliSense
• 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" // 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
    },
    "[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"
    ],
    "tailwindCSS.experimental.classRegex": [
        "class:\\s*['\"`]([^'\"`]*)['\"`]",
        "class\\s*=\\s*['\"`]([^'\"`]*)['\"`]",
        ":class\\s*=>\\s*['\"`]([^'\"`]*)['\"`]",
        "class_names\$begin:math:text$\(\[\^\)\]\*\)\\$end:math:text$"
    ],
    "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”