This document lists recommended VS Code extensions for Daniel's TypeScript-based web development stack. Each extension includes a link and a brief explanation of why it is included.
- For AI assistants: When setting up a new project, add the listed extensions to the
recommendationsarray in.vscode/extensions.json(or the devcontainer customizations if using a devcontainer). - For developers: Install these extensions from the VS Code Marketplace for the best experience with this stack.
- Prettier - Code formatter — Ensures consistent code formatting across the team and integrates with format-on-save.
- ESLint — Integrates ESLint for real-time linting and code quality feedback in JavaScript and TypeScript projects.
- EditorConfig for VS Code — Enforces consistent coding styles between different editors and IDEs using .editorconfig files.
- Git Graph — Visualizes your Git repository history as a graph, helping you understand branching and commit history at a glance.
- Git Stash — Provides a visual interface for Git stashes, making it easier to manage, review, and apply stashed changes.
- Tailwind CSS IntelliSense — Adds Tailwind CSS IntelliSense, including autocomplete, syntax highlighting, and linting for Tailwind classes.
- npm-import-package-version — Displays the installed version of npm packages inline in your import statements, reducing context switching.
- npm Dependency Links — Adds clickable links to npm package pages directly from your package.json dependencies for quick reference.
- NPM Scripts — Adds NPM scripts explorer and task integration, making it easier to run and manage project scripts directly from VS Code.
- Code Spell Checker — Provides in-editor spell checking for source code, comments, and documentation, helping catch typos and improve code quality.
- Rainbow CSV — Highlights CSV and TSV files, and allows running SQL-like queries on tabular data, making it easier to inspect and manipulate data files in your projects.
- Insert Unicode — Lets you search for and insert Unicode characters directly into your documents, useful for symbols and special characters.
- File Nesting Updater — Automatically updates Anthony Fu's file nesting config for improved file organization in the VS Code explorer.
- Package Json Upgrade — Shows available updates in package.json files, offers quick fixes to update dependencies, and displays changelogs for easy package maintenance.
- Copy Relative Path — Adds a "Copy Relative Path" that should've been included in VSCode by default.
These extensions are recommended for specific workflows or environments:
- GitHub Pull Requests — Recommended if your repository is hosted on GitHub. Enables pull request management, code reviews, and issue tracking directly within VS Code.
- Atlassian: Jira & Bitbucket — Recommended if your project uses Jira for issue tracking or Bitbucket for source control. Integrates Jira issues and Bitbucket pull requests into your workflow.
- Astro — Recommended for Astro projects. Provides language support, syntax highlighting, and tooling for Astro static site development.
Only add these to your recommended extensions if your project uses the corresponding services or frameworks.
To update the recommended extensions, edit this file and update .vscode/extensions.json accordingly.