VS Code

Debugger

• 📺 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 • Debugging is a core feature of Visual Studio Code. Learn how to configure and use the Node.js debugger in this introductory video • VS Code Docs 📚
• 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.”
  • how to avoid conflicting with Vim keybindings? (e.g. I’ve been using H and L to replace 0 and $…)
• Debugging in Visual Studio Code • Visual Studio Code docs 📚
• Setting up vs code debugger with an app running via docker compose up
  • add a docker-compose.debug.yaml (and inherit that file in the main docker-compose.yaml)
  • run a command in that file to launch debugger (e.g. debugpy) with the appropriate command
  • create a tasks.json to use the “Run Task” vs code command
  • update launch.json
  • e.g. see this “toothpick” PR
  • VS Code docs:
    • Use Docker Compose to work with multiple containers • Visual Studio Code docs 📚
    • Debug an app running in a Docker container • Visual Studio Code docs 📚
    • django - VScode debugger with docker-compose - Stack Overflow • StackOverflow 💬

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

Settings

• 📺 VS Code 🔥 Tips and Tricks • 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
• I’m enjoying hiding numbers by default!
• My VSCode setup for 2023 • Armno Prommarak 📖
• Settings Sync in Visual Studio Code - offers a way to set device-specific settings if using the built in settings sync (instead of git)
• AutoSave with VSCode • love auto save

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

Searching in VS Code

• Search view:
  • shift-enter in the search input to include multiple lines in a search or replacement text
  • $0 to insert the entire regex search pattern match in the replacement text
  • $1, $2 etc to insert individual regex search pattern capture group matches in the replacement text (where capture groups are made by wrapping parts of the regex pattern with ())
  • \l$1, \L$1, \u$1, \U$1 to lowercase or uppercase the first/all characters of the first capture group in the replacement text
• Search editor:
  • nicer size, syntax colouring and customizable context around each result
  • can save searches as a file (e.g. save a todo.code-search file to help the team easily find them all)
  • currently, no native support for saving replacements and an extension is required
  • how to remove individual results (before replacing on the rest)?
• Links:
  • Workspace Search in VS Code — A deep dive on find in files, replace, search editors and more! • Code 2020 📺
  • Find and replace with a newline in Visual Studio Code • Stack Overflow 💬
  • VS Code tips — The Search Editor Apply Changes extension

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 📺

Writing import statements automatically

• only TS/JS? python too?
• Vs code feature or eslint feature?
• So convenient!
• Don’t write imports
• Write your code and let VS Code tell you when you’ve referenced something that needs to be imported
• Use cmd-. to open the code actions menu and choose the option that offers to automatically add your missing import for you
• One gotcha: similarly-named imports can get confused
  • I’ve encountered the same category of bug twice recently:
  • An error seems really weird and tough to debug
  • Turns out it’s caused by a file importing the wrong version of something that’s exported twice in the project under the same name
  • Happens while allowing VS Code to automatically import for me
  • Super convenient in general, but sometimes VS Code may guess incorrectly
  • What to do?
    • When debugging, check the imports in the related files to make sure everything is coming from the right place
    • As a preventative measure, avoid reusing the same export name twice in the same project

Dev Containers

• Getting Started with Dev Containers in VS Code • 7 min overview of adding a dev container to a python project that ensures all the necessary dependencies and extensions for running the project locally are set up automatically • VS Code 📺
• Working with Multiple Dev Containers in VS Code • 10 min demonstration of how to add as many different dev containers to a single project as you need (e.g. if the repo includes frontend and backend folders that use different tech stacks) • VS Code 📺
• Inbox:
  • Dev Containers - Visual Studio Marketplace - try out?

Testing

• Playing Your Tests Wright with VS Code • Running and debugging Playwright tests in VS Code • Visual Studio Code 📺

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 📖

• Make VS Code Awesome • Caleb Porzio 👩‍🎓

• SYNG – Semantic Search for JavaScript - code search tool that’s an alternative to searching by text patterns (search by semantics instead); includes a vs code plugin, playground and docs