VS Code Extensions and Browser plugins

[coryhouse]

Browser plugins

https://www.locatorjs.com/ React dev tools

VS Code extensions

Sapling ESLint GitHub Copilot Playwright Test for VSCode Prettier Tailwind CSS intellisense Version Lens Vitest

My typical extensions.json:

{
  "recommendations": ["yoavbls.pretty-ts-errors", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "streetsidesoftware.code-spell-checker", "GitHub.vscode-pull-request-github", "ms-playwright.playwright", "pflannery.vscode-versionlens", "ZixuanChen.vitest-explorer"]
}

PR template

Configure VSCode to prompt developers to install the following recommended extensions. Of course, I imagine your dev team has other extensions they enjoy, but this is a good start.

• Pretty TS Errors - Displays TypeScript errors in a more readable manner
• ESLint - Display ESLint warnings and errors inline in the editor
• Prettier - Suggest configuring this to run on save so files are automatically formatted on save. See the extension docs for details on how.
• Code Spell Checker - Mark spelling errors in code, comments, and plain text. (I have a separate PR that will run the spell checker on CI, so this is a nice compliment)
• GitHub Pull Request and Issues - Super handy for doing code reviews and issues in VS Code.
• Version Lens - See outdated packages in package.json and upgrade them via a single click.