Se você é um programador front-end ou fullstack experiente já deve ter ouvido falar em JavaScript Standard Style ou deve ter usado algum style guide para desenvolvimento de seu código. E se não, sugiro que inicie a utilização imediatamente.
A notícia boa é que você pode iniciar pela leitura deste artigo, e os próximos, onde iremos falar do que se trata, como implantar a utilização e por fim como podemos automatizar o processo de validação de um style guide em nossos projetos de desenvolvimento.
E caso, você seja um desenvolvedor iniciante, este é o momento perfeito para você adquirir esse diferencial em seu skill de competências que irá ajudá-lo a escrever um código mais limpo e eficiente.
O que é JavaScript Standard Style
Um guia de estilo (style guides) é um conjunto de padrões que descrevem como o código deve ser escrito e organizado.
Ou seja, resumidamente o JavaScript Style Guides é documento descritivo que vai dizer quais são as regras e padrões a serem seguidos no projeto envolvendo JavaScript.
Obedecendo convenções de codificação, as quais são diretrizes de estilo para programação. Estas diretrizes normalmente cobrem:
⦁ Regras de nomenclatura e declaração para variáveis e funções.
⦁ Regras para o uso de espaço em branco, recuo e comentários.
⦁ Práticas e princípios de programação
Já as convenções de codificação garantem qualidade:
⦁ Melhorando a legibilidade do código
⦁ Facilitando a manutenção do código
As convenções de codificação podem ser regras documentadas para as equipes seguirem, ou apenas ser sua prática individual de codificação.
Neste artigo utilizaremos o exemplo do style guides JavaScript Standard Style, um guia de estilo que é usado por muitas empresas de tecnologia como: NPM, GitHub, mongoDB e ZenDesk.
Por que precisamos de guias como o JavaScript Standard Style?
Por um motivo principal: Todos escrevem código de maneiras diferentes.
Um determinado desenvolvedor executa sua codificação de uma maneira, mas outro membro do time realiza de maneira distinta. Esse cenário não apresentaria problemas se cada programador trabalhasse apenas em seu código.
Contudo, essa perspectiva é totalmente contraproducente e distante de uma realidade profissional. Onde temos times de 10, 20 ou até mais programadores, trabalhando no desenvolvimento ou posterior sustentação de uma única aplicação.
Rapidamente o desenvolvimento se tornaria lento e a manutenção quase impraticável, uma verdadeira bagunça.
Para auxiliar na normatização e padronização da base de código, fazendo com que desenvolvedores sigam uma metodologia que seja familiar a todo o time envolvendo JavaScript, nesse caso, e para que novos colaboradores possam rapidamente compreender a estrutura do código e possam seguir escrevendo uma codificação que outros desenvolvedores consigam entender de forma rápida e fácil.
A base do JavaScript Standard Style Guide
O grande atrativo do JavaScript Standard Style é sua simplicidade de implantação.
Com um container centralizado de suas convenções e diretrizes, elimina-se a incômoda necessidade de manter diversos arquivos de configuração de estilo para cada módulo/projeto em que trabalhamos.
Esta estrutura de regras e diretrizes, auxilia ao time de desenvolvedores economizando tempo e esforço de três formas:
⦁ Mínima configuração. O JS Standard Style, é uma das maneiras mais fácil de aplicar estilo consistente em um projeto JavaScript. Basta instalar a biblioteca e pronto. Caso queira personalizar seu guia de estilo, também é rápido e objetivo.
⦁ Formate o código automaticamente. Basta executar standard –fix e dizer adeus ao código confuso ou inconsistente, ou mesmo automatizando esse processo com Git Hooks. Várias inconsistências no código são corrigidas automaticamente. E as que necessitam interações manuais são apresentadas no terminal.
⦁ Capture problemas de estilo e erros de programadores cedo. Economize um tempo precioso de revisão de código, eliminando o tempo entre revisores e contribuidores. Erre rápido, corrija rápido.
Adoção de um padrão de estilo significa classificar a importância na clareza do código e das convenções da comunidade, acima do estilo pessoal.
Essa cultura plural precisa estar cada vez mais intrínseca na personalidade de desenvolvedores, que necessitam cada vez mais trabalhar em equipes heterogêneas. Isso pode não fazer sentido para um desenvolvedor que trabalha em projetos autônomos.
Mas, para times de desenvolvimento, expectativas claras e automatizadas dos colaboradores tornam um projeto mais saudável e estável.
10 frameworks e bibliotecas JavaScript mais importantes do mercado
Regras do JavaScript Standard Style
A seguir, descrevemos algumas regras definidas pelo JavaScript Standard Style, para exemplificação da estrutura de código que o pattern solicita. Tal metodologia auxilia, e muito, no intuito do desenvolvimento em Clean Code.
Use 2 espaços
Código sem indentação é terrível para leitura, tão ruim quanto, é a falta de um padrão na indentação do projeto.
O guia de estilo recomenda dois espaços, para que se defina um estilo único. Nunca misture espaços e tabs em um único projeto.
function teste (nome) {
console.log('oi', nome)
}
Use aspas simples para strings
Na definição de Strings literais a verdade é que para o JavaScript não faz diferença se você declara com aspas simples ou duplas, para ele as duas maneiras são declarações válidas para uma String.
Contudo a abordagem é a mesma da indentação organiza-se um padrão para todo o código. Exceto para evitar escapamento, neste caso use a combinação de aspas simples e duplas.
console.log('olá, meu nome é ELisandro')
ou
$("<div class='wrapper'>")
Sem variáveis não-utilizadas
Para prevenção de armazenamento desnecessário em memória, e também para garantir otimização e código limpo no desenvolvimento, caso uma variável seja declarada, a mesma deve ser utilizada dentro do código.
function testFunction () {
const result = 'Lista' // ✗ erro
}
function testFunction () {
const result = 'Lista' // ✓ correto
console.log(result)
}
Adicione um espaço
Após a declaração de um método condicional if, while ou for e após chaves. Essa ação permite maior legibilidade ao código e a padronização facilita processos de automatização de processos.
if (condição) { ... } // ✓ correto
if(condição) {...} // ✗ erroTambém adicione um espaço: como o mesmo propósito adicione espaço antes do parêntese de declaração de funções.
function name (arg) { ... } // ✓ correto
function name(arg) { ... } // ✗ erro
run(function () { ... }) // ✓ correto
run(function() { ... }) // ✗ erro
Sempre use === [!==] ao invés de ==[!=]
Como o JavaScript Standard style guide determina a tipagem de variáveis, e objetos, mesmo quando em retornos de métodos, igualdade estrita é a comparação recomendada para igualdade ou diferença entre dois valores.
Ou seja, se os valores têm tipos diferentes, os valores são considerados não-iguais. Caso contrário, se os valores têm o mesmo tipo e não são números, eles são considerados iguais, se tiverem o mesmo valor.
Finalmente, se ambos os valores são números, eles são considerados iguais se ambos não são NaN e são do mesmo valor, ou se um é +0 e outro é -0.
Exceção: obj == null é permitido pra checar se null || undefined.
//Comparação de igualdades
if (name === 'Elisandro') // ✓ correto
if (name == 'Elisandro') // ✗ erro
//Comparação de diferenças
if (name !== 'Elisandro') // ✓ correto
if (name != 'Elisandro') // ✗ erro
Operadores infix
Operadores infixos, definem-se principalmente por operadores de atribuição ou de concatenação.
Ou exemplificando de maneira mais objetiva, são operadores que se posicionam no meio de uma expressão.
Entre, duas variáveis, objetos ou elementos. Nestes casos, deve haver um espaçamento entre estes elementos.
// ✓ correto
var x = 2
var message = 'Olá, ' + name + '!'
// ✗ erro
var x=2
var message = 'Olá, '+name+'!'
Vírgulas devem ter um espaço depois delas
Como mais uma ação de legibilidade e clareza de código, se padroniza o uso de espaço após o uso de vírgulas como separadores de argumentos ou elementos.
// ✓ correto
var lista = [1, 2, 3, 4]
function teste (nome, opcoes) { ... }
// ✗ erro
var list = [1,2,3,4]
function teste (nome,opcoes) { ... }
Uso do else
Mantenha a definição de um bloco else na mesma linha da chave de fechamento do comando if, e a chave de abertura do else também na mesma linha da palavra reservada do comando, após um espaço em branco. Essa estrutura sintática colabora para uma descrição mais clara e elegante do código.
// ✓ correto
if (condição) {
// ...
} else {
// ...
}
// ✗ erro
if (condição) {
// ...
}
else {
// ...
}
Uso de ifs
A declaração de blocos de condição if, devem seguir a seguinte estrutura: Caso, o bloco utilize apenas uma linha não deve utilizar chaves, mas, se ocupar mais de uma linha em sua estrutura, deve conter abertura e fechamento de chaves.
// ✓ correto - if de única linha
if (options.quiet !== true) console.log('done')
// ✓ correto - if utilizando chaves
if (options.quiet !== true) {
console.log('done')
}
// ✗ erro - if de mais de uma linha sem chaves
if (options.quiet !== true)
console.log('done')
Tratamento de err
Todos os retornos de parâmetros err devem ser tratados, e nunca ignorados.
As recomendações de melhores práticas solicitam que qualquer retorno de erro deve ser tratado, para que não aja a possibilidade de alguma anomalia não esperada, seja apresentada ao usuário.
// ✓ correto
run(function (err) {
if (err) throw err
window.alert('done')
})
// ✗ erro
run(function (err) {
window.alert('done')
})
Prefixe globais de browser com window
De acordo com o JavaScript Standard Style, sempre que se utilizar métodos globais do navegador, deve-se prefixar com o global window. Com essa ação se previne o uso acidental de globais de browser mal nomeadas como open, length, event e name.
Exceções: document, console e navigator.
Não são permitidas múltiplas linhas em branco
Obedecendo normativas de Clean Code, não utilize mais de uma linha em branco dentro do código. O que deixa o código deselegante e não otimizado.
// ✓ correto
constant value = 'Olá Mundo'
console.log(value)
// ✗ erro
constant value = 'Olá Mundo'
console.log(value)
Operador ternário
Caso opte pela utilização de operador ternário em múltiplas linhas, deixe os símbolos de tratamento ? e : em suas próprias linhas. Contudo, o recomendado, quando não for uma expressão longa e complexa, utilize o ternário em uma única linha.
// ✓ correto
var location = env.development ? 'localhost' : 'www.api.com'
// ✓ correto
var location = env.development
? 'localhost'
: 'www.api.com'
// ✗ erro
var location = env.development ?
'localhost' :
'www.api.com'
Declarações de variáveis
Não se deve declarar várias variáveis de uma única vez, devendo cada nova variável ser declarada individualmente e ter sua própria instrução.
// ✓ correto
var silent = true
var verbose = true
// ✗ erro
var silent = true, verbose = true
// ✗ erro
var silent = true,
verbose = true
Coloque parênteses adicionais
Quando se realizar declarações na definição de comandos condicionais, opte pelo uso de parênteses adicionais. Isso torna mais claro que a expressão é uma declaração (=) e não um tipo de equidade (===).
// ✓ correto
while ((m = text.match(expr))) {
// ...
}
// ✗ erro
while (m = text.match(expr)) {
// ...
}
Ponto-e-vírgula como terminador de linha
Não use, simples assim.
Todos os minificadores de código populares usam minificação baseada em AST (Abstract Syntax Trees). Logo, podem lidar com JavaScript sem ponto-e-vírgula normalmente (já que ponto-e-vírgula não é um terminador obrigatório em linguagem JavaScript). Funciona. Fique tranquilo.
A inserção automática de ponto-e-vírgula, é algo bem seguro, e é perfeitamente válido tanto sintaxicamente como semanticamente, de forma que qualquer navegador consegue interpretar o código. Não havendo impacto de performance.
window.alert('Olá') // ✓ correto
window.alert('Olá'); // ✗ erro
Nunca comece uma linha com ( , [ , ou `
Esse é o único problema em omitir ponto-e-vírgula, e standard te protege desse problema em potencial. Não se recomenda utilizar o início de linha com estes caracteres. Caso, opte pelo uso, anteceda o símbolo por “;” no início da linha, sendo utilizado como função de escape.
// ✓ correto
;(function () {
window.alert('ok')
}())
// ✗ erro
(function () {
window.alert('ok')
}())
// ✓ correto
;[1, 2, 3].forEach(bar)
// ✗ erro
[1, 2, 3].forEach(bar)
// ✓ correto
;`hello`.indexOf('0')
// ✗ erro
`hello`.indexOf('0')
Existe um badge que posso utilizar em meu readme?
Após todo esse esforço para desenvolvimento seguindo o style guide. É possível colocar um emblema (badge) que classifique meu código como compatível com o JavaScript Standard Style?
A resposta é Sim!
Se você utilizar o padrão em seu projeto, poderá incluir um dos emblemas no seu arquivo de readme para demonstrar a comunidade que o seu código foi desenvolvido utilizando o pattern. Para tanto em seu arquivo de readme inclua uma das linhas descritas na imagem abaixo.
Pronto! A partir de agora, seu repositório irá apresentar um badge, demonstrando que o código foi desenvolvido seguindo os padrões do guia de estilo.
Evidente, que você deve escolher entre um ou outro emblema. No exemplo coloquei os dois para exemplificação.
É fato que padronizar e implantar regras em seu time pode ser um processo um tanto quanto árduo, desta forma, a definição de um style guide no desenvolvimento de código se torna algo fundamental.
As melhorias, em termos de Clean Code, são imediatas e a curva de aprendizado da ferramenta é mínima.
Espero você no meu próximo artigo Tutorial: linting em TypeScript com ESLint, onde falamos sobre a implantação prática do JavaScript Standard Style e posteriormente como automatizar os seus processos com Git Hooks, utilizando as bibliotecas ESLint, Husky e Lint-Staged
Ajude a fomentar discussões inteligentes, com seus comentários, criticas ou sugestões. Não esqueça também de compartilhar o post!
Encontre vagas para programador JavaScript 100% remoto
