If you’re an SPFx developer who uses Visual Studio Code, you may have noticed that the JSON files that the Yeoman generator creates contain comments to help you understand how to configure your manifest.
The only problem is: JSON files aren’t supposed to have comments. And Visual Studio Code likes to remind you of that when it sees comments in a JSON file.
For example, when you open the manifest for your brand new SPFx web part, you’ll find these nasty error messages:
An example of schema validation errors caused by comments
I’m one of those people who can’t stand any validation errors or warnings. I know, I know, I’m weird. But it drives me insane!!!
Luckily, Paul Schaeflein has a solution that he Tweeted this morning:
Tired of the squigglies in the SPFx configuration files? Add this to your Workspace settings (.vscodesettings.json):
— Paul Schaeflein (@paulschaeflein) August 12, 2020
In this super-quick post, I’ll show how to configure your Visual Studio Code to stop showing validation errors for comments in JSON files.
Paul Schaeflein deserves all the credit for this. I’m just giving you step-by-step instructions.
From Visual Studio Code, follow these steps:
That’s it! Now you should be able to go to your manifest file and enjoy the squiggle-less JSON with comments!
Ahhh, no more schema validation errors!
Few people know that if you save your .JSON file as a .JSONC file, you won’t get validation errors. That’s because .JSONC stands for “JSON with comments”.
However, you can’t rename your schema files in an SPFx solution to .JSONC because SPFx expects .JSON files — not .JSONC.
Paul’s “hack” simply associates .JSON files with the .JSONC schema. That way, Visual Studio Code treats every .JSON file as a .JSONC — regardless of the extension.
Thanks Paul Schaeflein for this tip! You may have saved my sanity!