Hide Your Secrets in VS Code
Tags: vscode, webdev, javascript, fun
Published: 2020-01-18 16:51:32

---
title: Hide Your Secrets in VS Code
published: true
description: Cloak hides/shows your secrets in environment files, to avoid accidentally sharing them with everyone who sees your screen.
tags: vscode, webdev, javascript, fun
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yhu387t52f97shcvuyq6.png
canonical_url: https://johnpapa.net/hide-your-secrets-in-vs-code-with-cloak/
---

Have you ever wanted to hide your secrets in environment files? Cloak for VS Code helps you avoid accidentally sharing them with everyone who sees your screen.

![Cloak](https://media.giphy.com/media/kc6froExSoN3ZBFm55/giphy.gif)

## Alpha Release

I just released [Cloak v0.0.2](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-cloak&wt.mc_id=devto-blog-jopapa) over the weekend!

## What Can it Do?

Great question! You can check out the full [documentation here](https://github.com/johnpapa/vscode-cloak/blob/master/README.md). But here is a quick glimpse of the main features.

- Hide secrets in environment files
- Show the secrets again
- Toggle them on and off (with a keybinding or a command)
- Optionally hide environment file comments (defaults to showing them)

## Get Cloak

If you are interested in trying out Cloak, you can [find it here in the marketplace](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-cloak&wt.mc_id=devto-blog-jopapa).

or from VS Code 👇

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!

## Contribute

Contribute to GitHub repository [here](https://github.com/johnpapa/vscode-cloak?wt.mc_id=devto-blog-jopapa)

[![cloak icon](https://thepracticaldev.s3.amazonaws.com/i/6xvd4gr83orexxrt6arf.png)](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-cloak&wt.mc_id=devto-blog-jopapa)

## What Else

One of the key aspects I want before releasing v1 is to have a lot of unit tests in place, and to have it hooked into CI. I decided to use [Azure DevOps](https://azure.microsoft.com/en-us/services/devops/?wt.mc_id=devto-blog-jopapa) with their YAML option. Once it is up and running, I'll write more about how this works on Azure DevOps in future posts.

## Resources

- [Get VS Code](https://code.visualstudio.com/?wt.mc_id=devto-blog-jopapa)
- [Create your first VS Code extension](https://code.visualstudio.com/api/get-started/your-first-extension?wt.mc_id=devto-blog-jopapa)
- [VS Code Extension API](https://code.visualstudio.com/api/references/vscode-api?wt.mc_id=devto-blog-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=devto-blog-jopapa)
- [Try Azure Free](https://azure.microsoft.com/free?wt.mc_id=devto-blog-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=devto-blog-jopapa)

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

Thanks!