VS Code Setup.md

VS Code Setup

Hey hey! 😃 VS Code is an amazing editor. We'll be using it for this entire course.

Here you'll find my VS Code Settings, extensions, fonts, and favorite keyboard shortcuts.

All of this is meant to make us the most efficient and fast developers possible.

Settings

• Auto save after delay
• Auto format on save. Let Prettier handle formatting for us.
• Cursor smooth caret animation on. A cool little effect
• Line height greater than 2
• Hide activity bar
• Hide status bar

Extensions

• Peacock: To change the color of our editor
• ESLint: To help find errors and fix them
• JavaScript (ES6) code snippets: Snippets to speed up writing code (clg for console.log is the best)
• Path Intellisense: Easy way to import from other files
• Prettier: Auto format. Let the humans write code. Let the computer format.
• Simple React Snippets: Small snippets for React (imd is a good one)
• Turbo Console Log: Make console.logging even faster

My Custom Snippet for React Functional Components

Here's my custom snippet that I use. You'll see me type rfc to create a React component.

1. Open command palette
2. Preferences: Configure User Snippets
3. Add these two objects to the file

"React Functional Component": {
  "scope": "javascript,typescript",
  "prefix": "rfc",
  "body": [
    "import React from 'react';\n",
    "export default function ${1:name}(${2:props}) {",
    "\t${3:your stuffs}",
    "}"
  ]
},
"Export Default Function": {
  "scope": "javascript,typescript",
  "prefix": "exdf",
  "body": [
    "export default function ${1:name}(${2:props}) {",
    "\t${3:your stuffs}",
    "}"
  ]
}

Themes

• Material Icon Theme
• Monokai Pro

Fonts

• Cascadia Code (Free): My current daily font
• Dank Mono (Paid)
• Operator Mono (Paid)
• Fira Code (Free)
• Inconsolata (Free)

Keyboard Shortcuts

• Show command palette: cmd shift p
• Show and hide sidebar: cmd b
• Show explorer: cmd shift e
• Show terminal: ctrl `
• Multiple cursors