VS Code

Debugging

• 📺 Build and Debug NodeJS Typescript with ONLY VSCODE • 4 minute video by Basarat Ali showing how to set up a TS build task and use the Node debugger
• 📺 Debugging a Web application with VSCode • 3 minute video by Basarat Ali showing how use the Chrome debugger in VS Code to debug a React app
• Introduction to Debugging in Visual Studio Code • VS Code Docs 📚

  Debugging is a core feature of Visual Studio Code. Learn how to configure and use the Node.js debugger in this introductory video. 📺

Extensions

• List all of the ones I use?
• 📺 Getting started with ESLint (and setting up VSCode) • 4 minute video by Basarat Ali showing how to quickly install and configure eslint in a React project and enhance it with the ESLint extension in VS Code

Keyboard shortcuts

• 📺 Top 10 VS Code Keyboard Shortcuts for Maximizing Productivity • 8 minute video by Suboptimal Engineer showing how to navigate the editor panes and your project files using keyboard shortcuts

Preferences

• 📺 VS Code 🔥 Tips and Tricks - YouTube • 15 minute video by Sana Ajani and Brian Clark showing how to customize VS Code’s interface and GitHub integration
• 📺 VS Code Tips and Tricks • 27 minute video by Sana Ajani with more suggestions for how to improve VS Code’s preferences and GitHub integration
• Themes:
  • I keep coming back to Dracula and Gruvbox Dark Medium
    • The former is the prettiest to me, while the latter is the most readable (e.g. emoji colours stand out since the gray/brown bg colour is more neutral than Dracula’s purple/blue one)
  • Maybe Gruvbox for me and Dracula for screen sharing?
• I’m enjoying hiding numbers by default!
• My VSCode setup for 2023 • Armno Prommarak 📖

Using TailwindCSS

• 📺 My VS Code + Tailwind CSS Workflow Tips (Shortcuts and Extensions) • 23 minute video by Sam Selikoff showing how to use Vim, Emmet, code folding, multiselect, keyboard shortcuts, and the TailwindCSS Intellisense extension to quickly edit markup that includes TailwindCSS classes

Finding

• Find and replace with a newline in Visual Studio Code - Stack Overflow

Remote development with SSH

• Working over SSH with Visual Studio Code • VS Code Docs 📚
• Connect over SSH with Visual Studio Code • VS Code Docs 📚
• Developing on Remote Machines using SSH and Visual Studio Code • VS Code Docs 📚
• Visual Studio Code Remote SSH Tips and Tricks • VS Code Blog 📖
• Visual Studio Code Remote Development Troubleshooting Tips and Tricks • VS Code Docs 📚
• Using Visual Studio Code for Remote Development • Digital Ocean 📺

Inbox

• Open all files with lint issues in VS Code • Wes Bos 📺
• My favourite Visual Studio Code tips for “how did you do it” kind of people • Pawel Grzybek 📖
• VSCode with embedded Neovim - YouTube • chris@machine 📺
  • Apparently includes which key
  • Curious to see if embedded neovim is actually nicer than the VSCodeVim plugin…
• THE BEST VIM CONFIG FOR VSCODE | configure vscode like vim • Joaquin Varela 📺
  • Settings.json: https://gist.github.com/JoakoV3/2588968e550e71b715edfeb37734c56b
  • Keybindings.json: https://gist.github.com/JoakoV3/3991f34652c508d7ff8ea798f7f9ecc0
• VSCodeVim extension:
  • “VSCodeVim is able to use a native executable of Neovim through “vim.enableNeovim”: true. https://github.com/VSCodeVim/Vim/issues/1735
• VSCode Neovim extension:
  • vscode-neovim • Vim-mode for VS Code using embedded Neovim. 🛠️
  • try it out (may be faster; may be easier to configure key maps for)
  • at the very least, get inspiration from their default keymaps
• My VS Code Setup • Caleb Porzio 📖
  • better terminal toggling shortcut (that removes having to toggle 3x in a row to open the terminal) looks worth trying
• Make VS Code Awesome • Caleb Porzio 👩‍🎓
• Great idea for debugging keymaps: “About debug-mode: I use H,J,K,L (i.e. shift + h,j,k,l) for stepping in/out/over etc. But these bindings are only active when the debugger is running. It’s super convenient to step through code like that.”