vscode-cloak - GitLite

KO | EN

gitlite — search

#python #react #ai #typescript #go #android #machine-learning #deep-learning #linux #nodejs #java #mcp #ios #openai

vscode-cloak

(★ 119)

Cloak allows you to hide/show environment keys, to avoid accidentally sharing them with everyone who sees your screen.

File Explorer

Download Latest Version (.zip)

- - bug-report.yml
  - feature-request.yml
- - ci.yml
  - copilot-setup-steps.yml
- copilot-instructions.md
- dependabot.yml
- PULL_REQUEST_TEMPLATE.md
- extensions.json
- launch.json
- settings.json
- tasks.json
- cloak-small.png
- cloak-toggle.gif
- cloak.png
- inspect-scopes.png
- - index.ts
  - read-configuration.ts
  - update-configuration.ts
- - constants.ts
  - enums.ts
  - index.ts
  - interfaces.ts
- - coverage.ts
  - runTest.ts
- commands.ts
- extension.ts
- logging.ts
- statusbar.ts
.all-contributorsrc
.DS_Store
.env
.eslintrc
.gitignore
.prettierrc.js
.vscodeignore
AGENTS.md
CHANGELOG.md
LICENSE.md
package-lock.json
package.json
README.md
tsconfig.json
vsc-extension-quickstart.md
webpack.config.js

# Installation Guide

1. Get the code

git clone https://github.com/johnpapa/vscode-cloak

Downloads the entire project code from GitHub to your computer.

cd vscode-cloak

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Cloak for Visual Studio Code

