Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Invisible CommentsNew to Visual Studio Code? Get it now.
Invisible Comments

Invisible Comments

natanael araujo

|
1 install
| (0) | Free
Adiciona comentários invisíveis a trechos de código com highlight e tooltip
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🕵️ 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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft