Javascript: Como formatar e indentar código?

Publicado a 01/06/2015, 11:03 por Luis Pitta -org-   [ atualizado a 31/03/2019, 15:31 ]
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, exactamente, 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 recuos lógicos em cada linha.
Ou seja vamos criar avanços hierárquicos para a direita:
Normalmente utilizamos a tecla de TAB costuma avançar 4 espaços consecutivos.
Em JavaScript é costume utilizar somente 2 espaços. Configure 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>



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?



 Importante  
Leia com atenção as convenções, boas práticas e erros comuns em Javascript


 Importante >  Convenções em Javascript


 Importante >  Boas práticas em Javascript


 Importante >  Erros comuns em Javascript
www.w3schools.com/js/js_mistakes.asp



Beautifiers: Formatação e indentação automática



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?