Added additional settings.

package.json

@@ -186,6 +186,22 @@
 					"type": "boolean",
 					"default": true,
 					"description": "Show the tenant-wide extensions in the account view."
+				},
+				"spfx-toolkit.createNodeVersionFileDefaultValue": {
+					"title": "Default value for the Node version file option",
+					"type": "boolean",
+					"default": "false",
+					"description": "The default value for the new project's setting for creating the Node version file. If checked the default selected value will be YES."
+				},
+				"spfx-toolkit.nodeVersionManagerFile": {
+					"title": "Node version manager file to be used",
+					"type": "string",
+					"default": ".nvmrc",
+					"enum": [
+						".nvmrc",
+						".node-version"
+					],
+					"description": "The file to be used to store the Node version for the selected Node version manager. Remember that the .node-version file is supported only while using nvs."
 				}
 			}
 		},

src/constants/ProjectFileContent.ts

@@ -5,4 +5,6 @@ export enum ProjectFileContent {
   installReusablePropertyPaneControls = 'install-spfx-property-controls',
   installReusableReactControls = 'install-spfx-controls-react',
   installPnPJs = 'install-pnpjs',
+	createNVMRCFile = 'create-nvmrc-file',
+	createNodeVersionFile = 'create-node-version-file',
 }

src/constants/WebviewCommand.ts

@@ -5,6 +5,11 @@ export const WebviewCommand = {
     folderPath: 'folder-path',
     validateSolutionName: 'validate-solution-name',
     validateComponentName: 'validate-component-name',
+		createNodeVersionFileDefaultValue: 'should-create-node-version-file',
+		nodeVersionManager: 'node-version-manager',
+		nodeVersionManagerFile: 'node-version-manager-file',
+		createNVMRCFile: 'create-nvmrc-file',
+		createNodeVersionManagerFile: 'node-version-manager-file',
   },
   toVSCode: {
     useSample: 'use-sample',
@@ -17,5 +22,10 @@ export const WebviewCommand = {
     validateComponentName: 'validate-component-name',
     addSpfxComponent: 'add-spfx-component',
     createAppReg: 'create-app-reg',
+		createNodeVersionFileDefaultValue: 'should-create-node-version-file',
+		nodeVersionManager: 'node-version-manager',
+		nodeVersionManagerFile: 'node-version-manager-file',
+		createNVMRCFile: 'create-nvmrc-file',
+		createNodeVersionManagerFile: 'node-version-manager-file',
   }
 };

src/extension.ts

@@ -63,6 +63,18 @@ export async function activate(context: vscode.ExtensionContext) {
 				if (fileContents.indexOf(ProjectFileContent.installPnPJs) > -1) {
 					await TerminalCommandExecuter.runCommand('npm install @pnp/sp @pnp/graph --save', [], terminalTitle, terminalIcon);
 				}
+
+				// If either of the following strings are found in the project file, run the command to get the node version
+				if (fileContents.indexOf(ProjectFileContent.createNVMRCFile) > -1 || fileContents.indexOf(ProjectFileContent.createNodeVersionFile) > -1) {
+					let nodeVersionCommand = 'node --version > ';
+					if (fileContents.indexOf(ProjectFileContent.createNVMRCFile) > -1) {
+						nodeVersionCommand += '.nvmrc';
+					}
+					else if (fileContents.indexOf(ProjectFileContent.createNodeVersionFile) > -1) {
+						nodeVersionCommand += '.node-version';
+					}
+					await TerminalCommandExecuter.runCommand(nodeVersionCommand, [], 'Creating Node version configuration file');
+				}
 			}
 		}
 	});

src/models/SpfxScaffoldCommandInput.ts

@@ -8,4 +8,7 @@ export interface SpfxScaffoldCommandInput extends SpfxAddComponentCommandInput {
   shouldInstallReusablePropertyPaneControls: boolean;
   shouldInstallReusableReactControls: boolean;
   shouldInstallPnPJs: boolean;
+  shouldCreateNodeVersionFile: boolean;
+  nodeVersionManagerFile: '.nvmrc' | '.node-version';
+  nodeVersionManager: 'nvm' | 'nvs' | 'none';
 }

src/services/actions/Scaffolder.ts

@@ -11,7 +11,7 @@ import * as glob from 'fast-glob';
 import { Extension } from '../dataType/Extension';
 import download from 'github-directory-downloader/esm';
 import { CliExecuter } from '../executeWrappers/CliCommandExecuter';
-import { getPlatform } from '../../utils';
+import { getExtensionSettings, getPlatform } from '../../utils';
 import { PnPWebview } from '../../webview/PnPWebview';
 import { Executer } from '../executeWrappers/CommandExecuter';
 import { TeamsToolkitIntegration } from '../dataType/TeamsToolkitIntegration';
@@ -147,6 +147,45 @@ export class Scaffolder {
     PnPWebview.postMessage(WebviewCommand.toWebview.validateComponentName, true);
   }
 
