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 FoodTruckNerds and internal projects.

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

  • esbenp.prettier-vscode — Prettier - Code formatter. Industry-standard opinionated code formatter.

  • biomejs.biome — Biome. A fast toolchain for web projects (formatting, linting, and more).

  • rvest.vs-code-prettier-eslint — Prettier-ESlint. Integrates Prettier formatting with ESLint rules.

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 Biome and Prettier.

Analysis: - biomejs.biome is extremely fast and is the preferred formatter for JSON, JSONC, and .code-workspace files. - esbenp.prettier-vscode is used for most other languages (JS, TS, CSS, etc.).

Resolution: The .code-workspace files in our repositories are configured to handle this automatically:

"[json]": {
  "editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Avoid installing conflicting global formatters that override these project-specific settings.

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.