Syntax Highlighting for yarn.lock Files in Visual Studio Code
I recently noticed that Visual Studio Code doesn't provide syntax highlighting for yarn.lock files out of the box. Granted, I don't generally spend a lot of time reading these lockfiles. Nevertheless, I thought colorization would be helpful when looking for a particular package name or version.
If you thought to yourself that this would be the perfect use case for a custom extension for Visual Studio Code, you would be right! Fast forward a couple of hours and I had built the first version of the Syntax Highlighting for yarn.lock Files extension and published it to the Visual Studio Marketplace. It provides colorization for the following:
- Package names
- Package versions
- Keywords
- URLs
- Integrity hashes
- Comments
Just like any other extension, you can install it from within Visual Studio Code by heading over to the Extensions view and searching for "yarn syntax". If you're curious about the code, feel free to take a look at my vscode-yarn_lock_syntax repo on GitHub.
#Demo
Here's what a yarn.lock file looks like when it is highlighted using the Atom One Light theme:
And this is Dracula:
And finally, Monokai:
#Building Extensions for Visual Studio Code
If you want to build your own extension for Visual Studio Code, check out the Extension Authoring section of the official documentation. The Themes, Snippets and Colorizers subsection walks you through all the steps necessary to create your own colorizer. It is well-written and allows you to get started in a matter of minutes.