Vue (Official) installs statistics

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:

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

Description from the VS Code Marketplace listing.