huuums / vscode-folder-templates Goto Github PK

Hello, great extension! But one thing that would really make it faster for people like me that like to use keybinds, is a way of executing the command FFS.createFolderStructure just by doing a setted keybind like "ctrl+8" (in my case). When i tried to do this I created this command in my keybindings.json{ "key": "ctrl+8", "command": "FFS.createFolderStructure", } , but it doesn't work the way it should :(, if do the keybind, the input to put the name of the file appears:

but then a error occurs if I press enter:

how can I use this? :/

Hi, when I create a template in the file system I get an error if I add a .ftsettings.json.
My template looks like this:

If I leave it like that, the context menu "Create New Templated Folder" does not do anything on click.
If I open de Command Palette and execute "Create New Templated Folder", it does not ask for a template, it directly goes to the name propmt (even tho I have more than one template defined). In this prompt, if I input something and press Enter, or if I just press Escape, I always get this error:

If I define the same template in the settings.json, it works just fine.
If I remove the .ftsettings.json. it also works.

Thanks

HI, thank you so much for taking the time to build this super useful extension. I still couldn't get it to work though.

I created a .fttemplates folder in my project root and added the folder structure but when I select "Create New Templated Folder" in the context menu or via Ctrl + Shift + p I always get a "No configured Folder Templates found!" error.

What am I missing? Here's the repo in case you want do check it: https://github.com/onepercentio/IATE-nodejs-boilerplate

Thanks again for your time!

if you try <FTName | replace('non-existing-string', '')> when FTName value doesn't contain non-existing-string the result will be an empty string

This is what I just want for these days! And I think it would be better if a file in the folder template can be open to edit. Is it possible?

It will be interesting to have the feature to combine transformations for the file/folder name with another operator.

Inside a file we can use "|" and "?" Example:
<FTName | lowercase?pascalcase>

but for the file and folder name we must use only one with "%" Example:
[FTName % pascalcase].tsx

FFS is a known abbreviation that doesn't look good.
I also think that the explorer context commands should not state the extension name - they should integrate seamlessly.

MyNewComponent => <FFSName | firstlowercase> => myNewComponent not sure about the fn naming though :)

• classname
  • lol-sick-component -> LolSickComponent
  • lol sick component -> LolSickComponent
  • lol_sick-component.dude -> LolSickComponentDude

Ultimately, I think you could find any non-A-Z character and replace it with nothing, and adjust the
character after it to be a capital.

const stringToClassName = string => {
  string = string.toLowerCase().replace(/[^A-Za-z0-9]/g, ' ').split(" ");
  string = string.map(word => word[0].toUpperCase() + word.substr(1, word.length));
  return string.join("");
}

const shortStringToClassName = string => string
  .toLowerCase()
  .replace(/[^A-Za-z0-9]/g, ' ')
  .split(" ")
  .map(word => word[0].toUpperCase() + word.substr(1, word.length))
  .join("");

console.log(stringToClassName('some-Test.dude'));
// SomeTestDude
console.log(shortStringToClassName('HEY/this|NEAT'));
// HeyThisNeat

This would solve having a component name: button-group, and with the uppercase transformation: Button-group, which is invalid as JS.

Hello

Thanks for this extension. It is a huge time saver!

Is it possible to replace spaces with underscores? Or perhaps something more flexible such as a general replace(" ", "_") function?

Thanks

Hi 👋

it would be really nice, if I could configure my structure, so that it would not create a subfolder and only create the files in the selected directory.

For Example

Right now it behaves like this:

src/
  |_ components/     <---- Create new FFS here
      |_ <FFSName>/
          |_ <FFSName>.css
          |_ <FFSName>.js

I would love an option, allowing this:

src/
  |_ components/     <---- Create new FFS here
      |_ <FFSName>.css
      |_ <FFSName>.js

API proposal

Add an option createSubdirectory defaulting to true, to not introduce a breaking change.

"fastFolderStructure.structures": [
    {
      "name": "",
      "createSubdirectory": false,     
      "customVariables": [],
      "structure": []
    }
]

If it is explicitly set to false, don't create the subdirectory.
I guess it would affect this line: https://github.com/Huuums/vscode-fast-folder-structure/blob/master/src/actions/createFileOrDirectory.ts#L24

Hi,

All has been well until I ran CleanMyMac this morning. I just discovered that all my templates in the global . fttemplates directory have disappeared or were deleted by CleanMyMac.

