Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Huuums/vscode-folder-templates
Create your own Component structure with a simple click.
https://github.com/Huuums/vscode-folder-templates
Last synced: about 8 hours ago
JSON representation
Create your own Component structure with a simple click.
- Host: GitHub
- URL: https://github.com/Huuums/vscode-folder-templates
- Owner: Huuums
- License: mit
- Created: 2019-08-15T23:09:43.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-07T01:57:20.000Z (4 months ago)
- Last Synced: 2024-08-03T21:04:27.369Z (3 months ago)
- Language: TypeScript
- Size: 891 KB
- Stars: 207
- Watchers: 2
- Forks: 32
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - Huuums/vscode-folder-templates - Create your own Component structure with a simple click. (TypeScript)
README
# VS-Code Folder Templates
### What is this and why
VS-Code Folder Templates is an extension that creates your folders/files as specified in custom templates.
Why? Because creating the same directories over and over again is annoying to do manually.
### Features
- Create Templates for folder structures and files and then let the extension do the rest.
- Spend your time actually programming and not creating files.
## Templating
To create your templates you have two options.
1. Create templates on your File System
2. Go into your `settings.json` from VSCode and create templates [manually](#template-format). (Open the command palette and select "Open Settings (JSON)" to easily access your settings.json)
### Interpolation
The value `` (or `[FTName]`) will always be interpolated into the component name you are asked for when creating the structure.
Adding a transformer with this pattern `` (or ``) will give you the ability to transform your componentname wherever needed.
The currently supported transformers are:
- `lowercase`
- `uppercase`
- `camelcase`
- `capitalcase`
- `constantcase`
- `dotcase`
- `headercase`
- `nocase`
- `paramcase`
- `pascalcase`
- `pathcase`
- `sentencecase`
- `snakecase`
- `singular`
- `plural`
- `lowercasefirstchar`
- `capitalize`
- `kebabcase`
It is possible to specify a set of custom Variables which will be interpolated as well. You will be asked to enter a value for every custom variable defined. They can be transformed the same way as the default ``
Examples
| Input | Transformer | Result | Description |
| ---------------- | -------------------------------------------| ---------------- | ----------------------------------------------------------------------------------------------------------------|
| LOWERCASE | \ | lowercase ||
| uppercase | \ | UPPERCASE ||
| My-new-component | \ | myNewComponent | (First letter is lowercased. Every letter behind a special character will be capitalized) |
| test string | \ | Test String ||
| test string | \ | TEST_STRING ||
| test string | \ | test.string ||
| test string | \ | Test-String ||
| test string | \ | test string ||
| test string | \ | test-string ||
| my-new-component | \ | MyNewComponent | (First letter and every letter behind a special character will be capitalized) |
| test string | \ | test/string ||
| test string | \ | Test string ||
| test string | \ | test_string ||
| boxes | \ | box ||
| box | \ | boxes ||
| wooden box | \ | WOODEN_BOXES | it is possible to combine transformations with the "?" or "&" operator, these will be performed from left to right. |
| wooden box | \[FTName \% plural&snakecase&uppercase\] | WOODEN_BOXES | "&" operator example of row above |
| MyNewComponent | \ | myNewComponent ||
| myNewComponent | \ | MyNewComponent | just like capitalcase|
| myNewComponent | \ | my-new-component | just like paramcase|
| aaa | \ | baa | IMPORTANT: Due to filesystem limitations (thanks Windows) only single quotes (`'`) will work to annotate the string in the replacefirst function.|
| aaa | \ | aab | IMPORTANT: Due to filesystem limitations (thanks Windows) only single quotes (`'`) will work to annotate the string in the replacelast function.|
| aaa | \ | bbb | IMPORTANT: Due to filesystem limitations (thanks Windows) only single quotes (`'`) will work to annotate the string in the replace function.|
### Date values
As of v3.12.0 it is possible to add dates to a file name or its content. However it will only be possible to add the current time in your local time zone or UTC. The way to achieve this is by using the placeholder `\[DATE_NOW(FORMATSTRING)\]` for local timezone or `\[DATE_NOW_UTC(FORMATSTRING)\]` for UTC time.
As an example `[DATE_NOW('yyyy-mm-dd')]` will result in `2024-03-04`. Please take a look at this [https://date-fns.org/v2.30.0/docs/format](https://date-fns.org/v2.30.0/docs/format) documentation to see all the available formatting patterns.
### Thanks to the change-case and pluralize libraries, for the transformations
- [https://github.com/blakeembrey/change-case](https://github.com/blakeembrey/change-case)
- [https://www.npmjs.com/package/pluralize](https://www.npmjs.com/package/pluralize)
## Creating templates on the File System
One option is to create a `.fttemplates` folder in your project root and save all templates you want to access in this project there. This path can be changed via the `folderTemplates.templateFolderPath` setting in your vscode settings.
To use global templates over multiple projects use the `Set Custom Global Folder Templates Directory` command to choose a folder which functions as a global `.fttemplates` directory.
**DEPRECATED**: You can also use the global template folder that exists in the directory of this extension.
Create a folder with files and folders inside your template directory and use placeholders wherever you need them. That's it. You created your template. It works out of the box but if you need some special settings for a template you can create a `.ftsettings.json` file inside your template folder.
See more in the [examples](https://github.com/Huuums/vscode-folder-templates/tree/master/examples)
### folderTemplates.templateFolderPath
This setting is used to deviate from the default `.fttemplates` folder path at the root of your project folder. If this setting is set then Folder Templates will look for your templates at the specified path (relative to your project root)
- Default `.fttemplates`
### Available .ftsettings.json Properties
| Key | Type | Default | Description |
|------------------------|---------------------------------------|---------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| name | string | Name of parent folder | Name of the folder Template |
| customVariables | string[] `variableName=>defaultvalue` | - | Custom variables to be interpolated upon folder creation |
| omitParentDirectory | boolean | false | If set to true FT will create all files directly inside the current folder instead of creating a new folder and all the files inside of it. |
| omitFTName | boolean | false | If set to true FT will not ask for a component name. (Can only be set to true if omitParentDirectory is true as well) |
| overwriteExistingFiles | "never" \| "always" \| "prompt" | "never" | If set to always all existing files will be overwritten. If set to prompt user will be asked which files shall be overwritten upon foldercreation. |
| openFilesWhenDone | string[] | - | List of files to open when the Folder Template is created. (Supports use of variables, see examples) |
| setExecutablePermission| boolean | false | If set to true automatically adds executable permission to created file. Only works if file in the template is also executable.|
| absolutePath | boolean | false | If set to true all files will be created relative to the project root. Not relative to the folder you clicked on. (Can only be set to true if omitParentDirectory is true as well) |
| templateNotation | {start: string[], end: string[]} | `{start: ["<","["], end: [">", "]"]}` | If you would like to customize how to annotate strings that should be interpolated use this option |
| ignoreFiles | string[] | [] | This option takes an array of globs to define which files should not be created by the extension |
## Creating your Template in VS Code settings.json {#template-format}
There are two key parts to creating your FT Templates. [Folder Structures](#foldertemplatestructures) and [File Templates](#filetemplates).
### folderTemplates.structures {#foldertemplatestructures}
The `folderTemplates.structures` option takes an `array of objects` where one object equals one Folder Structure.
Example Structure
```json
{
"name": "My Custom Template",
"customVariables": ["CustomVar", "CustomVar2"],
"omitParentDirectory": true,
"structure": [
{
"fileName": ".jsx",
"template": "Typescript Functional Component"
},
{
"fileName": "tests/.test.js"
},
{
"fileName": "index.js",
"template": "IndexFile"
},
{
"fileName": "bashfile.sh",
"template": "echo \"Hello World\"",
"isExecutable": true
},
{
"fileName": "",
"template": "EmptyDirectory"
}
]
}
```
| Key | Type | Default | Description |
|------------------------|-----------------------------------------|---------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| name | string | Name of parent folder | Name of the folder Template |
| customVariables | string[] `variableName=>defaultvalue` | - | Custom variables to be interpolated upon folder creation |
| structure | {fileName: string, template?: string}[] | - |Every object in this array represents a File or Folder that will be created |
| omitParentDirectory | boolean | false | If set to true FT will create all files directly inside the current folder instead of creating a new folder and all the files inside of it. |
| omitFTName | boolean | false | If set to true FT will not ask for a component name. (Can only be set to true if omitParentDirectory is true as well) |
| overwriteExistingFiles | "never" \| "always" \| "prompt" | "never" | If set to always all existing files will be overwritten. If set to prompt user will be asked which files shall be overwritten upon foldercreation. |
| openFilesWhenDone | string[] | - | List of files to open when the Folder Template is created. (Supports use of variables, see examples) |
| setExecutablePermission| boolean | false | If set to true automatically adds executable permission to created file. Only works if file in the template is also executable.|
| absolutePath | boolean | false | If set to true all files will be created relative to the project root. Not relative to the folder you clicked on. (Can only be set to true if omitParentDirectory is true as well) |
| templateNotation | {start: string[], end: string[]} | `{start: ["<","["], end: [">", "]"]}` | If you would like to customize how to annotate strings that should be interpolated use this option|
If a template is specified for a file its value should match one of the names of your [folderTemplates.fileTemplates](#filetemplates) or have the `EmptyDirectory` value. If the template value is `EmptyDirectory` it will create an empty directory instead of a file.
### folderTemplates.fileTemplates {#filetemplates}
- The `key` of the `key-value` pair is the name of the template
- The value can either be
- an `array` where every item in the array is a `string`. Every new item in the array will be written into a new line.
- a `string` and you can annotate the linebreaks yourself with `\n`.
Two example filetemplates
```json
{
"folderTemplates.fileTemplates": {
"Typescript Functional Component": [
"import React from 'react';",
"",
"interface Props {",
"}",
"",
"const = (props) => {",
" return
;",
"};",
"",
"export default ;"
],
"Indexfile": "import from './'\n\nexport default ;"
}
}
```
### folderTemplates.templateNotation
This setting can be used to globally customize how template strings that should be interpolated can be annotated. If you would like to customize this on a per template basis you can do so in the `ftsettings.json` file.
```json
folderTemplates.templateNotation: {
"start": ["<<%", "[[["],
"end": ["%>>", "]]]"]
}
```
this example would make it so that you have to annotate the strings like this `<<%FTName%>>` or `[[[FTName]]]` instead of using the defaults.
### Appending or Prepending content to existing files
There is a special placeholder `<__existingcontent__>` or `[__existingcontent__]` to read content from an existing file if you want to append or prepend text to this file. However this requires the setting `overwriteExistingFiles` to be set to `true` or `prompt`. See this [example](https://github.com/Huuums/vscode-folder-templates/tree/master/examples/Append%20Text%20to%20Existing%20File) for more information.
### Using the command createFolderStructure with a keybind
You can add a `string` argument to the keybind you are using to define a static folder in which you want the new folder to be created.
```jsonc
{
"key": "ctrl+0", //or your preffered keybind,
"command": "FT.createFolderStructure",
"args": "src/components"
}
```
If you put the argument `"__current"` it will create the folder **next** to the file that is currently open in the editor.
## Migrating to 3.0
The name of the extension was changed which resulted in some placeholders and the config namespace being changed.
- The `FFSName` Placeholder no longer works. Please replace it with the new placeholder `FTName`
- Please switch the configuration keys from `fastFolderStructure.structures` to `folderTemplates.structures` and `fastFolderStructure.fileTemplates` to `folderTemplates.fileTemplates`.
- Calling the `FFS.createFolderStructure` command will no longer work. Please replace it with `FT.createFolderStructure`
### Credits
The idea for FT came after seeing this extension [ee92.folderize](https://marketplace.visualstudio.com/items?itemName=ee92.folderize)
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Dennis Collon
π» π€ π
Marco Cavanna
π€
Matej ReΕ‘etΓ‘r
π
Brydon McCluskey
π€
Gytis Ramanauskas
π
howagain
π€
Torben Ewert
π» π€ π
arash-bizcover
π
ofir130
π€
Nelson
π€
Γscar
π€
Nicolas Karg
π€
mrelemerson
π» π π€
thimo1
π¨
pdgustavo
π€
AndrΓ© FeijΓ³ Meirelles
π
Yourim Yi
π
Jonah Lawrence
π
David Freer
π€ π
deasems
π€
magick93
π€
jrmora
π
ThumNet
π»
hondzik
π»
tjunxin
π»
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!