The latest articles on DEV Community by Venkata Rohith Pesala (@venkatarohithpesala). https://dev.to/venkatarohithpesala https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4222883%2F9793da92-45fc-49c4-893b-25786a1a3f32.jpg https://dev.to/venkatarohithpesala en Venkata Rohith Pesala Mon, 02 Nov 2026 18:13:10 +0000 https://dev.to/venkatarohithpesala/how-to-see-your-env-values-in-vs-code-without-opening-the-file-3a71 https://dev.to/venkatarohithpesala/how-to-see-your-env-values-in-vs-code-without-opening-the-file-3a71 <p>You are reading some code and you see <code>process.env.PORT</code>. What is the value? So you open the .env file, scroll to find the line, and then go back to where you were. I wanted to skip that step, so I built a small VS Code extension.</p> <p>It is called DotEnv Lens, and it is free and open source.</p> <h2> Hover to see the value </h2> <p>Hover over <code>process.env.ANYTHING</code> in a JavaScript or TypeScript file, and the value appears right there, with the file it came from.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fy88wg4habkz8jurxoati.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fy88wg4habkz8jurxoati.gif" alt="Hovering over process.env in VS Code shows the value from the .env file" width="" height=""></a></p> <p>The hover tells you more than the value:</p> <ul> <li>A warning when the value is empty.</li> <li>An error when the key is not set anywhere.</li> <li>A hint when your <code>.env.example</code> lists a key that your <code>.env</code> is missing.</li> </ul> <p>It reads <code>.env.local</code> first and then <code>.env</code>, the way most frameworks do, and it updates as soon as you save the file.</p> <h2> What about secrets? </h2> <p>Showing values is the whole point, so the full value is shown by default. But if you share your screen or record a video, one setting masks secret-looking values (keys with words like KEY, SECRET, TOKEN or PASSWORD, and passwords inside connection URLs). It is called <code>dotenvlens.maskSecrets</code>, and it is off by default.</p> <p>The extension only reads local files. It makes no network calls.</p> <h2> Compare .env with your template </h2> <p>The first feature I built was a comparison. Right-click a <code>.env</code> file (or use the command palette) and run <strong>DotEnv Lens: Compare .env with template</strong>. It tells you which keys are missing, extra, empty or duplicated compared with <code>.env.example</code>. The report shows key names only, never values.</p> <h2> How it is built </h2> <p>The parser and the comparison logic are plain TypeScript with no VS Code dependency, so they are unit tested on their own (79 tests so far). The VS Code part is a thin layer on top. The parser handles comments, quoted values, <code>export</code> prefixes, values with <code>=</code> inside, and duplicate keys.</p> <h2> Try it </h2> <p>Search for "DotEnv Lens" in the VS Code Extensions panel, or install it from the <a href="https://marketplace.visualstudio.com/items?itemName=venkatarohithpesala.dotenv-lens" rel="noopener noreferrer">VS Code Marketplace</a>.</p> <p>The source code is on <a href="https://github.com/venkatarohithpesala/dotenv-lens" rel="noopener noreferrer">GitHub</a>.</p> <h2> What should I build next? </h2> <p>I am thinking about jump to definition, autocomplete for env keys, and Vite and Python support. Which one would you use? Tell me in the comments.</p> vscode javascript typescript productivity