🕵️ Invisible Comments - Extensão para VSCode

Adicione comentários invisíveis no seu código sem alterar a lógica ou deixar rastros visuais evidentes no texto. Ideal para anotações privadas, revisões ou lembretes temporários.

🚀 Como Usar

Atenção para não quebrar os comentários:

• Sempre abra o vscode na pasta raiz do projeto, pode ser com o comando: code .
• Não edite o código com outro editor, use sempre o VSCODE
• Caso trabalhe em equipe, faça alterações sempre em branches, sempre atualize com git pull, e inclua a pasta .comments nos commits, também peça para todos usarem essa extensão e seguirem essas regras.

(Se não usar assim, vai quebrar seus comentários!)

1. Adicionar Comentário Invisível

Método 1: Menu de Contexto

1. Selecione o trecho de código
2. Clique com o botão direito
3. Escolha "Adicionar Comentário Invisível"
4. Digite seu comentário na caixa que aparece
5. Pressione Enter

Método 2: Atalho de Teclado

• Selecione o trecho
• Pressione Ctrl+Shift+C (Windows/Linux) ou Cmd+Shift+C (Mac)
• Digite o comentário
• Pressione Enter

Método 3: Paleta de Comandos

1. Selecione o trecho
2. Pressione Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (Mac)
3. Digite Invisible Comments: Adicionar Comentário Invisível
4. Pressione Enter
5. Digite o comentário

2. Visualizar Comentários

Highlight Visual:

• Trechos comentados têm fundo amarelo claro
• Uma borda sutil indica que há um comentário oculto

Tooltip:

• Passe o mouse sobre o trecho destacado
• Um tooltip aparecerá com o comentário
• Um ícone 💬 identifica os comentários invisíveis

3. Remover Comentário

Método 1: Menu de Contexto

• Coloque o cursor sobre o trecho comentado
• Clique com o botão direito
• Selecione "Remover Comentário Invisível"
• Confirme

Método 2: Paleta de Comandos

• Coloque o cursor sobre o trecho comentado
• Pressione Ctrl+Shift+P ou Cmd+Shift+P
• Digite Invisible Comments: Remover Comentário Invisível
• Confirme

4. Visualizar Todos os Comentários

Painel de Comentários:

1. Pressione Ctrl+Shift+P ou Cmd+Shift+P
2. Digite Invisible Comments: Mostrar Todos os Comentários
3. Pressione Enter
4. Uma nova aba será aberta com todos os comentários organizados por arquivo

🔧 Funcionalidades Técnicas

Sincronização Automática

A extensão monitora alterações no código:

• Linhas adicionadas/removidas: ajusta automaticamente os comentários
• Texto modificado: atualiza o hash para manter a referência correta
• Salvamento: persiste os comentários automaticamente na pasta do projeto/.comments

Identificação de Trechos

Cada comentário invisível é associado a:

• Hash do texto original
• Posição (linha/coluna inicial e final)
• Arquivo de origem (caminho relativo)

⚙️ Configuração de Cores

Método 1: Interface Gráfica do VSCode

1. Pressione Ctrl+, ou Cmd+,
2. Pesquise por Invisible Comments
3. Configure:

• Highlight Color: fundo do trecho
• Border Color: borda ao redor
• Overview Ruler Color: marcador na barra lateral

Método 2: Diretamente no settings.json

{
  "invisibleComments.highlightColor": "rgba(255, 255, 0, 0.1)",
  "invisibleComments.borderColor": "rgba(255, 255, 0, 0.3)",
  "invisibleComments.overviewRulerColor": "rgba(255, 255, 0, 0.8)"
}

Comandos DEV

Instale dependências

npm install

Instale a CLI do VSCE (caso ainda não tenha)

npm install -g vsce

Compile a extensão

npm run compile

Empacote a extensão

vsce package

Instale localmente no VSCode

code --install-extension invisible-comments-1.0.0.vsix

src/ ├── comments/ │ ├── core.ts # Funções principais de manipulação de comentários │ ├── decorations.ts # Funções de decoração do editor │ ├── fileHandlers.ts # Funções para lidar com eventos de arquivos │ ├── persistence.ts # Funções de persistência (salvar/carregar) │ ├── ui.ts # Funções de interface do usuário │ └── types.ts # Tipos e interfaces ├── extension.ts # Ponto de entrada da extensão