Chavetas encaracoladas

na maioria dos projectos JavaScript, as chavetas encaracoladas são escritas em estilo “Egípcio” com o chaveiro de abertura na mesma linha que a palavra – chave correspondente-não numa nova linha. Também deve haver um espaço antes do parêntese de abertura, como este:

if (condition) { // do this // ...and that // ...and that}

Uma única linha de construção, como if (condition) doSomething(), é um importante caso de borda. Devemos usar aparelho?

Aqui estão as variantes anotadas para que você possa julgar sua legibilidade para si mesmo:

para um código muito breve, uma linha é permitida, por exemplo,if (cond) return null. Mas um bloco de código (a última variante) é geralmente mais legível.

comprimento de linha

ninguém gosta de ler uma longa linha horizontal de código. É melhor dividi-los.

Por exemplo:

// backtick quotes ` allow to split the string into multiple lineslet str = ` ECMA International's TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript.`;

E para if instruções:

if ( id === 123 && moonPhase === 'Waning Gibbous' && zodiacSign === 'Libra') { letTheSorceryBegin();}

o comprimento máximo da linha deve ser acordado ao nível da equipa. Normalmente são 80 ou 120 caracteres.

travessões

Existem dois tipos de travessões:

• travessões Horizontais: 2 ou 4 espaços.

  uma indentação horizontal é feita usando 2 ou 4 espaços ou o símbolo da tabulação horizontal (tabulação da chave). Quem escolher é uma velha guerra santa. Os espaços são mais comuns hoje em dia.

  uma vantagem dos espaços sobre as tabulações é que os espaços permitem configurações mais flexíveis de travessões do que o símbolo da tabulação.

  Por exemplo, podemos alinhar os parâmetros com o parêntese de abertura, como este:

  show(parameters, aligned, // 5 spaces padding at the left one, after, another ) { // ...}

• Vertical recuos: linhas em branco para dividir o código em blocos lógicos.

  mesmo uma única função pode muitas vezes ser dividida em blocos lógicos. No exemplo abaixo, a inicialização das variáveis, o loop principal e devolver o resultado são divididos verticalmente:

  function pow(x, n) { let result = 1; // <-- for (let i = 0; i < n; i++) { result *= x; } // <-- return result;}

  Inserir um extra newline onde ele ajuda a tornar o código mais legível. Não deve haver mais de nove linhas de código sem uma indentação vertical.

ponto e vírgula

um ponto e vírgula deve estar presente após cada declaração, mesmo que possa ser ignorado.

existem línguas em que um ponto e vírgula É realmente opcional e raramente é usado. No JavaScript, no entanto, há casos em que uma quebra de linha não é interpretada como um ponto e vírgula, deixando o código vulnerável a erros. Veja mais sobre isso na estrutura de código do capítulo.

Se você é um programador JavaScript experiente, você pode escolher um estilo de código sem-ponto-e-vírgula como o standard js. Caso contrário, é melhor usar semicolons para evitar possíveis armadilhas. A maioria dos desenvolvedores coloca semicolons.

níveis de nidificação

tente evitar o código de nidificação com demasiados níveis de profundidade.

Por exemplo, no loop, às vezes é uma boa idéia usar o continue diretiva para evitar nidificação extra.

Por exemplo, em vez de adicionar um aninhados if condicional como este:

for (let i = 0; i < 10; i++) { if (cond) { ... // <- one more nesting level }}

podemos escrever:

for (let i = 0; i < 10; i++) { if (!cond) continue; ... // <- no extra nesting level}

Uma coisa semelhante pode ser feito com if/else e return.por exemplo, duas construções abaixo são idênticas.

Opção 1:

function pow(x, n) { if (n < 0) { alert("Negative 'n' not supported"); } else { let result = 1; for (let i = 0; i < n; i++) { result *= x; } return result; }}

Opção 2:

function pow(x, n) { if (n < 0) { alert("Negative 'n' not supported"); return; } let result = 1; for (let i = 0; i < n; i++) { result *= x; } return result;}

A segunda é mais legível porque o “caso especial” de n < 0 é tratado logo no início. Uma vez que a verificação é feita, podemos passar para o fluxo de código “principal” sem a necessidade de nidificação adicional.

colocação de funções

Se estiver a escrever várias funções “auxiliares” e o código que as usa, existem três formas de organizar as funções.

na maioria das vezes, a segunda variante é preferida.

isso é porque ao ler o código, primeiro queremos saber o que ele faz. Se o código For primeiro, torna-se claro desde o início. Então, talvez não precisemos de ler as funções de todo, especialmente se seus nomes são descritivos do que eles realmente fazem.

guias de estilo

um guia de estilo contém regras gerais sobre” como escrever ” código, por exemplo, quais aspas a usar, quantos espaços a indentar, o comprimento máximo da linha, etc. Muitas coisas menores.

Quando todos os membros de uma equipe usam o mesmo Guia de estilo, o código parece uniforme, independentemente de qual membro da equipe escreveu.

é claro que uma equipa pode sempre escrever o seu próprio guia de estilo, mas normalmente não há necessidade de o fazer. Há muitos guias existentes para escolher.algumas opções populares:

• Google JavaScript Style Guide
• Airbnb JavaScript Style Guide
• Idiomatic.JS
• StandardJS
• (mais muitos mais)

Se você é um desenvolvedor novato, comece com a cábula no início deste capítulo. Em seguida, você pode navegar em outros guias de estilo para pegar mais idéias e decidir qual você gosta mais.

Linters automatizados

Linters são ferramentas que podem automaticamente verificar o estilo do seu código e fazer sugestões para melhorar.

A grande coisa sobre eles é que a verificação de estilo também pode encontrar alguns bugs, como erros de digitação em nomes de variáveis ou funções. Por causa deste recurso, o uso de um linter é recomendado, mesmo se você não quiser ficar com um “estilo de código”particular.

Aqui estão algumas ferramentas de linting bem conhecidas:

• JSLint – um dos primeiros linters.
• JSHint-Mais opções do que JSLint.
• ESLint-provavelmente o mais novo.

todos eles podem fazer o trabalho. O autor usa o ESLint.

A Maioria Dos linters são integrados com muitos editores populares: basta activar o plugin no editor e configurar o estilo.

Por exemplo, para o ESLint você deve fazer o seguinte:

1. Install Node.js.
2. Instale o ESLint com o comando npm install -g eslint (o MPN é um instalador de pacotes JavaScript).
3. crie um ficheiro de configuração chamado .eslintrc na raiz do seu projecto JavaScript (na pasta que contém todos os seus ficheiros).
4. instale / active o plugin para o seu editor que se integra com o ESLint. A maioria dos editores tem um.

Aqui está um exemplo de um.eslintrc