O segredo do JSDoc + Styled Components no VSCode.

Esse é um artigo curto, objetivo e simples... mas vai te ajudar demais!

Essa técnica não é exclusiva para projetos grandes, mesmo num projeto que apenas você seja o Front End, você vai me agradecer.

Que negócio é esse de JSDoc?

Se você ainda não está familiarizado, JSDoc é uma ferramenta para documentar seu código JavaScript ou TypeScript. Ele permite que você descreva sua API usando comentários especiais e tags para descrever o propósito, os parâmetros, o tipo de retorno e outras informações relevantes sobre a função ou método.

Usar JSDoc pode ajudar a melhorar a legibilidade do seu código e facilitar a manutenção, mesmo em projetos pequenos. Além disso, muitos IDEs usam as informações fornecidas pelo JSDoc para fornecer sugestões úteis e melhorar a experiência de desenvolvimento.

Vamos aos Exemplos

Você já deve ter notado que, quando você passa o mouse sobre um parâmetro em uma função, o VSCode exibe informações sobre aquele parâmetro, como o tipo e a descrição. Isso pode ser especialmente útil quando você está trabalhando com funções complexas e precisa lembrar o que cada parâmetro faz.

Quando paro o mouse em COLORS ele mostra os tipos definidos pra esse THEME.

Mas você concorda que isso ajuda pouco, diz apenas que o valor é uma string, embora no caso das cores não seja um grande problema, pois o nome é a cor.

Exemplo Prático

Agora aqui começa a ficar interessante, veja nesse caso do SPACING, apenas o nome não ajuda nada, eu sei que o valor é um number, mas qual é o número?

Aqui entra o JSDoc no VSCode.

/** Esses são os números definidos em cada propriedade
   *
   * xxSmall: 2,
   * xSmall: 4,
   * small: 8,
   * medium: 16,
   * large: 32,
   * xLarge: 64,
   * xxLarge: 128,
   */
  SPACING: {
    xxSmall: number;
    xSmall: number;
    small: number;
    medium: number;
    large: number;
    xLarge: number;
    xxLarge: number;
  };

Eu adicionei essas linhas acima do SPACING e temos a mágica.

/** Esses são os números definidos em cada propriedade
   *
   * xxSmall: 2,
   * xSmall: 4,
   * small: 8,
   * medium: 16,
   * large: 32,
   * xLarge: 64,
   * xxLarge: 128,
   */

Pronto! Agora sabemos o valor de cada parâmetro.

Usar JSDoc é uma forma prática de documentar e visualizar diretamente no VSCode enquanto você codifica, e pode ser especialmente útil em projetos maiores e mais complexos.

Espero que este artigo tenha sido útil! Até a próxima!