Is it possible to have this fttemplates directory in another folder that probably contains all my projects (since the template is reused by all projects), instead of duplicating the template in each project folder?

I need to add some empty folders to my structure. What command allows me to create one?

Hi there,

I'm using your extension a lot as it's a great one! Thx for it.
I'm wondering it's it's possible to use it as a "CLI" as well? (or just a part as a CLI)
Being able in javascript for example to call fft <templateName> <path> <FTName> <customVariables>

Let me know 👍

Thx

The documentation for this is really confusing in my opinion. I've spent about 20 minutes trying to figure out how to add sub-folders in settings and just can't do it. It took me about 10 minutes just to find out how to create an empty directory because the disclaimer about it is not prominently displayed in the readme my opinion, or at least positioned well. I personally feel 20 minutes to learn how to use an extension is too long when something like EmptyDirectory can simply be autocompleted with hints and suggestion details. I'm not saying I'm the smartest guy in the world, but I'm not that slow. The only issue I found on this repo asking about the same thing didn't provide a programmatic solution, It appears they ultimately went with creating it in the global .fttemplates directory, which is great.

I personally don't want to do that because I use multiple vscode instances and prefer to have my settings synced so I can just log on and go.

I don't want to tell you how to do your extension but can I recommend some things that I feel would provide a better user experience?

• Include example values for setting configurations here
• Include a proper json schema for setting configurations here
• Include a json schema validator for .ftsettings.json files reference
  This allows the same autocomplete and suggestion details to be populated for any .ftsettings.json files. (You would also need to set your package.json activationEvents to activate on these files as well so the validator will run automatically)

I think doing those 3 simple things would align your extension with the behavior people expect using vscode and would help new adopters like me tremendously. It would autonomously provide error handling as well and visually identify to the user what they are doing wrong without any input from you as the developer.

If you don't have time to do the above, I would be glad to provide a PR for you - no issues with that, I would just need a complete understanding of the data structures, but interim would you mind providing insight on how to create subfolders in a settings structure? I really like the idea of this extension and don't want to give up on it yet based on others I've found in the marketplace

Hey guys, there's a way to add vscode's snippets when creating templates?

Actual method:

{ "fileName": "index.tsx", "template": "React Native Functional Component" },

What i want:

