Vue (Official)

Vue language support extension for VSCode, providing a full development experience for Vue Single File Components (SFCs).

Features

Syntax Highlighting - Supports HTML, CSS, JavaScript, TypeScript, Pug, SCSS, Less, etc. in Vue SFCs
Intelligent Completion - Auto-completion for components, props, events, slots, and directives
Type Checking - Full TypeScript type inference, including expressions in templates
Error Diagnostics - Real-time display of Vue compiler errors
Code Navigation - Go to definition, find references
Refactoring - Rename, extract component
Formatting - Format SFCs by block

Search for Vue (Official) or Vue.volar in the VSCode extension marketplace and click install.

Option	Type	Default	Description
`vue.editor.focusMode`	`boolean`	`false`	Enable focus mode
`vue.editor.reactivityVisualization`	`boolean`	`true`	Show reactivity variable visualization
`vue.editor.templateInterpolationDecorators`	`boolean`	`true`	Show template interpolation decorators

Option	Type	Default	Description
`vue.suggest.componentNameCasing`	`string`	`preferPascalCase`	Component name casing style (`preferKebabCase`, `preferPascalCase`, `alwaysKebabCase`, `alwaysPascalCase`)
`vue.suggest.propNameCasing`	`string`	`preferCamelCase`	Prop name casing style (`preferKebabCase`, `preferCamelCase`, `alwaysKebabCase`, `alwaysCamelCase`)
`vue.suggest.defineAssignment`	`boolean`	`true`	Suggest assignments for `defineProps`, etc.

Option	Type	Default	Description
`vue.autoInsert.dotValue`	`boolean`	`false`	Auto-insert `.value`
`vue.autoInsert.bracketSpacing`	`boolean`	`true`	Auto-insert spaces in `{{ }}`

Option	Type	Default	Description
`vue.inlayHints.destructuredProps`	`boolean`	`false`	Show types for destructured props
`vue.inlayHints.inlineHandlerLeading`	`boolean`	`false`	Show parameters for inline handlers
`vue.inlayHints.missingProps`	`boolean`	`false`	Show missing required props
`vue.inlayHints.optionsWrapper`	`boolean`	`false`	Show Options API wrapper
`vue.inlayHints.vBindShorthand`	`boolean`	`false`	Show v-bind shorthand hints

Option	Type	Default	Description
`vue.format.script.enabled`	`boolean`	`true`	Enable script block formatting
`vue.format.template.enabled`	`boolean`	`true`	Enable template block formatting
`vue.format.style.enabled`	`boolean`	`true`	Enable style block formatting
`vue.format.wrapAttributes`	`string`	`auto`	Attribute wrapping style

Option	Type	Default	Description
`vue.server.path`	`string`	-	Custom language server path
`vue.server.includeLanguages`	`string[]`	`["vue"]`	Language IDs to process
`vue.trace.server`	`string`	`off`	Server trace level

Command	Description
`Vue: Welcome`	Open the welcome page
`Vue: Restart Server`	Restart the language server

It is recommended to use the TypeScript version from your project instead of the one built into VSCode:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

If you encounter any issues, you can try the following steps:

Reload Window: Run the Developer: Reload Window command in VSCode
Check vue-tsc: Run npx vue-tsc --noEmit in the command line to check for type errors
Check Output Channel: In VSCode's "Output" panel, select Vue Language Server to see if there are any error messages

If the problem persists, feel free to open an issue on GitHub Issues.

This project's continued development is made possible by our generous sponsors:

MIT License