VS Code Extensions

Essential (IntelliSense, Linting, Formatting)

• Vue Language Features (Volar)
• ESLint
• Prettier
• EditorConfig

Recommended

• TODO Highlight
• GitLens — Git supercharged
• Import Cost
• VS Code Icons
• Quasar Docs
• Common Intellisense

Quasar CLI

If you created your project with Quasar CLI, you already have the recommended VS Code configuration. 💪

When you open your project on VS Code, it will prompt you to install our recommended extensions if you haven’t installed them already. Just restart VS Code after installing them and you are ready to go! 🚀

Vite & Vue CLI & UMD

Depending on which features/presets you are using, you can add the related options to .vscode/settings.json.

Common Configuration

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

ESLint

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

Without Prettier

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

With Prettier

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

TypeScript

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

Debugging a Quasar project in VS Code

The best approach is to open that in a browser beside this page so you can review these instructions as you are reading those instructions. And apply the changes to your project as you go.

The first step to properly start debugging is enabling source maps. Quasar automatically enables source maps for development mode. Here is a good article that describes the different values for the Webpack’s devtool setting(the one that controls the source maps). Quasar uses eval-cheap-module-source-map by default.

eval-cheap-module-source-map builds slow(not the slowest), rebuilds fast(not the fastest), and preserves the original lines(not the best quality). If you want faster builds while giving up on some accuracy, or more accuracy while giving up on speed, you can choose other values. The slowest but the most accurate(the original) value of the devtool is source-map. This makes debugging in VS Code work properly due to your full Vue source files being available in the built-in Chrome debugger. So, it will be easier to find your original source and locate the line that you want to set the breakpoint to. If you want to enable this, you need to update quasar.config file > build > devtool like this:

build: {
  // ...

  // this is a configuration passed on to the underlying Webpack.
  // No need to set this if you are using vite.
  devtool: 'source-map'
}

Then you need to tell VSCode to add a configuration to the debugger. The easiest way to do that is to click on the bug icon on the action bar (for ltr languages, that is the bar on the far left). Once you click on that bug icon, the file tree area will switch to the debug and run area. Click on the gear icon in the title bar of that window and it will bring up a file called launch.json. This is where you put the different configurations of launching the application to be debugged. Here are the settings for launching a Quasar app in Chrome. For the Firefox version, you can check out Vue Cookbook(for Vue 2, might be outdated).

In the example below, replace package-name with the name property from your package.json file:

{
  "type": "chrome",
  "request": "launch",
  "name": "Quasar App: chrome",
  "url": "http://localhost:8080",
  // To properly reflect changes after HMR with Vite
  "enableContentValidation": false,
  "webRoot": "${workspaceFolder}/src",
  // No need to configure sourcemap explicitly for vite.
  "sourceMapPathOverrides": {
    "webpack://package-name/./src/*": "${webRoot}/*"
  }
}

Now save the file, then select that configuration in the dropdown on the title bar of the debug and run pane. Before you can launch the debugger, the app must be running. Start the development server by running quasar dev. Then click the green “Start Debugging” button in the “Run and Debug” pane(or press F5) to launch the debugging session and attach it to your running app. You can now set breakpoints and control step over/in/out etc., all from VSCode. You can also launch the built-in Chrome debugger and it will stay in sync. This might be useful if you also have the Vue devtools installed (highly recommended).