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

Installation

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

Configuration

Editor Settings

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

Completion Settings

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.

Auto-Insert Settings

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

Inlay Hints Settings

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

Formatting Settings

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

Server Settings

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

Commands

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

Using Workspace TypeScript

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

1. Create .vscode/settings.json in your project root
2. Add the following settings:

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

Troubleshooting

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

1. Reload Window: Run the Developer: Reload Window command in VSCode
2. Check vue-tsc: Run npx vue-tsc --noEmit in the command line to check for type errors
3. 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.

❤️ Sponsors

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

License

MIT License