Issue #43  (package.json Features)02/15/23

Here are a couple of quick tips on using package.json files. I'm sure many of you use package.json files in some way and often they "just work" without needing to do a whole lot with them.

If you're somewhat unfamiliar with the different parts of a package.json file, VS Code allows you to display a tooltip for most of the properties (or keys) that appear in the file. Below is an example where I'm hovering my mouse over the "devDependencies" key in a package.json file.
   
Here's another example, this time showing info for the "scripts" key:
 
You can also do the same for packages listed as values in package.json. When you hover over any package name, you'll notice some small "Loading..." text appear. After a few moments, you'll get some info in a tooltip on the package:
 
This can be useful if you're using a package with lots of dependencies, allowing you to get a brief overview of what each one does.

And one last thing I'll mention is the useful "npm Scripts" explorer that's available in VS Code's sidebar. This feature was previously enabled via your VS Code settings, but now it's fully integrated into the "Views and More Actions..." menu found at the top right area of your sidebar:
 
Once enabled, the "npm Scripts" explorer will display a list view of all the packages and dependencies in your package.json file, with options to run and debug any of the packages or modules shown.
 

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

VS Code Tools

MDX — A VS Code extension that adds support for MDX (Markdown + JSX) in VS Code.

Rainbow CSV — A VS Code extension that adds syntax highlighting to CSV and TSV files and lets you run SQL-like queries on tables.

soft sight — A VS Code theme that feels soft and pleasant to the eyes, with support for HTML, CSS, JSON, JavaScript, TypeScript, JSX, Go, PHP, Ruby, and Python.

vscode-jest — A VS Code extension that adds support for full Jest features and should work out-of-the-box for most common Jest projects.
 

VS Code Articles & Videos

Running Multiple ASP.NET Core Projects in VS Code at Once — Even if you're not a .NET developer, you might find this useful as it discusses a feature in VS Code called "compounds", found in your launch.json file.

▶ Collapse All Sidebar Folders — A quick YouTube short, in case you weren't aware of the button that allows you to collapse all folders in a project with a single click.

Advanced React — A premium training course consisting of 70+ HD videos across 11 course modules, to learn to build modern, full-stack React and GraphQL apps.   Sponsor 

How To Get Started with VS Code Development Containers — An extensive article from about a year ago that goes in depth on how you can leverage containers and host each VS Code project inside a fully isolated environment.
 

Best of the Rest

peek.nvim — A Markdown preview plugin for Neovim that includes live update, synchronized scrolling, TeX math support, and more.

ChatGPT for Jupyter — A browser extension, powered by ChatGPT, that provides various helper functions in Jupyter Notebooks and Jupyter Lab.

vite-plugin-vue-inspector — A Vite plugin that lets you click an element in the browser and it will jump to that line in your local IDE.

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