https://github.com/dohooo/gold-right

🤩 Specify various templates for different directories and create them with one click.
https://github.com/dohooo/gold-right

vscode-extension

Last synced: about 3 hours ago
JSON representation

🤩 Specify various templates for different directories and create them with one click.

• Host: GitHub
• URL: https://github.com/dohooo/gold-right
• Owner: dohooo
• License: mit
• Created: 2022-05-19T06:08:30.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-07T05:09:35.000Z (almost 2 years ago)
• Last Synced: 2024-09-23T10:04:51.709Z (2 days ago)
• Topics: vscode-extension
• Language: TypeScript
• Homepage:
• Size: 424 KB
• Stars: 17
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  

  



  English | 简体中文  

    


# Gold Right

> Specify various templates for different directories and create them with one click.

## Reason

Usually there is something in the project directory in a particular format, code snippet, configuration, directory structure, etc... Copying or right-clicking a new file frequently doesn't make us any more productive, so maybe we can make right-clicking `easier`.



## Demo

https://user-images.githubusercontent.com/32405058/173213637-e1d0ea89-ad7b-434f-8d6b-a7035282838c.mp4

## installation

After [Gold-Right](https://marketplace.visualstudio.com/items?itemName=Dohooo.Gold-Right) is installed and reload VS Code, `Gold-Right` is automatically enabled

## Usage

1. Specifies the template directory location, which can be specified under workspace configuration or user configuration

```json

# Specify the templates folder in the root directory

{

    # Relative to the current workspace path

    "goldRight.templateDirectoryPath": "./templates"

    "goldRight.templateDirectoryPath": "templates"

    # An absolute path

    "goldRight.templateDirectoryPath": "/Users/user-name/Gold-Right-example/templates"

}

```

2. Create the configuration (config.json) file in the template directory

```json

{

  "paths": [

    { 

      "directory": "src/pages",

      # Use the components/hooks templates for ”src/pages“

      "templates": ["components", "hooks"]

    },

    {

      "directory": "src/hooks",

      # Use the hooks template for ”src/hooks“

      "templates": ["hooks"]

    }

  ],

  "templatesConfig": [

    {

      # Define the configuration for the Components template

      "templateName": "components",

      "inputsVariables": [

        {

          # Define the "[COMPONENT_NAME]" variable, and open the prompt box to enter the variable content

          "key": "[COMPONENT_NAME]",

          # The title of prompt box.

          "title": "Please input component name.",

          # If the this field is empty, creation will stop.

          "required": true

        }

      ]

    },

    {

      # Define the configuration for the hooks template

      "templateName": "hooks",

      "inputsVariables": [

        {

          # Define the "[HOOKS_NAME]" variable, and open the prompt box to enter the variable content

          "key": "[HOOKS_NAME]",

          # The title of prompt box.

          "title": "Please input hooks name."

        }

      ]

    }

  ]

}

```

3. Create templates

The directory structure

```shell

./templates

├── components

|   |   # The directory name "[COMPONENT_NAME]" will be replaced with the input.

│   └── [COMPONENT_NAME]

│       ├── index.tsx

│       └── styles.css

├── config.json

└── hooks

|___|   # The directory name "[HOOKS_NAME]" will be replaced with the input.

    └── [HOOKS_NAME]

        └── index.ts

```

`./templates/components/[COMPONENT_NAME]/index.tsx`

```tsx

import React from 'react';

import './styles.css';

export interface [COMPONENT_NAME]Props {

}

export const [COMPONENT_NAME]: React.FC<[COMPONENT_NAME]Props> = props => {

    return 


}

```

`./templates/hooks/[HOOKS_NAME]/index.ts`

```ts

import React from 'react'


export const [HOOKS_NAME] = () => {

  return React.useState()

}

```

## Sponsors



  



## License

[MIT]('./LICENSE.md)