Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/R35007/create-app-vscode-extension
https://github.com/R35007/create-app-vscode-extension
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/R35007/create-app-vscode-extension
- Owner: R35007
- License: mit
- Created: 2021-10-23T05:10:55.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-14T17:03:19.000Z (3 months ago)
- Last Synced: 2024-08-14T18:42:15.128Z (3 months ago)
- Language: TypeScript
- Size: 374 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Create App
Generates an interactive form and quick pick for any CLI to create an app.
Easily Create ab App with Official Starter Templates or Boilerplate using CLI.
## Features
- Easy to create a boilerplate app using the `Create App: Interactive` view.
- Bored of interactive form fields, no worries. Try the new `Create App: Quick` command to create a app in seconds using vscode quick pick command pallet.
- Add our own custom apps and commands that generates interactive form fields and quick picks.
## Default Apps:
Angular
Django
Electron
ExpressJs
Gatsby
Ionic
NestJs
NextJs
Preact
React
Svelte
Vite
VS Code Extension
Vue
## Create App: Interactive
- Give `Ctrl/Cmd+Shift+P` to open the command pallet and type `Create App: Interactive` to open the Create App view.
- This opens an interactive ui that prompts you tp pick the app name and provide configurations to create the app.
## Create App: Quick
- Give `Ctrl/Cmd+Shift+P` to open the command pallet and type `Create App: Quick` to open the Create App quick prompt.
- This provides you the quick command pallet and prompt you the pick the app and its required minimal configurations to create the app.
## Custom App Config interface
- Custom app can be provide in two ways.
- use `create-app.settings.customApps` setting - provide a direct list of custom apps config.
- or use `create-app.settings.customAppPath` setting - provide the `json` file path or folder path containing list of custom apps config.
- Click [here](https://github.com/R35007/create-app-vscode-extension/tree/master/apps) for more app config references.
```ts
interface Tags {
label: string;
description: string;
command?: string; // Provide a command to execute in terminal on click.
href?: string; // Provide the link to webpage to redirect on click.
}
interface FieldProps {
label?: string;
type?: "textbox" | "checkbox" | "radio" | "browse" | "dropdown";
prefix?: string; // set prefix of the field value. Ex: "prefix":"--template=\"".
suffix?: string; // set suffix of the field value. Ex: "prefix":"\"".
checkedValue?: string | boolean; // used only for field type checkbox.
unCheckedValue?: string | boolean; // used only for field type checkbox.
checkedLabel?: string; // used only for field type checkbox.
unCheckedLabel?: string; // used only for field type checkbox.
value?: string | boolean; // The prefix and suffix will be added to the value. Ex: --template="value".
placeholder?: string;
description?: string;
order?: number; // mention the field render order position.
hide?: boolean; // If true it will hide hide the field both in interactive form and Quick pick.
buttonText?: string; // provide button text if the field type is "browse".
required?: boolean; // By default all required fields will be prompted on command Create App: Quick.
pattern?: string; // Set pattern to validate the value.
prompt?: boolean; // If True this field will be prompted on command Create App: Quick.
canSelectFile?: boolean; // Set to true or false when field type is "browse".
canSelectFolder?: boolean; // Set to true or false when field type is "browse".
errors?: { required?: string; pattern?: string }; // provide the error message.
options?: Array<{
// provide options if the field type is "radio" or "dropdown".
label: string;
value: any;
}>;
}
interface AppProps {
appName: string; // Provide a unique app name. This overrides the app configs if already exist with a same name.
groupNames: string[]; // Set the Lst of group name. Example: If "App1" has a "Group1" and "App2" also has a "Group1. Then Both "App1" and "App2" will be shown in the "Group1".
relatedAppNames: string[]; // Set the List of other App Name to navigate.
commandTemplate: string | string[]; // Provide a command template here. Ex: "commandTemplate": "ng new ${fields.appId} --defaults" or "ng new ${fields['*']} --defaults".
fields?: Record; // Provide the app configuration to generate a app form fields. Ex: "fields": { "appId": { "type": "textbox", "required": true, value: "hello-world" } }.
description?: string; // This description will be shown below the About section in the right side of the form.
order?: number; // Provide the App order to display in the apps list.
hide?: boolean; // If true this app will not be shown in both interactive and quick commands.
logoPath?: string; // Provide the app logo path. If not provide it will show the create app logo.
prerequisites?: Tags[]; // Provide the list of prerequisites commands and site links.
additionalCommands?: Tags[]; // Provide the additional commands to execute in terminal.
resources?: Tags[]; // List of links to refer the app.
tags?: string[]; // Provide the list of stings that helps to find the app.
}
```
## Substitution tokens
`commandTemplate` helps to generate the cli command. You can use the following substitution tokens in `commandTemplate` strings:
- `${fields}` - get the field values.
- `${workspaceFolder}` alias `${cwd}`, `${pwd}` - get the current working directory or a current workspace folder.
- `${workspaceFolderBasename}` - get the current workspace folder base name.
- `${execPath}` - get the command execution folder path.
- `${execPathBasename}` - get the command execution folder path base name.
- `${env}` - get the object of `process.env`. Ex: `"${env.NODE_ENV}"`
### fields token
```json
{
"commandTemplate": [
"npm install -g @angular/cli;" // Add semicolon (;) to end the command. This adds the new line after the semicolon.
"ng new ${fields.appId} ${fields['template']};", // populates the value of the specified field name.
"ng new ${fields.get('appId', 'template')};", // populates the value of the specified field name using get method.
"ng new fields.get('*');", // populates all field values.
"ng new fields._;", // populates all field values.
"ng new ${fields.getExcept('appId', 'template')};", // populates all the field values except the given field names.
"ng new ${fields.except('appId', 'template')};", // populates all the field values except the given field names.
"${fields.openInVsCode ? `code ${fields.appId};` : ''}" // conditionally updated the command based on other field values.
]
}
```