--- title: "Editor and Vue DevTools setup in 2026 · vuejs.school" description: "Set up VS Code for Vue with Vue (Official), format on save, ESLint and snippets, then add Vue DevTools 8.2 and check that every piece works." canonical_url: "https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026" meta: "og:description": "Set up VS Code for Vue with Vue (Official), format on save, ESLint and snippets, then add Vue DevTools 8.2 and check that every piece works." "og:image": "https://vuejs.school/_og/d/a_~RWRpdG9yIGFuZCBWdWUgRGV2VG9vbHMgc2V0dXAgaW4gMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Editor%2Band%2BVue%2BDevTools%2Bsetup%2Bin%2B2026%2Cdescription_~U2V0IHVwIFZTIENvZGUgZm9yIFZ1ZSB3aXRoIFZ1ZSAoT2ZmaWNpYWwpLCBmb3JtYXQgb24gc2F2ZSwgRVNMaW50IGFuZCBzbmlwcGV0cywgdGhlbiBhZGQgVnVlIERldlRvb2xzIDguMiBhbmQgY2hlY2sgdGhhdCBldmVyeSBwaWVjZSB3b3Jrcy4%2Ceyebrow_~VHV0b3JpYWwgwrcgOCBtaW4gcmVhZA%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9lZGl0b3ItYW5kLXZ1ZS1kZXZ0b29scy1zZXR1cC1pbi0yMDI2Ig%2Cs_eVSrVHpjkhhq6czX.png" "og:image:alt": "Editor and Vue DevTools setup in 2026 · vuejs.school" "og:image:height": "600" "og:image:type": image/png "og:image:width": "1200" "og:title": "Editor and Vue DevTools setup in 2026 · vuejs.school" "twitter:image": "https://vuejs.school/_og/d/a_~RWRpdG9yIGFuZCBWdWUgRGV2VG9vbHMgc2V0dXAgaW4gMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Editor%2Band%2BVue%2BDevTools%2Bsetup%2Bin%2B2026%2Cdescription_~U2V0IHVwIFZTIENvZGUgZm9yIFZ1ZSB3aXRoIFZ1ZSAoT2ZmaWNpYWwpLCBmb3JtYXQgb24gc2F2ZSwgRVNMaW50IGFuZCBzbmlwcGV0cywgdGhlbiBhZGQgVnVlIERldlRvb2xzIDguMiBhbmQgY2hlY2sgdGhhdCBldmVyeSBwaWVjZSB3b3Jrcy4%2Ceyebrow_~VHV0b3JpYWwgwrcgOCBtaW4gcmVhZA%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9lZGl0b3ItYW5kLXZ1ZS1kZXZ0b29scy1zZXR1cC1pbi0yMDI2Ig%2Cs_eVSrVHpjkhhq6czX.png" "twitter:image:alt": "Editor and Vue DevTools setup in 2026 · vuejs.school" --- > Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt) ## Install the editor extensions You need three extensions in VS Code: - **Vue (Official)**, ID `Vue.volar`. It understands `.vue` files: highlighting, completion for components and props, type errors inside templates, go to definition. - **ESLint**, ID `dbaeumer.vscode-eslint`. It shows lint problems as you type and fixes them on save. - **Prettier**, ID `esbenp.prettier-vscode`. It formats the file when you save. If an old project still recommends Vetur, the extension for Vue 2, disable it. Two extensions fighting over the same `.vue` file give you duplicate errors and a slow editor. Put the list in the project, so everyone who opens the folder is offered the same set: *.vscode/extensions.json* ``` { "recommendations": ["Vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] } ``` On JetBrains IDEs the picture is simpler. WebStorm ships Vue support in its bundled Vue.js plugin, so there is nothing to install; check that the plugin is enabled under Settings, Plugins. Turn on ESLint and Prettier under Languages & Frameworks, choose automatic configuration for both, and tick their "on save" options. The DevTools half of this post is identical, because DevTools lives in the browser. ## Format on save: Prettier or Oxfmt A formatter rewrites spacing, quotes and line breaks to one consistent style, so code review is about code. Use **Prettier**. It has been stable for years, the 3.9 line is current, and create-vue offers it as a regular option. With Prettier and ESLint ticked, create-vue writes these two files (its settings file also has a few `explorer.fileNesting` lines, left out here): *.prettierrc.json* ``` { "$schema": "https://json.schemastore.org/prettierrc", "semi": false, "singleQuote": true, "printWidth": 100 } ``` *.vscode/settings.json* ``` { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll": "explicit" } } ``` `formatOnSave` runs the formatter every time you save. `defaultFormatter` tells VS Code which extension wins, because Vue (Official) can also format `.vue` files block by block and you only want one formatter in charge. `codeActionsOnSave` is where ESLint's fixes come in. `source.fixAll` asks every extension that offers automatic fixes, ESLint included, to apply them when you save; `"explicit"` limits that to saves you make yourself, not VS Code's auto-saves. **Oxfmt** is the newer option, a formatter written in Rust by the Oxc project. Its beta announcement reports it as more than 30 times faster than Prettier on a first run without a cache, and it formats Vue files. create-vue 3.23 lists it under experimental features, with the `oxc.oxc-vscode` extension as the default formatter. It is a sensible choice for a large codebase where Prettier is slow, as long as you accept beta software in your toolchain. ## Lint in the editor with ESLint 10 ESLint 10 reads one format only: the flat config file, `eslint.config.ts` or `eslint.config.js`. The VS Code extension follows it automatically, so two old settings can go: - `eslint.useFlatConfig` is ignored from ESLint 10 onwards. - `eslint.validate` is not needed for `.vue` files, because `vue` is already in the extension's default `eslint.probe` list. If an old settings file still has either one, delete it. When you combine ESLint with a formatter, ESLint must stop judging formatting, or the two will argue about every semicolon. create-vue adds one line for that: *eslint.config.ts* ``` import { globalIgnores } from 'eslint/config' import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript' import pluginVue from 'eslint-plugin-vue' import skipFormatting from 'eslint-config-prettier/flat' export default defineConfigWithVueTs( { name: 'app/files-to-lint', files: ['**/*.{vue,ts,mts,tsx}'], }, globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']), ...pluginVue.configs['flat/essential'], vueTsConfigs.recommended, skipFormatting, ) ``` `skipFormatting` switches off every rule that a formatter already handles. It goes last, so nothing after it turns those rules back on. create-vue uses the same line with Oxfmt. A create-vue project also has `...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json')` just before `skipFormatting`. create-vue 3.23 always adds Oxlint, a second linter from the Oxc project, when you tick ESLint, and that entry turns off the ESLint rules Oxlint already runs. Oxlint's own findings appear in the editor through the Oxc extension (`oxc.oxc-vscode`), which create-vue adds to `extensions.json`. ## Stay on TypeScript 6.0 in Vue projects Vue (Official) has two halves. A Vue language server handles templates and styles, and a TypeScript plugin, `@vue/typescript-plugin`, runs inside VS Code's own TypeScript service and lets it understand `.vue` files, so TypeScript works in your components and in the `.ts` files that import them. Leave the built-in "TypeScript and JavaScript Language Features" extension switched on; the plugin depends on it. Do not switch a Vue project to TypeScript 7 yet. TypeScript 7.0, the compiler rewritten in Go, came out on 8 July. Its [announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/) says plainly that tools which embed TypeScript, Volar included, still rely on TypeScript 6.0, and that Vue projects need to stay on 6.0 for editor support for now. create-vue 3.23 stays on 6.0 too: it installs `typescript` `~6.0.0` next to `vue-tsc` 3.3. If you installed the TypeScript 7 extension for VS Code, run "Disable TypeScript 7 Language Server" from the command palette in Vue workspaces. Then point VS Code at the project's own TypeScript, so the editor and `vue-tsc` agree. Add `"typescript.tsdk": "node_modules/typescript/lib"` to the same settings file, then run "TypeScript: Select TypeScript Version" and choose the workspace version. ## Add a snippet for new components The extension already completes component names, props, events and directives, and it suggests the `const props =` assignment when you type `defineProps`. What it cannot guess is the skeleton of a new file. A project snippet file in `.vscode/` fixes that, and once it is committed the whole team gets it: *.vscode/vue.code-snippets* ``` { "Vue component with typed props": { "scope": "vue", "prefix": "vsfc", "body": [ "", "", "" ], "description": "Single-file component with script setup and typed props" } } ``` Type `vsfc` in an empty `.vue` file and press Tab. `${1:title}` is the first stop, and both places update as you type. `$0` is where the cursor ends. `"scope": "vue"` keeps the snippet out of other file types. Write snippets for the shapes you repeat; three good ones beat a downloaded pack of fifty. ## Vue DevTools: browser extension or Vite plugin Vue DevTools lets you see the component tree, the state of each component, your Pinia stores and your routes while the app runs. It comes in two forms. Version 8 supports Vue 3 only. The **browser extension** is installed once from the Chrome Web Store or Firefox Add-ons (Edge, Brave and Arc use the Chrome one). It works on any Vue 3 app running in development mode and opens as a "Vue" tab in the browser's own developer tools. The **Vite plugin** runs inside your app instead, and the [Vite plugin guide](https://devtools.vuejs.org/guide/vite-plugin) recommends it for Vite projects because it offers features the extension does not have. create-vue installs it by default. In an existing project, run `npm install -D vite-plugin-vue-devtools` and add it to the config: *vite.config.ts* ``` import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools' export default defineConfig({ plugins: [vue(), vueDevTools({ launchEditor: 'code' })], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, }) ``` `launchEditor` decides which editor opens when you click "open in editor" on a component. `'code'` is the default; use `'webstorm'` for WebStorm. VS Code also needs its `code` command on your PATH. The plugin supports Vite 6, 7 and 8, so Vite 8.3 is fine. Run `npm run dev`. Below the local URL, the terminal prints two extra lines: one with a `/__devtools__/` address that opens DevTools as a separate window, and one telling you to press Option+Shift+D (Alt+Shift+D on Windows and Linux) to toggle the in-page overlay. ## What each DevTools panel is for - **Components** shows the tree. Select a component to see its props, state and computed values, and edit a value to watch the page update. - **Inspector** (Vite plugin only) lets you point at anything on the page and see which component rendered it. - **Pinia** lists your stores and lets you edit their state. With Pinia 4, `@vue/devtools-api` is a peer dependency you install yourself; if the panel is missing, run `npm install @vue/devtools-api`. - **Router** lists every route with its details, and **Pages** lets you type a path and see which route matches. - **Timeline** records events over time, including rendering and updates, so you can see what happened in which order after a click. ## A checklist to prove it works Create this file. It is wrong on purpose, so each tool has something to catch. *src/components/SetupCheck.vue**Breaks*** ``` ``` 1. `count.toUpperCase()` is underlined in red with "Property 'toUpperCase' does not exist on type 'number'". That is the Vue extension and TypeScript working together. 2. `unused` is flagged by ESLint as assigned but never used. That is the ESLint extension reading your flat config. 3. Save. The double quotes become single quotes and the semicolons disappear. That is format on save with your `.prettierrc.json`. 4. Run `npx vue-tsc --build`. It reports the same `toUpperCase` error, so the editor and the command line agree. 5. Fix the file (show `{{ count }}` and delete `unused`), use the component in `App.vue`, and start `npm run dev`. Press Option+Shift+D and the overlay appears. 6. In Components, select `SetupCheck`, change `count` to 5, and see the button text change. 7. Click a component's "open in editor" icon. `SetupCheck.vue` opens in your editor. If a step fails, its number tells you which piece to look at. A missing red underline is usually a TypeScript version problem (the TypeScript 7 language server is on, or VS Code is not using the workspace version); a file that does not format usually has a second formatter set as the default. **Check it stuck**3 questions from the Editor and Vue DevTools quiz. [**Practice now**](https://vuejs.school/learn/tooling/editor-and-vue-devtools?tab=quiz) **Was this helpful?** ## **Keep reading** [Release notes · 6 min read**Rolldown 1.0: the bundler under Vite 8 is stable**](https://vuejs.school/community/blog/rolldown-1-0-the-bundler-under-vite-8-is-stable) [Release notes · 7 min read**Vite 8 is out: Rolldown, one bundler and what a Vue project notices**](https://vuejs.school/community/blog/vite-8-is-out) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://vuejs.school/#website","@type":"WebSite","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school/","publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026#webpage","@type":"WebPage","dateModified":"2026-10-27T19:31:40.253Z","datePublished":"2026-09-15","description":"Set up VS Code for Vue with Vue (Official), format on save, ESLint and snippets, then add Vue DevTools 8.2 and check that every piece works.","name":"Editor and Vue DevTools setup in 2026","url":"https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026","breadcrumb":{"@id":"https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026#breadcrumb"},"isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026"]}],"primaryImageOfPage":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#identity","@type":"Organization","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school","logo":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026#article","dateModified":"2026-10-27T19:31:40.253Z","datePublished":"2026-09-15","description":"Set up VS Code for Vue with Vue (Official), format on save, ESLint and snippets, then add Vue DevTools 8.2 and check that every piece works.","headline":"Editor and Vue DevTools setup in 2026","inLanguage":"en","isAccessibleForFree":true,"thumbnailUrl":"https://vuejs.school/_og/d/a_~RWRpdG9yIGFuZCBWdWUgRGV2VG9vbHMgc2V0dXAgaW4gMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Editor%2Band%2BVue%2BDevTools%2Bsetup%2Bin%2B2026%2Cdescription_~U2V0IHVwIFZTIENvZGUgZm9yIFZ1ZSB3aXRoIFZ1ZSAoT2ZmaWNpYWwpLCBmb3JtYXQgb24gc2F2ZSwgRVNMaW50IGFuZCBzbmlwcGV0cywgdGhlbiBhZGQgVnVlIERldlRvb2xzIDguMiBhbmQgY2hlY2sgdGhhdCBldmVyeSBwaWVjZSB3b3Jrcy4%2Ceyebrow_~VHV0b3JpYWwgwrcgOCBtaW4gcmVhZA%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9lZGl0b3ItYW5kLXZ1ZS1kZXZ0b29scy1zZXR1cC1pbi0yMDI2Ig%2Cs_eVSrVHpjkhhq6czX.png","@type":["Article","BlogPosting"],"articleSection":["Tutorial"],"author":{"@id":"https://vuejs.school/#identity"},"image":{"@id":"https://vuejs.school/#/schema/image/1"},"isPartOf":{"@id":"https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026#webpage"},"mainEntityOfPage":{"@id":"https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026#webpage"},"publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/community/blog/editor-and-vue-devtools-setup-in-2026#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Blog","item":"https://vuejs.school/community/blog","position":1},{"@type":"ListItem","name":"Editor and Vue DevTools setup in 2026","position":2}]},{"@id":"https://vuejs.school/#logo","@type":"ImageObject","caption":"vuejs.school","contentUrl":"https://vuejs.school/apple-touch-icon.png","inLanguage":"en","url":"https://vuejs.school/apple-touch-icon.png"},{"@id":"https://vuejs.school/#/schema/image/1","@type":"ImageObject","contentUrl":"https://vuejs.school/_og/d/a_~RWRpdG9yIGFuZCBWdWUgRGV2VG9vbHMgc2V0dXAgaW4gMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Editor%2Band%2BVue%2BDevTools%2Bsetup%2Bin%2B2026%2Cdescription_~U2V0IHVwIFZTIENvZGUgZm9yIFZ1ZSB3aXRoIFZ1ZSAoT2ZmaWNpYWwpLCBmb3JtYXQgb24gc2F2ZSwgRVNMaW50IGFuZCBzbmlwcGV0cywgdGhlbiBhZGQgVnVlIERldlRvb2xzIDguMiBhbmQgY2hlY2sgdGhhdCBldmVyeSBwaWVjZSB3b3Jrcy4%2Ceyebrow_~VHV0b3JpYWwgwrcgOCBtaW4gcmVhZA%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9lZGl0b3ItYW5kLXZ1ZS1kZXZ0b29scy1zZXR1cC1pbi0yMDI2Ig%2Cs_eVSrVHpjkhhq6czX.png","inLanguage":"en","url":"https://vuejs.school/_og/d/a_~RWRpdG9yIGFuZCBWdWUgRGV2VG9vbHMgc2V0dXAgaW4gMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Editor%2Band%2BVue%2BDevTools%2Bsetup%2Bin%2B2026%2Cdescription_~U2V0IHVwIFZTIENvZGUgZm9yIFZ1ZSB3aXRoIFZ1ZSAoT2ZmaWNpYWwpLCBmb3JtYXQgb24gc2F2ZSwgRVNMaW50IGFuZCBzbmlwcGV0cywgdGhlbiBhZGQgVnVlIERldlRvb2xzIDguMiBhbmQgY2hlY2sgdGhhdCBldmVyeSBwaWVjZSB3b3Jrcy4%2Ceyebrow_~VHV0b3JpYWwgwrcgOCBtaW4gcmVhZA%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9lZGl0b3ItYW5kLXZ1ZS1kZXZ0b29scy1zZXR1cC1pbi0yMDI2Ig%2Cs_eVSrVHpjkhhq6czX.png"}]} ```