From
scotch.io
Email Address
chris@scotch.io
Sent On
Fri, Jul 17, 2020 08:26 AM
Email Preheader Text
Hey! Chris on Code here. Yesterday I launched a new React course. There's only 40 spots left to get
HTML
[View in browser](
Hey! Chris on Code here. Yesterday I launched a new React course. There's only 40 spots left to get the [launch price of $47]( (20% off).
I wanted to talk about VS Code and React in this email. Here's my setup and a video from the course.
â¶ï¸ Watch: [My VS Code Setup for React](
Here's my favorite VS Code Settings, extensions, fonts, and favorite keyboard shortcuts.
Favorite 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
Favorite Extensions
- [Unlink](
- [JavaScript (ES6) code snippets](
- [Path Intellisense](
- [Kite Autocompletion](
- [Import Cost](
- [Prettier](
- [npm](
- [Project Manager](
- [Simple React Snippets](
- [Turbo Console Log](
- [Peacock](
- [Better Comments](
- [Bracket Pair Colorizer 2](
- [Color Highlight](
- [Highlight Matching Tag](
Theme and Font
- Theme: Monokai.Pro
- Icon Theme: Material Icon Theme
- Font: Cascadia Code
My Custom Snippet for 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}", "}" ] }
Build these 10 React Apps
[View the Course](
01. Pomodoro - âï¸ [Demo]( - â¶ï¸ [Preview](
02. Markdown Editor - âï¸ [Demo]( - â¶ï¸ [Preview](
03. Highlight Tabs - âï¸ [Demo]( - â¶ï¸ [Preview](
04. Paper Rock Scissors - âï¸ [Demo]( - â¶ï¸ [Preview](
05. Moving Link on