DEV Community

Jhony Walker
Jhony Walker

Posted on

Hacks do Github - Task lists e Tabelas

Tabelas e Task Lists

O Github é cheio de funcionalidades e o mais utilizado isso vocês já sabem e vamos continuar a série de "hacks" da plataforma que vão otimizar e melhorar sua experiência.

⚠️ Importante: Os prints que serão exibidos para exemplificar podem estar diferentes da interface do seu GitHub, por que sou muito adepto a extensões que melhoram a usabilidade e que ajudam no meu dia a dia. Partindo desse ponto peço que dê uma olhada nesse artigo antes

Sabe aquela issue que você abriu no Github e precisa quebrá-la em partes, mas não quer criar uma issue para cada coisa? Para isso você pode usar as task lists!

Basta você usar a notação - [ ] Texto da task (com um espaço dentro dos colchetes) para criar um checkbox desmarcado, ou então - [x] Texto da task, para um checkbox marcado. Exemplo:

- [ ] Task 1
- [ ] Task 2
- [ ] Task 3
- [x] Task 4
Enter fullscreen mode Exit fullscreen mode

Que resulta nisso:

Task

O interessante é que no Github, a linguagem utilizada para escrita desses textos é o Markdown que é uma linguagem simples de marcação originalmente criada por John Gruber e Aaron Swartz. Markdown converte seu texto em HTML válido, mas essa linguagem é utilizada também no Discord, Notion entre outros que possuem como base essa linguagem.

Isso significa que a output de saída será a mesma inserindo o texto formatado conforme o que está inserido no Github. Tendo isso em mente, vamos continuar..

Tabelas

Para criar tabelas é bem simples, mas acredite eles fazem diferença:

Plano     | Categoria
--------- | ------
Fazer     | A
Planejar  | B
Indagar   | C
Testar    | D
Enter fullscreen mode Exit fullscreen mode

O título da tabela é marcado com os traços - abaixo da palavra. O pipe | cria as colunas. Não é necessário alinhar com espaços, mas visualmente fica melhor, uma dica é que o VScode formata direitinho caso esteja usando um linter, que por acaso falo sobre alguns deles nesse artigo.

Sendo renderizada dessa forma:

Tabela

Ainda nas planilhas, perceba que a Categoria (segunda coluna) ficou estranho alinhado à esquerda. Pra ficar alinhado à direita 0conseguimos alinhar usando : nos traços que ficam abaixo do título da tabela:

  • Se usar : no lado esquerdo, o alinhamento será feito à esquerda (padrão como apresentado no exemplo).
  • Se usar : no lado direito, o alinhamento será feito à direita:
Plano     | Categoria
--------- | ------:
Fazer     | A
Planejar  | B
Indagar   | C
Testar    | D
Enter fullscreen mode Exit fullscreen mode
  • Para centralizar, use dos dois lados:
Plano       | Categoria
:---------: | :------:
Fazer       | A
Planejar    | B
Indagar     | C
Testar      | D
Enter fullscreen mode Exit fullscreen mode

Espero que esses "Hacks" tenham sido úteis para você e peço que acompanhe a continuação dessa série onde vou trazer muita coisa interessante para utilizar no seu dia a dia.. Mesmo que algumas você já conheça acho válido o reforço.

Fontes onde pesquisei esse conteúdo:

Top comments (0)