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.

Open command palette
Preferences: Configure User Snippets
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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!