Mantendo seu código limpo com mais bonito

gurinho

A formatação do código parece um assunto trivial, mas é algo que pode afetar a qualidade e a correção do seu código, como ele obtém controle de versão e como você colabora com outras pessoas. Se você não quiser se prender a detalhes de onde vai cada chave, tente terceirizar o problema para uma ferramenta de código aberto, Prettier.

Questões de formatação

As equipes de desenvolvimento de software perderam incontáveis ​​horas ao longo da história discutindo sobre o comprimento máximo da linha ou em qual linha uma braçadeira deve ser colocada. Seja qual for a preferência pessoal, a maioria das pessoas concorda em pelo menos uma coisa: a formatação do código deve ser consistente em todo o projeto.

Mais bonito é uma ferramenta desenvolvida para isso. Forneça a ele algum código e ele retornará o mesmo código, formatado de maneira consistente. Prettier tem integração com editor de texto, ferramenta de linha de comando e uma demonstração online.

Falando a língua certa

Em primeiro lugar, você vai querer saber se o Prettier é compatível com o idioma ou os idiomas com que você normalmente trabalha. Prettier está atualmente focada em um conjunto básico de linguagens dedicadas principalmente ao desenvolvimento front-end da web, incluindo:

  • JavaScript
  • HTML
  • CSS
  • Sass
  • Markdown
  • YAML

Também há suporte aberto para idiomas adicionais por meio de plug-ins.

Experimente mais bonito usando o playground online

Antes mesmo de tentar instalar o Prettier, você pode querer dar uma olhada no playground . Usando uma interface da web, você pode colar algum código de exemplo e observar como Prettier o transformará. Essa é uma ótima maneira de obter uma impressão do que a ferramenta realmente faz, mas também pode atuar como seu método principal para usar o mais bonito, se seus requisitos forem mais leves.

Por padrão, o playground deve se parecer com dois painéis básicos de editor de texto, um à esquerda para sua entrada e um à direita mostrando a saída de Prettier. Você verá alguns exemplos de código inicialmente, mas pode simplesmente remover tudo isso e colar no seu próprio.

Por exemplo, tente inserir o seguinte JavaScript:

 (function ()
 {
 window.alert('ok')
 }())

Mais bonito deve transformá-lo em:

 (function () {
 window.alert("ok");
 })();

Observe, por padrão, as alterações que Prettier faz incluem:

  • Converter strings entre aspas simples em aspas duplas
  • Adicionando ponto e vírgula
  • Convertendo recuos em dois espaços

No canto inferior esquerdo, há um botão que permite visualizar as opções. Com o exemplo anterior, tente ajustar a largura da guia, alternando a sinalização –single-quote em Comum ou alternando a sinalização –no-semi em JavaScript .

Configurando opções

Mais bonito é auto-descrito como “opinativo”, uma escolha deliberada de design que significa que o controle dos detalhes é sacrificado pela simplicidade e consistência. Ele foi projetado para você configurar e depois esquecer, em vez de permanecer preocupado com cada detalhe de formatação de seu código. (Para uma alternativa com controle muito mais refinado sobre cada detalhe de formatação, tente eslint .)

No entanto, os autores também reconhecem que algumas decisões têm impacto funcional além da aparência do código. Algumas opções – incluindo algumas para fins de legado – permanecem, então você deve pelo menos entender o que elas fazem, mesmo se você usar o mais bonito em seu estado padrão.

A melhor maneira de gerenciar as opções mais bonitas é salvá-las em um arquivo de configuração. Há muitas maneiras de organizar isso, mas comece criando um arquivo chamado .prettierrc.json no diretório local do projeto. Ele pode conter qualquer uma das opções com suporte em um objeto JSON padrão, por exemplo

 {
 "tabWidth": 8
 }

O mesmo arquivo de configuração será lido por Prettier se você estiver executando através da linha de comando ou um editor de texto compatível.

Instalação básica e a ferramenta de linha de comando

Usando yarn ou npm, a instalação deve ser direta. Para fios:

 $ yarn global add prettier

E para npm:

 $ npm install --global prettier

Depois de instalar o Prettier globalmente, você deverá ser capaz de digitar:

 $ prettier

Por padrão, você receberá uma tela de texto de ajuda que confirmará se a ferramenta está instalada e funcionando corretamente.

Limpando um Arquivo

Para reformatar um arquivo, use um comando semelhante a:

 $ prettier --write filename.js