{ "fileName": "index.tsx", "template": rnfc << my snippet" },

I tried using variable and won't work, any tip or method?

Thanks.

Hello, I just used your extension recently. I feel your extension very nice and convenient. I very like it.
I config setup with settings.json and extension working very well.
But if i config in settings.json, file will long and difficulty read. So i config with .fttemplates.
I read document and i see .fttemplates don't set specific path for folder template.
Example, I set folder src is root folder. When I create 1 component, component in folder src/components:

Key binding:

With settings.json, I can set specific path for template in fileName.
With .fttemplates. I try set name property .ftsettings.json. It not working. It will folder templace in src folder.

Do you have any solution for this problem? I think i set different keybinding with different args but it's quite inconvenient.

It would be nice if could be transformed using some "default" filter like: upperCase, lowerCase, title ecc. ecc.

Template idea:

"fastFolderStructure.fileTemplates": {
    "React Component": [
      "import React from 'react';",
      "",
      "import { } from './<FFSName>-component';",
      "import { } from './<FFSName>-function';",
      "",
      "const <FFSName | title> = () => <h1><FFSName> Page Component</h1>;",
      "",
      "export default <FFSName | title>;",
      ""
    ]
  }

So creating a React Component passing 'home' as FFSName it would produce all structure using name (lower case) except instruction with <FFSName | title> that will transform home into Name.

I think this could be a useful RegExp to help get the FFSName and the relative Filter

const regexp = /<FFSName(?:\s*\|\s*([A-Za-z]+))?>/;

I'm generating folder templates into a react project and wondering how to append code to an existing file, in the case where I need to add the new component to a barrel file. For example

/src
  /components
    index.ts
    /MyComponent
      MyComponent.tsx
      index.ts

In my scenario, my template generated the MyComponent folder. But what I'd like to do is append the following to my /src/components/index.ts file:

export * from "./[FTName]";

This way when I import any component, I can just do the following:

import { MyComponent } from "src/components";

Currently I'm already aliasing the src/components file so that it's just as simple as this:

import { MyComponent } from "$components";

I'm trying something like <FTName | capitalize | singular> but it's left uncompiled. Is chaining possible?

Thanks a lot!

Hi, thank you for your great work! it is so amazing extension that I tried to find desperately.

I got "Something went wrong getting Folder contents" error message when I trying to create new folders from File Explorer tab.

Here is stack trace.
lib/fsHelper.ts: line 25

Templates folder located at D: drive's D:\00. Template\UI\.fttemplates.
so, lib/extensionHelpers.ts: line 49 - vscode.Uri.parse do split folder name as "D:" to scheme and others to path

export const getTemplatesFromFS = (folderPath: PathLike) => {
  const fsTemplates = readdirSync(folderPath, { withFileTypes: true });
  return fsTemplates
    .map((file) => {
      if (!file.isDirectory()) {
        return null;
      }
      const settings =
        parseSettingsFile(`${folderPath}/${file.name}/.ftsettings.json`) || {};

      const contents = getFolderContents(
        vscode.Uri.parse(`${folderPath}/${file.name}`) // <<<<< HERE!!!
      );

I don't know how can fix this issue.

Anyway, THANK YOU again.

There is a scope/context issue with this plugin.
It doesn't act normally on user context vs workspace context.
Meaning if I'm not opening any workspace settings should be added/modified/deleted in the user settings.

On the other hand If I'm inside a specific workspace it should ask to save/modify in global or workspace settings.

To simplify things, it could always write to user's settings rather than workspace

Hello,

Thank you for the great plugin! It does the job, however not in the following use case.

I use this approach - Creating templates on the File System, .ftsettings.json is very simple:

{
  "omitFTName": true,
  "omitParentDirectory": true
}

Just to make sure the order doesn't matter I tried this as well:

{
  "omitParentDirectory": true,
  "omitFTName": true
}

Does nothing. If I change this to

{
  "omitFTName": false,
  "omitParentDirectory": true
}

or remove omitFTName": true then it works but asks for a component name, so I have to enter a dummy value (don't use it).

Adding a custom variable (e.g. as in this example) also works but then it asks for the variable value (even if there's a default value, it's just prepopulated), so it's also extra clicks.

In both cases it's not a big deal to do extra clicks comparing to the received value the plugin provides, but I think getting things done in as less actions as possible is in the spirit of the plugin. And it's always possible I've missed something and don't use it right, then please let me know.

Thanks again!

It would be nice if there was a variable to add inside the template that contains the project template output path like imports.

example:

template_name:
  file.js
  inside_folder:
    datasource.js

if I select the template path inside the project realtive path src/,
inside the datasource.js would be two options to relative paths to the project

1. [FTTemplatePath] template output root path -> src/template_name (or src)
2. [FTRelativePath] template output file path -> src/template_name/inside_folder

so inside the datasource.js file I could use the relative path it has to import the file.js

import {foo, bar} from '[FTTemplatePath]/file.js';

Thanks for the extension, it works well and saves a lot of time 👍

I'd like to be able to configure the directory where the extension looks for templates. This would help me keep my root directory organized.

I keep getting this warning at the top of .json files. This doesn't block my workflow but i thought in let you know because it can get a bit annoying to keep seeing a warning that can only be resolved by disabling the extension.

https://github.com/Huuums/vscode-folder-templates/blob/master/schemas/defs.json#L5

Thank you

Due to the removal of default templates the "out of the box" usability of the plugin kind of disappeared.

Creating a list of common Folder structures and have them be addable via some command should make the plugin more userfriendly for people who do not have a special usecase.

Something like this

 - My Template
   - __projectroot__
     - src 
       - tests
         - [FTName].test.js   // always gets created at this exact path in the project because of the __projectroot_ folder.Disregarding where you clicked  "Create new Templated folder"
   - [FTName] // Still gets created relative to the Folder where you clicked "Create new Templated Folder" 
     - [FTName].jsx 

Hello,

I've just installed the extension and tried to create a folder template with right click. Then this error message came up.

Any hints how to fix it?

Thank you.

Having a little trouble making it work.

.fttemplates/.ftsettings.json

{
  "omitParentDirectory": true,
  "absolutePath": true,
  "overwriteExistingFiles": "prompt"
}

it keeps creating Example/screens/ExampleScreen/index.tsx - would like to avoid the root Example/ and have it create the file in screens.

Originally posted by @Norfeldt in #82 (comment)

Hi there, thanks for this extension works very well.

Do we have to specify the folder in workspace settings.json for .fttemplates to work ?
at the moment it keeps defaulting to the global extensions .fttemplates folder

Thanks

• When a user wants to go to the global folder and didn't set one yet they should be asked to set it up with a folder picker.

I feel that this extension would be better with the ability to quickly create a template based on a folder that the user right-clicks on and selects "create a new template in FFS from this folder".

The base functionality would just be to duplicate the folder but it would also open the editor for that template and allow you to use that "copy" as a starting point for a generalized template based on that folder structure.

Hello, thanks for the awesome extension!

When you specify EmptyDirectory twice such as in the following snippet:

{
  "fileName": "domain/objects",
  "template": "EmptyDirectory"
},
{
  "fileName": "ui/pages/<FFSName>_page.dart",
},
{
  "fileName": "ui/widgets",
  "template": "EmptyDirectory"
},

Only the first empty directory gets created.

Hi,

I am able to create folders using EmptyDirectory value but I can't create a folder inside a folder

It would be nice to define default-Values for the customVariables.

E.g.

"customVariables": [
   "Company"
]

could be

"customVariables": [
   "Company: 'my company ltd.'"
]

Adding a default value, to the company variable, would be great, so you can just press ENTER to continue w/o typing the full company name.

I cannot delete the default templates:
"TS React Functional Component"
"JS React Functional Component"
"Indexfile Import/Export"

On next template creation they will keep coming back. 😞

I like your add-in / extension very much!

I am using your extension with custom variables only. I do not use the "default" variable FTName . To avoid just jumping over the 1st step, where the extension is asking for FTName. It would be nicer to have an omit feature in the config section similar to the omitParentDirectory toggle.

Is there a technical need for the FTName variable?

It is not a bug but a new feature proposal:

Currently we can use customVariables for each template:

{
  "omitParentDirectory": true,
  "customVariables": ["varA=>X"]
}

But it will be really interesting to have global custom variables that we can set in the project (workspace) settings:

Check this scenario:

We use the same templates in different projects (libraries) therefore different workspace settings.
We achieve this by using an exclusive library for the templates imported on each project.

Here’s the important thing: Some variables are the same for the project and different for another project.

So we are forced to ask the variable value because we can not set a value by default for all the projects.
Thus, if you are in project A all the variable values in this project are X
If you are in project B all the variable values are Y
It could be reach setting customVariables globally. For example:

workspace settings for project A:

"folderTemplates.templateFolderPath": "node_modules/my-templates/src",
"folderTemplates.customVariables": ["varA=>XbecauseProjectIsA", "varB=>other1"]

workspace settings for project B:

"folderTemplates.templateFolderPath": "node_modules/my-templates/src",
"folderTemplates.customVariables": ["varA=>YbecauseProjectIsB", "varB=>other2"]

I think it would be useful to be able to explicitly declare a folder name -- I think that would evolve this tool from 'build a component' to 'speed up your workflow.'

Suggestion:

      "fastFolderStructure.structures": [
        {
          "name": "Component",
          "structure": [
            {
              V--- this would go into ./<Component>/...
              "fileName": "./<FSSName | lowercase>/style.scss"
            },
            {
              V--- this would go into ./, a sibling to <Component>
              "fileName": "./index.js",
              "template": "Component File"
            }
          ]
        }
      ],

This would promote the following:

1. Allow creation of items outside of the initial folder we're creating, and totally exclude the folder we're creating if we don't declare FSSName in any of the structural items
2. Allow transforming of the folder name -- this would enable you to, ultimately, have whatever you want as your 'component name' (in addition to my next issue) and be able to have it be formatted properly in each scenario

This would most likely be a breaking change. Having to require the FSSName in the structure would bork old versions and put the children somewhere they shouldn't be

Hi,
I need all files of one type to be created inside specific folder, something like ./AA/BB/[FTName].json
Is it possible to specify absolute path for the new file(s)?

Thanks

Greetings,

I have been enjoying the extension very much. Thank you. After about a week of using it I think it satisfies almost all my development needs. I just have a feature request around overwriting existing files.

Currently, the control flow identifies if a file already exists and omits from creating it (again). It then notifies the user of said file not being generated. This is all great and I'm sure has saved a ton of trouble by accidentally overwriting something. But may I propose some alternates to give some flexibility to end-users here?

• Add an option to allow only overwriting if the file is tracked (the workspace has an active git init and the file is not ignored)
• Add an option to allow overwrite in specific globs (i.e., **/tests/**) [I would recommend something like node-glob]
• Add an option to allow overwrite for a specific filename or extension
• Add an option to allow overwrite based on language specific configurations reference
• Or possibly consider 'merging files' - this would be complicated, but if you keep the scope of what can be merged it may relieve a lot of technical debt.

It might be beneficial to consider adding this functionality to ftsettings.json files so it's project scoped, but I think, or I'm assuming, these would really be one-time configurations yeah? I think people would just add it to user-settings, but that's just food for thought.

I wouldn't recommend an option to always overwrite, but that's your call obviously. I think the key here is just flexibility being sufficient. And I think the proposed options are future proof that wouldn't require much maintenance in the future, but I would love to see what others contribute in that regard.

My use-case is that I have an extension that automatically generates a project-based .vscode/settings.json file every folder that is opened, for other reasons beyond the scope of this extension (like setting up envs).

Using this extension in tandem sort of complicates that pattern. For example, if you were to create a folder structure specifically targeting typescript and you include a .vscode/settings.json file in that template with language-specific settings or a setting to exclude javascript files from search and the explorer, it wouldn't be applied with the template if it already exists. These aren't settings I need in every project, obviously if I'm doing something in python, just for example.

This would work great, but since I have another extension that automatically creates a settings file at launch for other reasons, this extension identifies it as existing and omits it. And as far as I know, you can't alter the order of loading extensions.

FYI, I understand having more settings than you need doesn't hurt you, I just share a lot of my settings with projects with other people or when I upload something to github, so they have what I have. Easier for troubleshooting etc, so keeping them relative just makes it easier to find, clutter-free and respective.

Any thoughts on this?

I have the following Template in .vscode/.fttemplates:

Template: Feature Document

[FTName | snakecase].md

# <FTName | capitalcase> Feature

...

When I generate the template, how to I make the enclosing folder use a snake case transformer?

For example The file generated is:

.
└── Some Test/
   └── some_test.md

When I want

.
└── some_test/
   └── some_test.md

How can I achieve this?

Sorry for the lame ticket, but I don't understand how to use this extension.

Don't now where to create templates for example, can someone give me a hand with this?

It would be great if when fired from a keyboard shortcut in the file explorer view, the destination could be grabbed from the selected file or folder. It's not actually properly supported at the moment in vscode, but there is a workaround here https://stackoverflow.com/questions/62945928/get-focused-explorer-folder-or-file-in-an-extension-when-command-triggered-by-a/65257167#65257167.

Other potential additions could be settings to add templates to the right-click menu, and the ability to choose the desired template via another arg in the keyboard shortcut binding.

All in all though this is a fantastic extension, and exactly what I was looking for!

Is actually possible to store templates in a different place than settings.json? I feel this not very convenient...

Attempting to pass spaces at the end of an instance foldername goes through, creating such folder. This causes issues with many things, such as preventing Code Runner from running the code and preventing the user from opening said folder or it's children using the Reveal in File Explorer Command.
As VSCode itself prevents you from creating folders of this type, this is likely a bug.

Part of config:

"fastFolderStructure.structures": [
        {
            "name": "Redux bootstrap",
            "structure": [
                {
                    "fileName": "redux-typescript.ts",
                    "template": "Redux root typescript"
                },
                {
                    "fileName": "root-epic.ts",
                    "template": "Redux root epic"
                },
                {
                    "fileName": "root-reducer.ts",
                    "template": "Redux root reducer"
                },
                {
                    "fileName": "root-state.ts",
                    "template": "Redux root state"
                },
                {
                    "fileName": "root-store.ts",
                    "template": "Redux root store"
                },
            ]
        },
    ]

• Right click -> New folder from FFS template -> Redux bootstrap -> ducks. All ok
• Delete folder ducks
• Right click -> New folder from FFS template -> Redux bootstrap -> ducks. only redux-typescript.ts is created
• Restart vscode, all good

I think it would be very useful to be able to add more variables when creating a component structure instead of just <FSSName>.

A possible idea would be this:

Enter your component name (plus some other msg to say what's going on here):
MyComponentName|AFunction|AnotherFunction

Translates to:

{
  FSSName: 'MyComponentName',
  FSSVar1: 'AFunction',
  FSSVar2: 'AnotherFunction'
}