Issue #92  (Timeline Panel)01/24/24

Advertisement
Techpresso: Get Smarter About AI and Tech in 5 mins

Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets.

Techpresso

Also includes a good dose of tech tools and programming-related apps and resources. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more.


At the bottom of VS Code's file Explorer, there's the handy Timeline panel that allows you to view a history of changes for any particular file.
 
Timeline of unde/redo in VS Code

You can look through the timeline of changes and go back to an older state. And this is in place even if you don't have any kind of version control enabled for the project.

But unlike standard undo/redo features in most native apps in your operating system, this timeline of changes will persist even if you happen to close a file. For example, what if you accidentally close a file but then want to go back into the timeline of changes before you closed it. Well, it's still there!

Or maybe you've exceeded the maximum number of currently open editors. By default, VS Code allows 10 open editors, but you can change that value using the workbench.editor.limit.value setting, as shown below:
 
Limit Editors in VS Code

If you happen to have that value set at a low number like 4, any new editor you open will replace an existing one, to maintain just 4 open editors. This means you'll have inadvertently closed an open editor. But not a problem, as the timeline will persist even when a file is accidentally closed.

One final thing I'll mention: If you are using the above mentioned setting to limit the number of editors open, you might notice it seems to have no effect on its own. In order for it to work you have to  turn on the workbench.editor.limit.enabled setting as well:
 
Editor Limit Enabled Setting in VS Code

So make sure that's checked, then you can limit the number of editors while benefiting from the persistent timeline history for file changes.

Now on to this week's hand-picked links!
 

VS Code Tools

T3 Stack / Next.js / React File Generator — A VS Code extension to generate files for a T3 Stack project (which includes Next.js, React, Prisma, Drizzle, Tailwind, i18next, Zod, and more.

Vigma RN — A Figma-like VS Code extension, but with real-time code generation for React Native (Expo), currently in open beta.

Miro — Miro’s mind map maker is the quickest, easiest way for teams to capture, organize, and map out their ideas in a structured way.  Sponsor 

VSCode Dimmer — A VS Code extension that dims text outside of selections by reducing the opacity of the text, useful for screencasts, presentation, etc.


VS Code Theme of the Week

Tokyo Night — A clean VS Code theme that "celebrates the lights of Downtown Tokyo at night." Includes three variations, two dark and one light.

Tokyo Night Theme for VS Code

As the docs point out, there are some low contrast issues in certain UI elements that you might prefer changed. But besides that, this is a very nice pair of dark themes.

VS Code Articles & Videos

Make VS Code Automatically Run Your Project Startup Commands When You Open That Project’s Folder — A nice tip that discusses the Tasks feature in VS Code, which incorporates a tasks.json file in your project's root folder.

Using Abbreviations for Long CSS properties in VS Code — This is more of a beginner's tip, as it uses the commonly known Emmet feature built-into VS Code.

The Morning Paper for Hacker News Readers — Want a byte-sized version of Hacker News that takes just a few minutes to read? TLDR's free daily newsletter covers the most interesting tech, startup, and programming stories in under 5 minutes.  Sponsor 

My VS Code Monaspace Font Setup — If you're thinking of incorporating GitHub's new font family into VS Code, you might benefit from Roma Komarov's tips here.

Best of the Rest

ogre.run — An AI-based code dependency hypervisor, that ensures you can run your code anywhere.

ptext — A nano-like text editor built with pure C.

📺 JetBrains JavaScript Day 2023 — A YouTube playlist for a recent event held by the JetBrains team that was a free virtual event about modern JavaScript and TypeScript development.

Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris
Copyright © VSCode.Email. All rights reserved.

Not affiliated with Microsoft, Visual Studio Code, or any of its trademarks.