[![AI Ready](https://img.shields.io/badge/AI--Ready-yes-brightgreen?style=flat)](https://github.com/johnpapa/ai-ready)

![Cloak Icon](https://raw.githubusercontent.com/johnpapa/vscode-cloak/main/resources/cloak-small.png 'Cloak')

Cloak hides/shows your secrets in environment files, to avoid accidentally sharing them with everyone who sees your screen.

Cloak can be useful if you:

- present on stage
- stream on Twitch or YouTube
- record screencasts of your code

[![Open in VSCode.dev](https://img.shields.io/static/v1?label=Open%20In&message=VSCode.dev&labelColor=fff&color=444&logo=visualstudiocode&logoColor=blue)](https://vscode-dev.azurewebsites.net/)

[![Badge for version for Visual Studio Code extension johnpapa.vscode-cloak](https://vsmarketplacebadge.apphb.com/version/johnpapa.vscode-cloak.png?color=blue&style=?style=for-the-badge&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-cloak&wt.mc_id=cloak-github-jopapa)
[![Installs](https://vsmarketplacebadge.apphb.com/installs-short/johnpapa.vscode-cloak.png?color=blue&style=flat-square)](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-cloak&wt.mc_id=cloak-github-jopapa)
[![Downloads](https://vsmarketplacebadge.apphb.com/downloads-short/johnpapa.vscode-cloak.png?color=blue&style=flat-square)](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-cloak&wt.mc_id=cloak-github-jopapa)
[![Rating](https://vsmarketplacebadge.apphb.com/rating/johnpapa.vscode-cloak.png?color=blue&style=flat-square)](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-cloak&wt.mc_id=cloak-github-jopapa)

[![The MIT License](https://img.shields.io/badge/license-MIT-orange.png?color=blue&style=flat-square)](http://opensource.org/licenses/MIT)
[![All Contributors](https://img.shields.io/badge/all_contributors-15-blue.png?style=flat-square)](https://raw.githubusercontent.com/johnpapa/vscode-cloak/main/)

[![Build Status](https://johnpapa.visualstudio.com/vscode-cloak/_apis/build/status/VS%20Code%Cloak%20Extension?branchName=main)](https://johnpapa.visualstudio.com/vscode-cloak/_build/latest?definitionId=3&branchName=main&WT.mc_id=vscodecloak-github-jopapa)

## Install

1. Open **Extensions** sideBar panel in Visual Studio Code and choose the menu options for **View → Extensions**
1. Search for `Cloak`
1. Click **Install**
1. Click **Reload**, if required

## Quick Usage

Let's see Cloak in action!

1. Open a `.env` file
1. Press `F1` to open the command palette
1. Type `Cloak`
1. Choose `Cloak: Hide Secrets`

Now enjoy exploring the rest of the features explained in the docs!

![Toggling the Secrets to show/hide with Cloak](https://raw.githubusercontent.com/johnpapa/vscode-cloak/main/resources/cloak-toggle.gif)

## Settings

| Property                  | Description                                                                  |
| ------------------------- | ---------------------------------------------------------------------------- |
| cloak.hideComments        | Specifies whether comments will be affected                                  |
| cloak.environmentKeys     | Specifies the scopes for the environment keys that will be affected          |
| cloak.environmentComments | Specifies the scopes for the environment file comments that will be affected |

## Commands

| Command                    | Description                                        |
| -------------------------- | -------------------------------------------------- |
| cloak.restoreDefaultScopes | Restore the default TextMateRules scopes           |
| cloak.hideSecrets          | Hide the secrets                                   |
| cloak.showSecrets          | Show the secrets                                   |
| cloak.toggleSecrets        | Hide/Show the secrets (opposite of current effect) |

### Issues

Please refer to the [issues list and feel free to grab one and contribute](https://github.com/johnpapa/vscode-cloak/issues)!

### How it Works

here are the really important aspects of Cloak:

- Cloak does not modify your files
- Cloak does not store any information about your secrets
- Cloak does change the foreground color to an alpha color of 00, which makes the secret transparent and hidden

Cloak uses TextMateRules scopes to match syntax found in the VS Code editor. When it finds a match, these values can be hidden or shown.

Only TextMateRule scopes apply. This means that if those scopes do not exist for a specific key or secret you want to hide, it cannot be done with cloak. You can determine if the scope you are looking for will work by using the _Developer: Inspect Editor Tokens and Scope_ command from the command palette, then selecting the key and seeing the scope.

![Inspect Scopes](https://raw.githubusercontent.com/johnpapa/vscode-cloak/main/resources/inspect-scopes.png)

If you want to add or modify the scopes that apply to your secrets, you may change them in the _settings.json_ for VS Code. Find the setting for `cloak.environmentKeys` and modify as needed. If you ever need to revert to the defaults, choose the command `Cloak: Restore default scopes`.

### Logging

Cloak writes to VS Code's log output. You can open the output panel and select "Cloak" to see the log. This can be helpful when reporting issues.

## Changes

See the [CHANGELOG](/changelog) latest changes.

## FAQ

### Does Cloak work in files other than `.env` files?

Not currently. Cloak relies on the TextMateRules and scopes that VS Code supports. These currently only support known scopes, and there is no way I could find that would narrow down the contents of specific files. If this changes, or if you have ideas, please consider proposing a Pull Request.

## Try the Code

If you want to try the extension out start by cloning this repo, `cd` into the folder, and then run `npm install`.

Then you can run the debugger for the launch configuration `Run Extension`. Set breakpoints, step through the code, and enjoy!

## Resources

- [Get VS Code](https://code.visualstudio.com/?wt.mc_id=cloak-github-jopapa)
- [Create your first VS Code extension](https://code.visualstudio.com/api/get-started/your-first-extension?wt.mc_id=cloak-github-jopapa)
- [VS Code Extension API](https://code.visualstudio.com/api/references/vscode-api?wt.mc_id=cloak-github-jopapa)
- [Learn how to add WebPack bundles to your favorite extensions](https://code.visualstudio.com/updates/v1_32#_bundling-extensions-with-webpack?wt.mc_id=cloak-github-jopapa)
- [Try Azure Free](https://azure.microsoft.com/free?wt.mc_id=cloak-github-jopapa)

## Credits

Inspiration comes in many forms. These folks and teams have contributed either through ideas, issues, pull requests, or guidance. Thank you!

- Thanks to [John Lindquist](https://twitter.com/johnlindquist) and [Wes Bos](https://twitter.com/wesbos) for the inspiration.

- The VS Code team and their incredibly [helpful guide for creating extensions](https://code.visualstudio.com/api/get-started/your-first-extension?wt.mc_id=cloak-github-jopapa)

- Here are some great [examples for extensions](https://github.com/Microsoft/vscode-extension-samples) from the VS Code team

## Contributing

Want to contribute to Cloak? Here's how:

1. Fork the repo and create a feature branch
2. Install dependencies: `npm install`
3. Make your changes
4. Run linting: `npm run lint`
5. Run tests: `npm test`
6. Package the extension: `npm run package`
7. Submit a PR

See [AGENTS.md](AGENTS.md) for the full contributor guide, including how to add new commands and settings.

**Using Copilot?** Try a prompt like:

```
Add a new command called "cloak.toggleComments" that toggles the hideComments setting
```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<table>
  <tr>
    <td align="center"><a href="http://johnpapa.net"><img src="https://avatars2.githubusercontent.com/u/1202528?v=4" width="100px;" alt=""/><br /><sub><b>John Papa</b></sub></a><br /><a href="#infra-johnpapa" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/johnpapa/vscode-cloak/commits?author=johnpapa" title="Tests">⚠️</a> <a href="https://github.com/johnpapa/vscode-cloak/commits?author=johnpapa" title="Code">💻</a></td>
  </tr>
</table>

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!