Isso substituirá o arquivo original, que geralmente é a abordagem mais conveniente. Como alternativa, você pode apenas querer mais bonito para atuar em cada arquivo em um projeto:

 $ prettier --write .

O Prettier será executado em todos os arquivos do diretório atual, formatando todos aqueles que ele reconhecer.

Você também pode imprimir o resultado na saída padrão, em vez de alterar o arquivo original, o que permite salvar a saída em um arquivo diferente ou redirecioná-lo para outro lugar:

 $ prettier test.js > test2.js

Verificando um arquivo

Para ter um relatório mais bonito sobre a limpeza de seu código sem realmente fazer nenhuma alteração, use a sinalização –check com um único nome de arquivo ou vários:

 $ prettier --check .

Você obterá uma linha de saída para cada arquivo que não corresponda ao formato esperado, de acordo com a configuração de Prettier:

 Checking formatting...
 [warn] .prettierrc
 [warn] .prettierrc.json
 [warn] Code style issues found in the above file(s). Forgot to run Prettier?

Opções de linha de comando

As opções padrão de Prettier estão disponíveis como opções de linha de comando, se você precisar delas. Aqui está um exemplo de como o sinalizador –single-quote afeta a saída:

 $ prettier tmp.js
 function example() {
 console.log("hello, world");
 }
 $ prettier --single-quote tmp.js
 function example() {
 console.log('hello, world');
 }

Conseguindo ajuda

A ferramenta de linha de comando fornece ajuda informativa sobre qualquer opção por meio do sinalizador –help :

 $ prettier --help trailing-comma
 --trailing-comma <es5|none|all>
 Print trailing commas wherever possible when multi-line.
 Valid options:
 es5 Trailing commas where valid in ES5 (objects, arrays, etc.)
 none No trailing commas.
 all Trailing commas wherever possible (including function arguments).
 Default: es5

Usando um Editor de Texto

Depois de instalar o Prettier, você pode usá-lo em uma variedade de cenários, dependendo do conjunto de ferramentas que você já está usando. Provavelmente, você usa um editor de texto. Mais bonito tem ligações para a maioria dos mais populares, então veja como configurar três deles:

Sublime Text

JsPrettier é um plugin Sublime Text que disponibiliza o Prettier no editor. Embora existam várias maneiras diferentes de instalar o JsPrettier, recomendamos o uso do método Package Control. Você precisará já ter instalado o Prettier, abra a Paleta de Comandos do Sublime Text e selecione “Package Control: Install Package”:

Em seguida, pesquise “jsprettier” e clique para instalá-lo:

Depois que o JsPrettier estiver instalado, você pode clicar com o botão direito em qualquer arquivo aberto para formatá-lo. Você também pode definir o valor de auto_format_on_save como true nas configurações do JsPrettier, o que resultará no JsPrettier limpando automaticamente todos os arquivos compatíveis quando você salvá-los em Texto Sublime.

Átomo

A instalação do Atom é muito semelhante ao Sublime Text: basta usar o gerenciador de pacotes integrado do editor para instalar o átomo mais bonito :

Depois de instalado, o uso é familiar: um atalho ou item de menu permite formatar um arquivo sob demanda, enquanto uma configuração Atom permite executar automaticamente o Prettier sempre que um arquivo é salvo.

Vim

O Vim é um editor baseado em linha de comando muito poderoso, que não é adequado para iniciantes. Fazer o mais bonito trabalhar com o vim é apropriadamente complicado, mas ainda são apenas algumas etapas:

 mkdir -p ~/.vim/pack/plugins/start
 git clone https://github.com/prettier/vim-prettier 
 ~/.vim/pack/plugins/start/vim-prettier

Git é provavelmente a maneira mais fácil de baixar os arquivos necessários, mas qualquer meio de tornar o vim mais bonito nesse diretório inicial deve funcionar.

Uma vez instalado, o Prettier será executado automaticamente quando um arquivo for salvo no vi. Ele também pode ser executado manualmente a qualquer momento por meio do comando Prettier :

O que deve resultar em um arquivo limpo:

Integre o mais bonito ao seu projeto

Usar um formatador de código como o Prettier pode ajudar a manter uma base de código mais fácil de ler. Também pode ajudar a evitar debates sobre qual estilo específico usar ao codificar – basta terceirizar essas decisões para a Prettier!

Finalmente, um gancho git pode ser configurado para garantir que o código sempre seja limpo quando for enviado ao repositório do seu projeto. Os desenvolvedores individuais podem formatar seu código da maneira que desejarem, mas a cópia central sempre será limpa e consistente.