Recommended VS Code Extensions

This article covers recommended VS Code extensions that enhance your development workflow. While some projects have specific requirements (e.g., Asciidoctor for documentation), these extensions are generally useful across all FoodTruckNerdz and internal projects.

This article may be out of date. Extension preferences (e.g., dprint vs Prettier, formatter defaults) change as the templates and workspace configs evolve. To confirm the current canonical list, inspect the source of truth:

  • Templates repo — workspaces/_common/common.code-workspace (extensions and defaultFormatter settings): github.com/dev-centr/templates

  • Local path (if cloned): Z:\code\github.com\dev-centr\templates\workspaces\_common\common.code-workspace

Compare the extensions.recommendations and settings["editor.defaultFormatter"] (or language overrides) in that file with this page.

Standard Recommendations

These recommendations are gathered from global templates and project workspaces.

Git & Collaboration

  • github.vscode-pull-request-github — GitHub Pull Requests and Issues. Lets you review and manage GitHub PRs and issues directly from VS Code.

  • eamodio.gitlens — GitLens — Git supercharged. Provides powerful visualization of git history, blame annotations, and more.

  • mhutchie.git-graph — Git Graph. View a Git Graph of your repository, and easily perform Git actions from the graph.

Formatting & Linting

  • dprint.dprint — dprint. Fast, pluggable formatter (default for most languages in our templates).

  • biomejs.biome — Biome. Fast toolchain for web projects (linting; may format where configured).

Documentation

  • bierner.markdown-mermaid — Markdown Preview Mermaid Support. Adds Mermaid diagram support to VS Code’s built-in markdown preview.

  • bpruitt-goddard.mermaid-markdown-syntax-highlighting — Mermaid Markdown Syntax Highlighting. Provides syntax highlighting for Mermaid diagrams in markdown files.

Support for Languages & Frameworks

  • redhat.vscode-yaml — YAML. provides comprehensive YAML language support.

  • rust-lang.rust-analyzer — rust-analyzer. A fast and feature-complete Rust language support extension.

  • tamasfe.even-better-toml — Even Better TOML. Fully-featured TOML support.

  • bradlc.vscode-tailwindcss — Tailwind CSS IntelliSense. Autocomplete and syntax highlighting for Tailwind CSS.

Utilities

  • henoc.svgeditor — SVG Editor. A simple editor for SVG files.

Conflict Analysis & Performance

When using multiple extensions, especially those that provide similar functionality, you may encounter performance degradation or conflicting behavior.

Git Extensions

The following extensions have overlapping features: * eamodio.gitlens * mhutchie.git-graph * github.vscode-pull-request-github

Potential Conflicts: - UI Clutter: Multiple blame annotations or history views. - Performance: GitLens is a heavy extension. If you experience lag in large repositories, consider disabling "Current Line Blame" or other real-time features.

Formatters and Linters

Conflicts often arise between dprint, Biome, and Prettier.

Current setup (templates): - dprint.dprint is the default formatter for most languages (JS, TS, JSON, YAML, Markdown, AsciiDoc via plugin, etc.). - biomejs.biome is used for linting and may format in projects that opt in.

Resolution: The .code-workspace files in the templates repo are configured so dprint wins for most file types:

"editor.defaultFormatter": "dprint.dprint",
"[json]": { "editor.defaultFormatter": "dprint.dprint" },
"[typescript]": { "editor.defaultFormatter": "dprint.dprint" }

Avoid installing conflicting global formatters (e.g. Prettier) that override these project-specific settings. See the templates common.code-workspace for the canonical configuration.

Markdown Tools

bierner.markdown-mermaid and bpruitt-goddard.mermaid-markdown-syntax-highlighting work together: one provides the preview, the other provides the editor syntax highlighting. There are no known performance issues with using both.