---
title: 🛠️ Ferramentas básicas de VS Code
description: "## 🔥 Hot reload e hot restart Coa aplicación en execución en modo de depuración: | Acción | Que fai? | Cando probala? | | --- | --- | --- | | **Hot reload** | Aplica moitos cambios no código…"
url: "https://www.drodicio.com/docs/flutter/tema-1-introducion-a-flutter-primeiros-pasos/vs-code/"
updated: "2026-10-12"
category: Tema 1. Introdución a Flutter. Primeiros pasos
---

# 🛠️ Ferramentas básicas de VS Code

## 🔥 Hot reload e hot restart

Coa aplicación en execución en modo de depuración:

| Acción | Que fai? | Cando probala? |
| --- | --- | --- |
| **Hot reload** | Aplica moitos cambios no código e conserva o estado actual. Non volve executar `main()` nin `initState()`. | Ao cambiar textos, cores ou a composición da interface. |
| **Hot restart** | Reinicia a execución de Dart e perde o estado actual. | Cando necesitas repetir a inicialización ou o hot reload non aplica o cambio. |
| **Deter e executar de novo** | Reinicia a aplicación completa. | Tras cambios en código nativo ou certos plugins. |

Usa o botón de raio para **hot reload** ou busca **Flutter: Hot Reload** na paleta. Para reiniciar, busca **Flutter: Hot Restart**. O hot reload ao gardar depende da configuración do editor.

> 📚 Consulta:
>
>
>
> - [Hot reload → `https://docs.flutter.dev/tools/hot-reload`](https://docs.flutter.dev/tools/hot-reload).

## ⚡ Crear a estrutura dun widget

Escribe `stless` nun ficheiro Dart e acepta a suxestión. Xera a estrutura dun `StatelessWidget`; dálle un nome e completa o seu `build()`.

![Crear un StatelessWidget co snippet stless](https://www.drodicio.com/wp-content/uploads/2026/10/stless.jpg)
Crear un StatelessWidget co snippet stless

O atallo `stful` crea un `StatefulWidget` coa súa clase `State`. Usarémolo no Tema 3.3.

## 🪄 Accións rápidas

Sitúa o cursor sobre un widget e preme `Ctrl + .` en Windows/Linux ou `Cmd + .` en macOS.

- **Wrap with widget:** envolve o widget noutro; por exemplo, un `Text` nun `Center`.

![Envolver un widget nunha Column coa opción Wrap](https://www.drodicio.com/wp-content/uploads/2026/10/wrap.jpg)
Envolver un widget nunha Column coa opción Wrap

- **Extract Widget:** converte unha parte da interface nun widget propio. Practicarémolo no Tema 3.2.

![Extraer un widget coa opción Extract Widget](https://www.drodicio.com/wp-content/uploads/2026/10/extract_widget-scaled.jpg)
Extraer un widget coa opción Extract Widget

## 🔎 Navegar polo código

- **F2 / Bt dereito + Rename Symbol**: cambia o nome dun elemento e actualiza as súas referencias.
- **Ctrl + clic (Windows) / Cmd + clic (macOS)**: vai á definición dun elemento.

## 🛠️ Paneis útiles

- **Problems:** mostra os erros e avisos detectados no código.

![Panel Problemas de VS Code](https://www.drodicio.com/wp-content/uploads/2026/10/problemas.png)
Panel Problemas de VS Code

- **Flutter Outline:** mostra a estrutura de widgets en forma de árbore, facilitando comprender e navegar pola interface.

![Explorar as clases e os métodos co panel Outline](https://www.drodicio.com/wp-content/uploads/2026/10/outline.jpg)
Explorar as clases e os métodos co panel Outline

Se a aplicación non compila, comeza polo primeiro erro do panel **Problems**: os seguintes poden ser consecuencia del.

> 📚 Consulta:
>
>
>
> - [Flutter en VS Code → `https://docs.flutter.dev/tools/vs-code`](https://docs.flutter.dev/tools/vs-code).