Top 5 VS Code extensions for Shopify development

The right VS Code extensions can dramatically reduce the cognitive overhead of Shopify development. Between Liquid's unconventional whitespace-control syntax, GraphQL fragments that span multiple files, and TOML extension configurations, you're juggling several languages simultaneously. The extensions in this list were chosen based on three criteria: how much they reduce mistakes (type errors caught before deploy, schema validation in-editor), how much they improve iteration speed (autocomplete, hover docs, inline previews), and how actively maintained they are as of early 2026. Low-install-count but niche tools like Polaris icon lookups were excluded in favor of tools with broad daily utility.

1. #1Shopify Liquid (Shopify.theme-check-vscode)

   Shopify's official Liquid extension for VS Code brings Theme Check — the static analysis tool that also runs in CI via shopify theme check — directly into the editor. It catches hundreds of common Liquid mistakes in real time: undefined variables, missing translation keys, deprecated filters, incorrect handle usage in {% schema %} blocks, and accessibility violations in HTML generated by Liquid tags. The extension also provides autocomplete for Liquid objects (product. → title, handle, variants, etc.) and hover documentation for every Liquid filter and tag.

   As of the Online Store 2.0 era, the extension also understands JSON section schemas and validates setting IDs referenced in Liquid against the schema block. This eliminates an entire class of theme bugs where a setting key is renamed in the schema but not updated in the template. The extension requires Language Server Protocol support (standard in VS Code) and connects to the Theme Check language server shipped with @shopify/theme-check-node.

   If you maintain a .theme-check.yml config file in your repo, the extension picks it up automatically — you can disable individual rules, set severity levels, and exclude directories. This matters for generated files (e.g., compiled Tailwind output snippets) that you want to ignore in CI but don't want cluttering the editor with false positives.

2. #2GraphQL: Language Feature Support (GraphQL.vscode-graphql)

   Shopify app development is deeply GraphQL-oriented — the Admin API, Storefront API, and Customer Account API all expose only GraphQL endpoints. This extension adds syntax highlighting, autocomplete, go-to-definition, hover documentation, and inline error highlighting for .graphql files and gql`...` template literals in TypeScript files.

   To get autocomplete against Shopify's actual schema, add a graphql.config.yml at your project root pointing to the downloaded Admin API schema (which shopify app generate outputs to extensions/*/generated/api.ts for Function types) or by introspecting against the live API. Hover over any field name and get the type, description, and deprecation warning directly in the editor — no context-switching to the Shopify docs.

   Pair this extension with graphql-codegen (or Hydrogen's built-in codegen) for a fully typed GraphQL workflow: you write a query, the extension validates it against the schema in real time, and codegen generates the TypeScript types for the response shape. Any schema change that breaks your query surfaces as a red underline before you ever run the app.

3. #3Prettier (esbenp.prettier-vscode)

   Prettier might seem like an obvious inclusion, but it earns its place here specifically because Shopify app development spans an unusually wide mix of file types in a single repo: TypeScript, TSX, GraphQL, JSON (metaobject definitions, app config), TOML (extension config), and often CSS or Tailwind utility classes. Prettier handles all of them consistently, and with the @shopify/prettier-plugin-liquid plugin, it also formats Liquid — respecting {{- whitespace trimming and properly indenting {% if %} blocks and embedded {% schema %} JSON.

   Configure "editor.formatOnSave": true and "editor.defaultFormatter": "esbenp.prettier-vscode" in your workspace settings. Add a .prettierrc that includes "plugins": ["@shopify/prettier-plugin-liquid"] to enable Liquid formatting globally. This keeps your theme files clean alongside the rest of your codebase.

   One practical Shopify-specific tip: commit a shared .vscode/settings.json with the Prettier settings so the whole team formats consistently. Inconsistent formatting in TOML files — especially extension configs — has caused confusing git diffs in multi-developer Shopify app projects.

4. #4Even Better TOML (tamasfe.even-better-toml)

   Shopify CLI 3.x uses TOML for two critical configuration files: shopify.app.toml (app-level config including OAuth scopes, webhook topics, and app metadata) and shopify.extension.toml (per-extension config declaring type, targets, capabilities, and metafield definitions for extension-owned metafields). Even Better TOML provides syntax highlighting, schema-based autocomplete (via JSON Schema), and inline error highlighting for malformed TOML.

   The real value-add is TOML schema validation. Shopify publishes JSON Schema definitions for their TOML files, and you can wire them up in your .vscode/settings.json under evenBetterToml.schema.associations. With the schema active you get autocomplete for extension type values, capability keys, and [[extensions.metafields]] sub-table shapes, plus red squiggles under unrecognised keys before you even try to deploy.

   A secondary benefit: TOML files are now much more readable with proper syntax highlighting. Without syntax highlighting, shopify.app.toml files render as plain text, making it easy to miss a misplaced [[double bracket]] array-of-tables header versus a [single bracket] table header — a difference that completely changes parsing behaviour.

5. #5Error Lens (usernamehw.errorlens)

   Error Lens is technically language-agnostic, but it earns the fifth spot because it transforms how you work with the language-server diagnostics produced by all the other extensions on this list. Without Error Lens, lint errors from Theme Check, type errors from TypeScript, and GraphQL schema violations appear only as squiggly underlines — you have to hover over each one or open the Problems panel. With Error Lens, the error message appears inline at the end of the offending line, in full, as you type.

   In a Shopify context this is particularly useful in TOML files where Theme Check reports specific rule violations with message text like "Use the 'content_for_header' filter instead of hardcoding script tags". With Error Lens you see the rule name and fix suggestion immediately, without any mouse interaction. Similarly, TypeScript errors from generated GraphQL types — often verbose — are far more actionable when you can read them in-context next to the exact line that's wrong.

   Error Lens is configurable: you can set which severity levels appear inline (e.g., show errors and warnings but not hints), control the font style and opacity of the ghost text, and delay rendering until typing stops to avoid flicker. Keep errorLens.delay at around 300–500ms — zero delay feels intrusive when editing Liquid templates where the parser produces spurious errors mid-tag.

These five extensions work best as a set — the Shopify Liquid extension catches Liquid-specific issues, GraphQL catches API query mistakes, Prettier enforces formatting consistency, Even Better TOML validates config files, and Error Lens surfaces all of their diagnostics without friction. Install them all and commit a shared .vscode/extensions.json to your repo so new team members get a recommendation prompt the first time they open the project.