53 | VS Code Hot Tips and Tricks (Part 1)

In this episode, Amy and James share some of their favorite keyboard shortcuts and workflows for using within VS Code.

Sponsors

Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

ZEAL is hiring!

ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit softwareresidency.com/careers

DatoCMS

DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."

For more information, visit datocms.com

Show Notes

• 0:00 Introduction
• 4:02 Quick Rants, Unpopular Opinions, and Parenting Tip
• 6:21 Everything Svelte
• 7:23 VS Code Basics
  • YouTube Vide on Webstorm and VS Code
• 9:37 Working with Text and Navigation
  • Use arrow keys to go up / down a line or left / right character by character
  • (Mac) Option + left / right to go word by word
  • (Mac) Cmd + left / right to go to the beginning/end of a link
  • (Mac) Cmd + top/bottom to go to the top/bottom of the page
  • (Mac) Within Keyboard Settings, you can change your key repeat and delay until repeat
  • (Mac) Cmd + D or (Windows) Ctrl + D, to select an entire word
  • At the end of the word, (Mac) Opt + Backspace to delete the word
  • (Mac) Cmd + D to select a word, then Cmd + D again to select the next instance of that word in your document
  • (Mac) Cursor on a variable name + F2 to rename all instances of that variable within the file
  • Episode 49 - Working within the Terminal
  • (Mac) Opt + up/down - move the file up or down. If you hold down shifts while you do that it, it will duplicate the line
  • If you’re on a line, don’t select anything, and hit (Mac) Cmd + C, it will copy the entire line.
  • If you’re on a line, don’t select anything, and hit (Mac) Cmd + X, it will cut the entire line
  • (Mac) Cmd + Enter to inject a new line after the line you’re in.
  • (Mac) Cmd + Shift + Enter to inject a new line above the current line
  • (Mac) Select a word, then hit Cmd + F, it will pull up the Find search box, with the word you selected pre-populated
  • (Mac) James has set up a custom keyboard shortcut to do the same thing with Cmd + H for replace.
  • To set up a key binding, hit Cmd + Shift + P, type in Keyboard Shortcuts, and VS Code provides you with an interface for customizing your shortcuts
• 18:54 Sponsor: DatoCMS
• 19:48 Customize Editor Look
  • Turn off Mini Map
  • Hide File Preview / Turn off soft opens
  • Breadcrumbs
  • Outline Toggle (within the sidebar)
  • Files currently open (within the sidebar)
  • (Mac) Cmd + B to toggle the sidebar open and closed
  • (Mac) Cmd + Shift + F to show and hide the Terminal
  • Zen Mode
• 25:14 Snippets
  • Snippet Manager - https://code.visualstudio.com/docs/editor/userdefinedsnippets
• 27:11 Opening, Closing, and Saving Files
  • (Mac) Cmd + P to search for a file
  • (Cmd) Cmd + Shift + P to open the Command Palette
  • Advanced New File
  • (Mac) Cmd + Ctrl + right/left/top/bottom arrow to move that window into split-pane view
  • (Mac) Right click on the tab to open the same file in split pane view
• 29:56 Split Pane View
• 32:09 git within VS Code
• 33:49 Integrated Terminal
• 36:11 Debugging within VS Code
  • Amy’s YouTube Video on Debugging
• 37:47 Sponsor: ZEAL
• 38:40 Extensions within VS Code
  • Settings Sync
  • Live Server Extension
  • AdventofJs.com and Adventofcss.com
• 40:40 Themes
• 41:00 vim
  • Vim for VS Code from JS Joe
  • On Twitter @jsjoeio
  • vim.so from Kenneth
• 43:41 Sponsor:  Vercel - http://vercel.com
• 44:49 Grab Bag Questions
• 45:07 Question #1: How do you make VS Code work like PHP Storm, or Web Storm, as far as auto imports and hinting?
  • James on YouTube: Video for comparing VS Code and PHP Storm
• 46:53 Question #2: How do you make VS Code open from the Terminal
  • Add VS Code to your Path
• 48:26 Question / Comment #3: Find and Replace with Regex
  • Crossover episode with Web Dev Weekly
  • Brad’s YouTube Video on working within Regex
  • RegexPal.com
• 50:15 Picks and Plugs
• 50:28 Amy's Pick: Taco Cat Goat Cheese Pizza
• 51:05 Amy's Plug: Everything Svelte
• 51:33 James's Picks and Plugs: Black and Decker Coffee Grinder
• 52:14 James's Plug: Learn Visual Studio Code