render() method’s indentation is all messed up like this?
This is frustrating, but it’s very easy to fix.
The Yeoman generator for SharePoint is a globally installed NPM package. When you execute yo @microsoft/sharepoint, after answering a few question prompts, the Yeoman uses template files to generate the new web part file.
It seems someone screwed up the indentation formatting & didn’t catch it before publishing the most recent generator so now, every time you create a new web part, this is what you get.
While Microsoft will likely fix this when they publish a new version of the generator until then you’re left with these ugly
Thankfully, it’s pretty easy to fix this… and in this post, I’ll show you how. It involves updating the templates in the generator.
In the future, when Microsoft publishes a new version of the SPFx generator, all your changes will be replaced with the new generator’s changes. This means you can think of this as a temporary change until Microsoft cleans up the default code created for a web part in a future version of the Yeoman generator for SharePoint.
The first step is to locate the folder on your environment where the Yeoman generator for SharePoint is installed. All NPM packages globally installed on your machine are placed in a centralized location.
An easy way to determine the location is to execute the NPM help command: npm -h. At the bottom of the help, the last line of the output will contain a path to where NPM is globally installed.
On my laptop, NPM is installed at the following location: /Users/ac/.nvm/versions/node/v10.19.0/lib/node_modules/npm. The location on your machine will be different based on two factors:
- Your operating system: Windows/MacOS/Linux
- If you installed Node.js with an installer or are using a tool like the Node Version Manager (NVM) like I am (read more why I love NVM)
Take the path reported by NPM and remove npm from the end. The node_modules folder is where all packages are globally installed. The Yeoman generator for SharePoint is in the @microsoft/generator-sharepoint subfolder in there. So, on my laptop, I’m looking for this path: /Users/ac/.nvm/versions/node/v10.19.0/lib/node_modules/@microsoft/generator-sharepoint.
render() method in that file to look like the following:
Save your changes to the file & test it. Simply create a new project using the generator and you’ll see the updated code template applied.