New File Template

Create new file or folders from a custom Template.

Preview

Usage

• Create a folder inside ./vscode/Templates. Ex: ./vscode/Templates/MyTemplate
• Create a new file or folder inside the ./vscode/Templates/MyTemplate folder. Ex: ./vscode/Templates/MyTemplate/${input.componentName}/${input.fileName}.ts
• Now right click any file folder where you want generate the file from template and click New File From Template
• This will prompt you to pick a template name and needed variables like ${input.componentName}, ${input.fileName}
• Once all the inputs are given, this will generate you a new file from the selected template.

Helper String Methods

Use helper case methods to convert any variable to the defined case. Ex: ${_toPascalCase(componentName)}

Predefined Variables

• ${userHome} - process.env.HOME - /home/your-username
• ${workspaceFolder} - Active vscode workspace folder - /home/your-username/your-project
• *${cwd}* - alias ${workspaceFolder} - /home/your-username/your-project
• ${workspaceFolderBasename} - your-project
• ${file} - /home/your-username/your-project/folder/file.ext
• ${relativeFile} - folder/file.ext
• ${relativeFileDirname} - folder
• ${fileBasename} - file.ext
• ${fileBasenameNoExtension} - file
• ${fileDirname} - /home/your-username/your-project/folder
• ${fileExtname} - .ext
• ${outputDir} - /home/your-username/your-project/output-folder
• ${outputDirBasename} - output-folder
• ${relativeOutputDir} - /your-project/output-folder
• ${outputFile} - /home/your-username/your-project/output-folder/output-file.ext
• ${relativeOutputFile} - /your-project/output-folder/output-file.ext
• ${outputFileBasename} - output-file.ext
• ${outputFileBasenameNoExtension} - output-file
• ${outputFileExtname} - .ext

Dynamic Input

• ${input.componentName} -> This prompts the user for componentName if the value of the componentName is not present.
• ${input.fileName} -> This will not prompt the user as the value was predefined in the _config.json -> input.fileName.
• ${componentName}, ${fileName}${ext} -> any input variables can also be directly accessed.
• ${componentName_toPascalCase} ${componentName_toCamelCase} -> any input variables can be converted to the given case.

Package JSON

Access package.json located at the root of the workspace folder.

• ${package.version || 'v1.0.0'}

Variables

• ${variables.foobar}
• ${variables.lorem}
• ${variables.user.name}

Node global variables

• ${process.env.USERNAME}
• ${process.env.NODE_ENV || 'development'}
• ${Date.now()}
• ${new Date().toLocaleDateString('en-GB').replace(/\//g, '-')}
• ${Math.random()}
• ${__dirname}
• ${__filename}

Template Configuration

• Each Template folder can have an optional file called _config.json.
• Using this file we cam allocate a predefined variables, input description and options for a specific templates.

Example: Here is the example config file _config.json

{
  // These variables can be accessed as ${variables.foobar}, ${variables.user.name} ...
  "variables": {
    "foobar": "$fooBar jazQux$",
    "lorem": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
    "user": { "name": "r35007" }
  },
  // These inputs can be accessed as ${input.componentName} or ${componentName}
  "input": {
    "foobar": "foo bar", // predefined value for ${input.foobar} or ${foobar}. This will not prompt the user input
    "lorem": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
    "fileName": "index",
    "ext": {
      "title": "Extension", // Title of the Quick Pick. If not provided it shows the variable name in Title case. Ex: Ext
      "placeHolder": "Please select the file Extension", // description of the input
      // If options are given then it will prompt a quick pick
      "options": [
        { "label": ".tsx", "description": "Typescript React", "value": ".tsx", "picked": true },
        { "label": ".ts", "description": "Typescript", "value": ".ts" },
        { "label": ".jsx", "description": "Javascript React", "value": ".jsx" },
        { "label": ".js", "description": "Javascript", "value": ".js" }
      ] // or "options": [".js", ".jsx", ".ts", ".tsx"]
    },
    "componentName": {
      "value": "AppComponent", // Set a pre filled value for the componentName variable prompt
      "promptAlways": false, // Set to true to always prompts the user input even if file or folder  doesn't contains the text ${input.<user variable>}
      "placeHolder": "Please provide a componentName in pascal case",
      // custom validator. return a error string if validation fails else return an empty string to proceed
      "validator": "${value?.trim().length >= 5 ? '' : 'Please Enter a minimum 5 characters'}", // will be validated on change
      // This will be invoked after the user enters the input. Here we can add prefix or suffix or return any default value
      // In this example I have just converted the value into _toPascalCase
      "afterInput": "${value?.trim().length ? _toPascalCase(value) : ''}" // or "afterInput": "prefix-${value}-suffix"
    }
  }
}