Configure VS Code

NOTE

This guide assumes you have already installed VS Code (Visual Studio Code).

VS Code Extensions

Essential (IntelliSense, Linting, Formatting)

Vue (Official), the Vue language features
EditorConfig
the extension of the linter and formatter your project uses, one of:
- Oxc, for projects on oxlint + oxfmt (the pick Quasar CLI recommends when scaffolding)
- ESLint and Prettier, for projects on ESLint + Prettier

Quasar CLI (with Vite)

If you created your project with Quasar CLI, you already have the recommended VS Code configuration: .vscode/settings.json and .vscode/extensions.json are scaffolded for the linter and formatter you picked (oxlint + oxfmt, or ESLint + Prettier), and .vscode/mcp.json registers the Quasar MCP server for VS Code’s AI agents.

When you open your project in VS Code, it prompts you to install the recommended extensions if you haven’t installed them already. Just restart VS Code after installing them and you are ready to go!

Quasar Vite Plugin

Depending on which features/presets you are using, add the related options to .vscode/settings.json. These are the settings a Quasar CLI project ships with.

Common Configuration

Bracket pair guides, and the generated folders kept out of search results (.quasar and the temporary config file are written by Quasar CLI; drop them if you use the Vite plugin only):

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,

  "search.exclude": {
    "dist/": true,
    ".quasar/": true,
    "/quasar.config.js.temporary.*": true
  }
}

oxlint + oxfmt

Formatting on save through oxfmt, and the lint fixes oxlint can apply on their own:

{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.oxc": "always"
  },
  "oxc.fmt.configPath": ".oxfmtrc.json"
}

With TypeScript configuration files, point at them instead:

{
  "oxc.configPath": "oxlint.config.ts",
  "oxc.fmt.configPath": "oxfmt.config.ts"
}

ESLint + Prettier

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
}

Without Prettier, let ESLint format too:

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}

TypeScript

Use the project’s own TypeScript, the one the build uses, rather than the version bundled with VS Code:

{
  "js/ts.tsdk.path": "node_modules/typescript/lib"
}

AI agents

VS Code’s own agents (GitHub Copilot in agent mode, and any extension speaking MCP) get the Quasar documentation and API of the exact versions your project runs through the @quasar/mcp server. Register it in .vscode/mcp.json (a project scaffolded with Quasar CLI already has this file); nothing gets installed in the project:

{
  "servers": {
    "quasar": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "--fetch-retries=0", "@quasar/mcp@latest"]
    }
  }
}

In a monorepo the server serves the first Quasar app it finds below the workspace root; to pick one, add "--project", "${workspaceFolder}/apps/web" to the arguments. The AI Agents page covers the other clients, what the agent gets, and how updates are handled.