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!