Qualidade de Código

Prof. Me. Danilo Bueno

“Mas está funcionando…”

• Os navegadores são “bonzinhos”

• Eles tentam ao máximo renderizar qualquer código, mesmo que esteja quebrado ou mal escrito.

• O Problema: “Funcionar” não é a mesma coisa que “estar correto”.

<!-- Funciona, mas está 100% errado -->
<div onclick="alert('fui clicado!')">
  <b>clique aqui</b>
</div>

Qualidade do Código

• Manutenção: Um código limpo é fácil de entender e atualizar.
• Colaboração: Permite que outras pessoas (e sua equipe) entendam seu código rapidamente.
• Acessibilidade: Leitores de tela dependem de um HTML semântico para funcionar.
• SEO: O Google (e outros buscadores) dão preferência para sites com HTML bem estruturado.
• Profissionalismo: Quando alguem analisa seu código, ele não está vendo só se “funciona”.

Ferramentas

1. Linters (Validadores): Apontam erros.
   • HTML-Validate (HTML)
   • CSS Tree Validator (CSS)
2. Formatters (Formatadores): Arrumam a bagunça.
   • Formatador padrão do VS Code
   • Prettier

HTML-Validate

• Um Linter para seu HTML (clique para baixar).
• Age como um professor de gramática do HTML. Ele lê seu código e aponta erros que o navegador “deixaria passar”.

Exemplos de erros que ele encontra:

• Esquecer o atributo alt em uma <img>.
• Colocar elementos em locais proibidos (ex: um <div> dentro de um <p>).
• IDs duplicados.

CSS Tree Validator

• Um Linter para seu CSS (clique para baixar).
• Encontra erros de sintaxe e propriedades inválidas no seu CSS que o editor às vezes não vê.

Exemplos de erros que ele encontra:

• margin: 10px 5px 10px 5px 15px; (valores demais!)
• display: center; (O valor center não existe para display).
• font-wight: bold; (Erro digitação em font-weight).

Formatador Padrão do VS Code

• Uma ferramenta de Formatação que já vem com o VS Code.
• Ele re-escreve seu código para corrigir a indentação e a organização.
• Garante que seu código não seja uma “massa” ilegível.

Ele resolve o principal problema de formatação:

• Código sem indentação.
• Elementos aninhados que estão desalinhados.
• Espaçamento inconsistente.

Formatador Padrão do VS Code

• Ele transforma código bagunçado em código limpo e legível.
• Antes e Depois:

<div>
<p>Este é um parágrafo
sem nenhuma indentação.
<span>Fica difícil de ler.</span>
</p>
</div>

<div>
    <p>Este é um parágrafo
        sem nenhuma indentação.
        <span>Fica difícil de ler.</span>
    </p>
</div>

Como Usar o Formatador

Você tem duas formas principais:

1. Manualmente (A qualquer momento):

• Pressione Shift + Alt + F (Windows/Linux)
• Ou Clique com o botão direito e escolha “Formatar Documento”.

2. Automaticamente (O jeito recomendado!):

• Configure o VS Code para formatar o arquivo toda vez que você salvar.

Formatar ao Salvar

• Para configurar o VS Code para usar o formatador padrão toda vez que você apertar Ctrl + S:

1. Vá em Configurações (JSON) do VS Code.
2. Adicione esta linha:

{
  // 1. Ativa a formatação ao salvar
  "editor.formatOnSave": true,
}

Conclusão

• Código de qualidade não é frescura. É profissionalismo.
• Garante acessibilidade, manutenção e facilita o trabalho em equipe.
• Use Linters (html-validate, css-tree) para encontrar erros.
• Use Formatters para manter seu código limpo e consistente sem esforço.

Obrigado!

[email protected] · website/docs · github