Post

VS Code 1.32: Autocomplete in Vue Templates

Draft updated on Invalid Date
Default avatar

By Chris on Code

VS Code 1.32: Autocomplete in Vue Templates

This tutorial is out of date and no longer maintained.

Introduction

The Visual Studio Code 1.32 February update is out now and with it comes some great new features for Vue users.

Let’s run through the list of features that are in the new 1.32 update:

  • Color themes without reloading: Install and apply new theme extensions without reloading.
  • Keyboard shortcuts editor improvements: Modify keybinding ‘when’ conditions in the editor.
  • Problems panel hover commands: Apply Quick Fixes or open a Peek window directly from hovers.
  • Preferred Code Actions: Preferred (mostly likely) Code Actions support auto fixing common issues.
  • Debug Console customization: Modify font-size, font-family, and line-height of the Debug Console.

Big list of updates as usual! This is why VS Code has consistently been used by so many developers.

Vue Templates Autocomplete

Every month of VS Code updates brings in some useful features but there’s one this month that really stood out to me.

The ability to have VS Code (through the Vetur Vue Plugin) provide IntelliSense and autocomplete. Here’s the example that the VS Code update logs give us:

How does it work?

Let’s say you have some data() in your Vue component. Let’s say a message variable.

If you wanted to use that message variable in your template, you can start typing and see VS Code help you out!

What else can I do?

This will work for the following:

  • data in the current component
  • computed properties
  • methods
  • props for any child components: will show on v-bind

The other updates that came in are:

  • Use Prettier as an option for <template> formatter
  • GraphQL custom block syntax highlighting
  • Pug interpolation syntax highlighting

Conclusion

The full list of updates can be found on the Vetur changelog.

A big update for Vue developers that use VS Code and Vetur. Will definitely speed up my own Vue work. Great work to the VS Code team as always!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Chris on Code

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel