/portfolio/code-breath
Code Breath: Sibling Separator
2026
/Extensão p/ VSCode|Open Source/
Feito com:
TypeScript
VSCode API
Babel
Code Breath: Sibling Separator

Extensão para VS Code que organiza automaticamente seu código React para ficar mais legível e fácil de navegar.

Code Breath resolve um problema silencioso porém irritante no dia a dia com React: componentes e elementos amontoados sem espaçamento visual, tornando a leitura do código desnecessariamente difícil.

A extensão analisa o arquivo via AST (Abstract Syntax Tree) usando o @babel/parser, percorre os nós JSX e identifica pares de elementos irmãos adjacentes. A inserção das linhas em branco respeita a indentação original e nunca duplica espaçamentos já existentes. Apenas o necessário é adicionado.

Para as edições no texto, usei a biblioteca MagicString, que opera sobre o source original com offsets em vez de recriar a string, garantindo performance e preservação fiel da formatação do desenvolvedor.

Para usar, basta apertar Ctrl+K Space no Windows e Linux, ou Cmd+K Space no macOS, e a formatação acontece instantaneamente.

A Extensão

Dentro do VSCode

A diferença que faz na legibilidade e organização do código