+  /**
+	 * Returns the value of the createNodeVersionFileDefaultValue setting and sends it to the webview.
+	 */
+	public static async createNodeVersionFileDefaultValue() {
+		const value = getExtensionSettings<boolean>(
+			'createNodeVersionFileDefaultValue',
+			false
+		);
+
+		PnPWebview.postMessage(
+			WebviewCommand.toWebview.createNodeVersionFileDefaultValue,
+			value
+		);
+	}
+
+	/**
+	 * Returns the value of the nodeVersionManagerFile setting and sends it to the webview.
+	 */
+	public static async nodeVersionManagerFile() {
+		const value = getExtensionSettings<string>('nodeVersionManagerFile', false);
+
+		PnPWebview.postMessage(
+			WebviewCommand.toWebview.createNodeVersionManagerFile,
+			value
+		);
+	}
+
+	/**
+	 * Returns the value of the nodeVersionManager setting and sends it to the webview.
+	 */
+	public static async nodeVersionManager() {
+		const value = getExtensionSettings<string>('nodeVersionManager', false);
+
+		PnPWebview.postMessage(
+			WebviewCommand.toWebview.nodeVersionManager,
+			value
+		);
+	}
+
   /**
    * Scaffold method for creating a new project.
    * @param input - The input for the scaffold command.
@@ -225,6 +264,29 @@ export class Scaffolder {
             content += ` ${ProjectFileContent.installPnPJs}`;
           }
 
+          if (newSolutionInput.shouldCreateNodeVersionFile) {
+            switch (newSolutionInput.nodeVersionManager) {
+              case 'nvm':
+                // If the node version manager is nvm, create the .nvmrc file even if the user has selected .node-version
+                content += ` ${ProjectFileContent.createNVMRCFile}`;
+                break;
+              case 'nvs':
+                // If the node version manager is nvs, create the file based on the user's settings
+                switch (newSolutionInput.nodeVersionManagerFile) {
+                  case '.nvmrc':
+                    content += ` ${ProjectFileContent.createNVMRCFile}`;
+                    break;
+                  case '.node-version':
+                    content += ` ${ProjectFileContent.createNodeVersionFile}`;
+                    break;
+                }
+                break;
+                case 'none':
+                // If the node version manager is none, do not create any file
+                break;
+							}
+						}
+
           Scaffolder.createProjectFileAndOpen(newFolderPath, content);
         } else {
           PnPWebview.close();

src/webview/PnPWebview.ts

@@ -156,6 +156,15 @@ export class PnPWebview {
         case WebviewCommand.toVSCode.createAppReg:
           EntraAppRegistration.createEntraAppRegistration();
           break;
+				case WebviewCommand.toVSCode.createNodeVersionFileDefaultValue:
+					Scaffolder.createNodeVersionFileDefaultValue();
+					break;
+				case WebviewCommand.toVSCode.nodeVersionManagerFile:
+					Scaffolder.nodeVersionManagerFile();
+					break;
+				case WebviewCommand.toVSCode.nodeVersionManager:
+					Scaffolder.nodeVersionManager();
+					break;
       }
     });
   }

src/webview/view/components/forms/spfxProject/AdditionalStep.tsx

@@ -2,7 +2,8 @@ import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { StepHeader } from './StepHeader';
 import { PackageSelector } from './PackageSelector';
-
+import { WebviewCommand } from '../../../../../constants';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 interface AdditionalStepProps {
     shouldRunInit: boolean;
@@ -13,6 +14,11 @@ interface AdditionalStepProps {
     setShouldInstallReusableReactControls: (value: boolean) => void;
     shouldInstallPnPJs: boolean;
     setShouldInstallPnPJs: (value: boolean) => void;
+    shouldCreateNodeVersionFile: boolean;
+    setShouldCreateNodeVersionFile: (value: boolean) => void;
+    nodeVersionManager: 'nvm' | 'nvs' | 'none';
+    setNodeVersionManager: (value: 'nvm' | 'nvs' | 'none') => void;
+    setNodeVersionManagerFile: (value: '.nvmrc' | '.node-version') => void;
 }
 
 export const AdditionalStep: React.FunctionComponent<AdditionalStepProps> = ({
@@ -23,7 +29,64 @@ export const AdditionalStep: React.FunctionComponent<AdditionalStepProps> = ({
     shouldInstallReusableReactControls,
     setShouldInstallReusableReactControls,
     shouldInstallPnPJs,
-    setShouldInstallPnPJs }: React.PropsWithChildren<AdditionalStepProps>) => {
+    setShouldInstallPnPJs,
+    shouldCreateNodeVersionFile,
+    setShouldCreateNodeVersionFile,
+    setNodeVersionManagerFile,
+    nodeVersionManager,
+    setNodeVersionManager
+}: React.PropsWithChildren<AdditionalStepProps>) => {
+    // Send a message to retrieve the default value for the create node version file
+    const getCreateNodeVersionFileDefaultValue = React.useCallback(() => {
+        Messenger.send(WebviewCommand.toVSCode.createNodeVersionFileDefaultValue, {});
+    }, []);
+
+    // Send a message to retrieve the node version manager file
+    const getNodeVersionManagerFile = React.useCallback(() => {
+        Messenger.send(WebviewCommand.toVSCode.nodeVersionManagerFile, {});
+    }, []);
+
+    // Send a message to retrieve the node version manager
+    const getNodeVersionManager = React.useCallback(() => {
+        Messenger.send(WebviewCommand.toVSCode.nodeVersionManager, {});
+    }, []);
+
+    // Listen for the response to the message/s
+    React.useEffect(() => {
+        const messageListener = (event: MessageEvent<any>) => {
+            const { command, payload } = event.data;
+            switch (command) {
+                case WebviewCommand.toWebview.nodeVersionManager:
+                    setNodeVersionManager(payload);
+                    break;
+                case WebviewCommand.toWebview.nodeVersionManagerFile:
+                    setNodeVersionManagerFile(payload);
+                    break;
+                case WebviewCommand.toWebview.createNodeVersionFileDefaultValue:
+                    setShouldCreateNodeVersionFile(payload);
+                    break;
+                default:
+                    break;
+            }
+        };
+
+        Messenger.listen(messageListener);
+
+        return () => {
+            Messenger.unlisten(messageListener);
+        };
+    }, [setNodeVersionManager, setNodeVersionManagerFile, setShouldCreateNodeVersionFile]);
+
+    // Sends the requests to load the settings values only once
+    React.useEffect(() => {
+        // Get the default value for the create node version file
+        getCreateNodeVersionFileDefaultValue();
+        // Get the node version manager
+        getNodeVersionManager();
+        // Get the node version manager file
+        getNodeVersionManagerFile();
+    }, []);
+
     return (
         <div className={'spfx__form__step'}>
             <StepHeader step={3} title='Additional steps' />
@@ -50,6 +113,12 @@ export const AdditionalStep: React.FunctionComponent<AdditionalStepProps> = ({
                     setValue={setShouldInstallPnPJs}
                     label='Install PnPjs (@pnp/sp, @pnp/graph)'
                     link='https://pnp.github.io/pnpjs/' />
+
+                {nodeVersionManager !== 'none' &&
+                <PackageSelector
+                    value={shouldCreateNodeVersionFile}
+                    setValue={setShouldCreateNodeVersionFile}
+                    label='Create node version manager configuration file' />}
             </div>
         </div>
     );

src/webview/view/components/forms/spfxProject/ScaffoldSpfxProjectView.tsx

@@ -26,6 +26,9 @@ export const ScaffoldSpfxProjectView: React.FunctionComponent<IScaffoldSpfxProje
   const [shouldInstallReusablePropertyPaneControls, setShouldInstallReusablePropertyPaneControls] = useState<boolean>(false);
   const [shouldInstallReusableReactControls, setShouldInstallReusableReactControls] = useState<boolean>(false);
   const [shouldInstallPnPJs, setShouldInstallPnPJs] = useState<boolean>(false);
+  const [shouldCreateNodeVersionFile, setShouldCreateNodeVersionFile] = useState<boolean>(false);
+  const [nodeVersionManager, setNodeVersionManager] = useState<'nvm' | 'nvs' | 'none'>('nvm');
+  const [nodeVersionManagerFile, setNodeVersionManagerFile] = useState<'.nvmrc' | '.node-version'>('.nvmrc');
   const location: any = useLocation();
 
   useEffect(() => {
@@ -78,7 +81,10 @@ export const ScaffoldSpfxProjectView: React.FunctionComponent<IScaffoldSpfxProje
         shouldRunInit,
         shouldInstallReusablePropertyPaneControls,
         shouldInstallReusableReactControls,
-        shouldInstallPnPJs
+        shouldInstallPnPJs,
+        shouldCreateNodeVersionFile,
+        nodeVersionManagerFile,
+        nodeVersionManager
       } as SpfxScaffoldCommandInput);
     }
   };
@@ -124,6 +130,11 @@ export const ScaffoldSpfxProjectView: React.FunctionComponent<IScaffoldSpfxProje
             setShouldInstallReusableReactControls={setShouldInstallReusableReactControls}
             shouldInstallPnPJs={shouldInstallPnPJs}
             setShouldInstallPnPJs={setShouldInstallPnPJs}
+            shouldCreateNodeVersionFile={shouldCreateNodeVersionFile}
+            setShouldCreateNodeVersionFile={setShouldCreateNodeVersionFile}
+            setNodeVersionManagerFile={setNodeVersionManagerFile}
+            setNodeVersionManager={setNodeVersionManager}
+            nodeVersionManager={nodeVersionManager}
           />
         }
       </div>