Javascript: Como formatar e indentar código?
Boas práticas na formatação e indentação de código
Na escrita de código em programação a tarefa de indentar é de fundamental importância.
Por exemplo, o seguinte código JavaScript, representa a função potencia que calcula a potência de um número base elevado ao exp:
<script> function potencia(base,exp){potencia=1
;for(i=1; i<=exp; i++) potencia = potencia*
base; return potencia;} </script>
O código não apresenta qualquer erro de sintaxe, mas é de difícil leitura, exatamente, pela falta de formatação e indentação.
Como proceder para melhorar a leitura do código?
Para melhorar a sua leitura, devemos realizar os seguinte passos:
1. Começar por separar os comandos por linhas, e isolar as chavetas :
<script>
function potencia(base,exp)
{
potencia=1;
for(i=1; i<=exp; i++)
potencia = potencia * base;
return potencia;
}
</script>
2. A seguir vem a tarefa de indentar.
Indentar quer dizer criar avanços horizontais em cada linha.
Ou seja vamos criar avanços hierárquicos para a direita:
Normalmente utilizamos a tecla de TAB que costuma avançar 4 espaços consecutivos.
Em JavaScript é costume utilizar somente 2 espaços. Pode configurar isso no seu editor.
<script>
function potencia(base, exp)
{
potencia = 1;
for (i = 1; i <= exp; i++) potencia = potencia * base;
return potencia;
}
</script>
3. O próximo passo será o de de marcar explicitamente os ciclos com um par de chavetas { }.
Neste caso só temos um ciclo for que deve incluir esse par de chavetas { } adicionais:
<script>
function potencia(base, exp)
{
potencia = 1;
for (i = 1; i <= exp; i++)
{
potencia = potencia * base;
}
return potencia;
}
</script>
4. Inserir comentários [Ajuda aqui]
Agora que temos o código indentado, devemos inserir comentários, que ajudam a entender o que código vai fazer:
<script> // A etiqueta script indica que vamos escrever código em Javascript"
function potencia(base, exp) // A função potencia tem 2 parâmetros de entrada: base e exp
{
potencia = 1; // A variável local potencia é criada e inicializada com o valor 1
for (i = 1; i <= exp; i++) // O ciclo for é executado exp-1+1 vezes (ou seja de 1 a exp)
{
potencia = potencia * base; // O cálculo da potencia de um número é uma multiplicação recursiva
}
return potencia; // No final a função devolve o valor potencia
}
</script> // Termina o script
Compare esta versão final, devidamente indentada e comentada com a versão inicial.
Qual é a que apresenta uma melhor leitura?
Mais sobre convenções, boas práticas e erros comuns em Javascript
Importante > Convenções em Javascript: www.w3schools.com/js/js_conventions.asp
Importante > Boas práticas em Javascript: www.w3schools.com/js/js_best_practices.asp
Importante > Erros comuns em Javascript: www.w3schools.com/js/js_mistakes.asp
"Beautifiers": Programas que melhoram, automaticamente, a formatação e indentação do código
Podemos utilizar programas como o jsbeautifier.org para formatar e indentar automaticamente o código.
Experimenta agora mesmo:
Copia e cola no jsbeautifier o código inicial e clica em CTRL+Enter
O que achaste do resultado final?
Outros "beautifiers":