No meu projeto só foi necessário adicionar a extensão Vue (Official).
No meu projeto só foi necessário adicionar a extensão Vue (Official).
Olá, Claudeny. Como vai?
Excelente observação! A evolução das ferramentas de desenvolvimento no ecossistema do Vue.js facilitou bastante a nossa vida.
Antigamente, quem desenvolvia com Vue utilizava extensões como a Vetur ou a Volar. No entanto, a equipe oficial unificou e aprimorou essas ferramentas, transformando a extensão Vue - Official (antiga Volar) na solução definitiva e recomendada para o Visual Studio Code.
Essa extensão única é extremamente poderosa e resolve praticamente tudo o que precisamos em um projeto Vue 3, entregando:
<template>, <script> e <style> dentro de um arquivo .vue.v-if, v-for, v-model) e reconhece as props que você criou em outros componentes.Como você já está com a extensão oficial configurada e rodando o projeto Cookin’ Up!, uma dica de ouro para melhorar o seu fluxo de trabalho e evitar conflitos visuais no VS Code é desativar o suporte nativo de TypeScript do editor apenas para arquivos Vue.
A própria extensão possui um recurso chamado Take Over Mode (Modo de Assumir o Controle). Quando ele está ativo, a extensão oficial do Vue assume o controle total sobre o processamento de TypeScript, deixando o VS Code muito mais rápido e evitando que duas ferramentas analisem o mesmo arquivo ao mesmo tempo.
Para garantir que o seu ambiente de desenvolvimento esteja 100% otimizado para o Vue 3, além dessa extensão oficial, recomendo futuramente adicionar também a extensão Vue Devtools diretamente no seu navegador (Chrome, Edge ou Firefox). Ela cria uma aba de inspeção nas ferramentas do desenvolvedor que permite visualizar o estado reativo dos seus componentes em tempo real na tela, o que ajuda muito quando começamos a trabalhar com diretivas e reatividade mais complexas!
Parabéns pelo progresso no curso e continue aproveitando a simplicidade e o poder do Vue 3!
Espero que possa ter lhe ajudado!