Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5f024c2

Browse files
Merge pull request #2 from vuejsco/develop
Improve documentation and fix typos
2 parents edffa29 + 85f3a66 commit 5f024c2

19 files changed

+211
-173
lines changed

‎README.md

Lines changed: 97 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,24 @@
77
[![GitHub Repo stars](https://img.shields.io/github/stars/vuejsco/vscode-vuejs-generator?style=for-the-badge&logo=github)](https://github.com/vuejsco/vscode-vuejs-generator)
88
[![GitHub license](https://img.shields.io/github/license/vuejsco/vscode-vuejs-generator?style=for-the-badge&logo=github)](https://github.com/vuejsco/vscode-vuejs-generator/blob/main/LICENSE)
99

10-
**VueJS File Generator** is a Visual Studio Code extension designed to streamline the creation of Vue.js files. It generates boilerplate code based on customizable templates, allowing you to quickly create components, services, and other project files according to your needs.
10+
**VueJS File Generator** is a Visual Studio Code extension designed to simplify the creation of Vue.js files. It generates boilerplate code from customizable templates, enabling you to quickly create components, services, and other project files according to your needs.
1111

1212
[![VueJS File Generator](https://raw.githubusercontent.com/vuejsco/vscode-vuejs-generator/main/images/demo.gif)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-vuejs-generator)
1313

14-
## Table of Contents
14+
## Index
1515

1616
- [VueJS File Generator](#vuejs-file-generator)
17-
- [Table of Contents](#table-of-contents)
17+
- [Index](#index)
1818
- [Key Features](#key-features)
1919
- [Supported File Templates](#supported-file-templates)
2020
- [Requirements](#requirements)
21+
- [Requirements](#requirements-1)
2122
- [Setup](#setup)
23+
- [Step 1: Open Command Palette in VS Code](#step-1-open-command-palette-in-vs-code)
24+
- [Step 2: Add Configuration to `settings.json`](#step-2-add-configuration-to-settingsjson)
25+
- [Step 3: Restart VS Code](#step-3-restart-vs-code)
2226
- [Configuration](#configuration)
27+
- [Variables Table](#variables-table)
2328
- [Community](#community)
2429
- [Contributing](#contributing)
2530
- [Code of Conduct](#code-of-conduct)
@@ -29,98 +34,107 @@
2934
## Key Features
3035

3136
- **Customizable Templates**: Define TypeScript and Vue.js file templates tailored to your project.
32-
- **Project-Level Configuration**: Set up file formatting, naming conventions, and more.
33-
- **Open Source**: Contribute and benefit from the community-driven development.
37+
- **Project-Level Configuration**: Configure file formatting, naming conventions, and more.
38+
- **Open Source**: Contribute to and benefit from community-driven development.
3439

3540
## Supported File Templates
3641

3742
The extension provides predefined templates for various Vue.js file types, making it easy to generate structured and consistent files for your project.
3843

3944
| File Type | Description | Example Filename |
40-
|-------------|-------------|------------------|
41-
| `component` | Vue.js Component (Single File Component) | `MyComponent.vue` |
42-
| `page` | Vue.js Page (Common in frameworks like Nuxt) | `HomePage.vue` |
43-
| `store` | Pinia Store Module | `useAuthStore.ts` |
44-
| `composable` | Vue 3 Composable (Reusable function) | `useFetch.ts` |
45-
| `directive` | Vue Directive | `v-focus.ts` |
46-
| `middleware` | Middleware for Nuxt.js | `auth.ts` |
47-
| `model` | TypeScript Model (Interface or Type) | `UserModel.ts` |
48-
| `layout` | Layout Component (Nuxt.js) | `DefaultLayout.vue` |
49-
| `service` | API Service (For Axios or Fetch wrappers) | `AuthService.ts` |
50-
| `test` | Unit Test File (Jest/Vitest) | `MyComponent.spec.ts` |
51-
| `enum` | TypeScript Enum | `UserRoles.ts` |
52-
| `constant` | Constants File | `constants.ts` |
53-
| `hook` | Custom React Hook | `useAuth.ts` |
54-
| `route` | Route Configuration File | `routes.ts` |
45+
|--------------|-------------|------------------|
46+
| `component` | Vue.js Component (Single File Component) | `MyComponent.vue` |
47+
| `page` | Vue.js Page (Common in frameworks like Nuxt) | `HomePage.vue` |
48+
| `store` | Pinia Store Module | `useAuthStore.ts` |
49+
| `composable` | Vue 3 Composable (Reusable function) | `useFetch.ts` |
50+
| `directive` | Vue Directive | `v-focus.ts` |
51+
| `middleware` | Middleware for Nuxt.js | `auth.ts` |
52+
| `model` | TypeScript Model (Interface or Type) | `UserModel.ts` |
53+
| `layout` | Layout Component (Nuxt.js) | `DefaultLayout.vue` |
54+
| `service` | API Service (For Axios or Fetch wrappers) | `AuthService.ts` |
55+
| `test` | Unit Test File (Jest/Vitest) | `MyComponent.spec.ts` |
56+
| `enum` | TypeScript Enum | `UserRoles.ts` |
57+
| `constant` | Constants File | `constants.ts` |
58+
| `hook` | Custom React Hook | `useAuth.ts` |
59+
| `route` | Route Configuration File | `routes.ts` |
60+
61+
## Requirements
62+
63+
- **VS Code 1.88.0** or higher.
5564

5665
## Requirements
5766

5867
- **VS Code 1.88.0** or higher.
5968

6069
## Setup
6170

62-
1. **Open the VS Code Command Palette**:
71+
### Step 1: Open Command Palette in VS Code
72+
73+
1. Open the **Command Palette** in VS Code:
6374
- Windows: `CTRL + SHIFT + P`
64-
- MacOS: `CMD + SHIFT + P`
75+
- macOS: `CMD + SHIFT + P`
6576

66-
2. **Open Workspace Settings**:
77+
2. Open the **Workspace Settings**:
6778
- Type `Preferences: Open Workspace Settings (JSON)`.
6879

69-
3. **Add Configuration to `settings.json`**:
70-
Copy the following settings into your `.vscode/settings.json` file:
71-
72-
```json
73-
{
74-
"vuejs.generator.enable": true,
75-
"vuejs.generator.files.skipFolderConfirmation": false,
76-
"vuejs.generator.formatting.excludeSemiColonAtEndOfLine": false,
77-
"vuejs.generator.formatting.endOfLine": "lf",
78-
"vuejs.generator.formatting.insertFinalNewline": true,
79-
"vuejs.generator.templates.customComponents": [
80-
{
81-
"name": "Vue Component",
82-
"description": "The Vue component",
83-
"type": "vue",
84-
"template": [
85-
"<template>",
86-
" <div id=\"{{fileName}}\">",
87-
" <!-- Your code here -->",
88-
" </div>",
89-
"</template>",
90-
"",
91-
"<script lang=\"ts\">",
92-
"import { defineComponent } from \"vue\";",
93-
"",
94-
"export default defineComponent({",
95-
" name: \"{{fileName}}\",",
96-
" props: {",
97-
" // Your props here",
98-
" },",
99-
" setup() {",
100-
" // Your code here",
101-
" }",
102-
"});",
103-
"</script>",
104-
"",
105-
"<style scoped>",
106-
"/* Your styles here */",
107-
"</style>"
108-
]
109-
}
110-
],
111-
"vuejs.generator.project.author": "Manuel Gil",
112-
"vuejs.generator.project.owner": "Vue JS Colombia",
113-
"vuejs.generator.project.maintainers": "VueJS Team",
114-
"vuejs.generator.project.license": "MIT",
115-
"vuejs.generator.project.version": "1.0.0"
116-
}
117-
```
118-
119-
4. **Restart VS Code** to apply the settings.
80+
### Step 2: Add Configuration to `settings.json`
81+
82+
Copy the following configuration into your `.vscode/settings.json` file:
83+
84+
```json
85+
{
86+
"vuejs.generator.enable": true,
87+
"vuejs.generator.files.skipFolderConfirmation": false,
88+
"vuejs.generator.formatting.excludeSemiColonAtEndOfLine": false,
89+
"vuejs.generator.formatting.endOfLine": "lf",
90+
"vuejs.generator.formatting.insertFinalNewline": true,
91+
"vuejs.generator.templates.customComponents": [
92+
{
93+
"name": "Vue Component",
94+
"description": "Vue component template",
95+
"type": "vue",
96+
"template": [
97+
"<template>",
98+
" <div id=\"{{fileName}}\">",
99+
" <!-- Your code here -->",
100+
" </div>",
101+
"</template>",
102+
"",
103+
"<script lang=\"ts\">",
104+
"import { defineComponent } from \"vue\";",
105+
"",
106+
"export default defineComponent({",
107+
" name: \"{{fileName}}\",",
108+
" props: {",
109+
" // Your props here",
110+
" },",
111+
" setup() {",
112+
" // Your code here",
113+
" }",
114+
"});",
115+
"</script>",
116+
"",
117+
"<style scoped>",
118+
"/* Your styles here */",
119+
"</style>"
120+
]
121+
}
122+
],
123+
"vuejs.generator.project.author": "Manuel Gil",
124+
"vuejs.generator.project.owner": "Vue JS Colombia",
125+
"vuejs.generator.project.maintainers": "VueJS Team",
126+
"vuejs.generator.project.license": "MIT",
127+
"vuejs.generator.project.version": "1.0.0"
128+
}
129+
```
130+
131+
### Step 3: Restart VS Code
132+
133+
Restart VS Code to apply the settings.
120134

121135
## Configuration
122136

123-
You can customize **VueJS File Generator** by modifying its settings in `.vscode/settings.json`:
137+
You can customize **VueJS File Generator** by modifying its settings in `.vscode/settings.json`. Some of the available settings are:
124138

125139
- `vuejs.generator.enable`: Enable or disable the extension (default: `true`).
126140
- `vuejs.generator.files.skipFolderConfirmation`: Skip folder selection when creating files (default: `false`).
@@ -136,6 +150,12 @@ You can customize **VueJS File Generator** by modifying its settings in `.vscode
136150

137151
The following variables can be used in the template:
138152

153+
For the full list of customizable variables in the template, check the [Variables Table](#variables-table).
154+
155+
## Variables Table
156+
157+
The following variables can be used in the template:
158+
139159
| Variable | Description |
140160
|----------------------------------|-------------|
141161
| `fileName` | The unmodified file name. Example: `"MyComponent"` |
@@ -179,12 +199,12 @@ This extension is maintained by the **Vue JS Colombia Meetup Community**. Stay u
179199

180200
## Contributing
181201

182-
We welcome community contributions! To get started:
202+
We welcome contributions from the community! To get started:
183203

184204
1. Fork the [GitHub repository](https://github.com/vuejsco/vscode-vuejs-generator).
185205
2. Make your changes and submit a pull request.
186206

187-
For guidelines, refer to the [Contribution Guide](./CONTRIBUTING.md).
207+
For contribution guidelines, refer to the [Contribution Guide](./CONTRIBUTING.md).
188208

189209
## Code of Conduct
190210

‎src/app/README.md renamed to ‎src/README.md

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -37,43 +37,61 @@ Below is the folder structure for reference:
3737

3838
```plaintext
3939
. 📦 vscode-vuejs-generator
40-
├── 📂 src/
41-
│ ├── 📂 app/
42-
│ │ ├── 📂 commands/
43-
│ │ │ ├── base.command.ts
44-
│ │ │ ├── generate-component.command.ts
45-
│ │ │ ├── generate-composable.command.ts
46-
│ │ │ ├── generate-custom-component.command.ts
47-
│ │ │ ├── generate-directive.command.ts
48-
│ │ │ ├── generate-router.command.ts
49-
│ │ │ ├── generate-store.command.ts
50-
│ │ │ └── index.ts
51-
│ │ ├── 📂 configs/
52-
│ │ │ ├── constants.config.ts
53-
│ │ │ ├── extension.config.ts
54-
│ │ │ └── index.ts
55-
│ │ ├── 📂 controllers/
56-
│ │ │ ├── command-invoker.controller.ts
57-
│ │ │ └── index.ts
58-
│ │ ├── 📂 helpers/
59-
│ │ │ ├── index.ts
60-
│ │ │ └── inflector.helper.ts
61-
│ │ ├── 📂 services/
62-
│ │ │ ├── file-generator.service.ts
63-
│ │ │ └── index.ts
64-
│ │ └── 📂 types/
65-
│ │ ├── command.type.ts
66-
│ │ └── index.ts
67-
│ └── extension.ts
68-
├── 📂 templates/
69-
│ ├── component.json
70-
│ ├── composable.json
71-
│ ├── directive.json
72-
│ ├── router.json
73-
│ ├── service.json
74-
│ └── store.json
40+
. 📂 src
41+
├── 📂 app/
42+
| ├── 📂 commands/
43+
| | ├── 📄 base.command.ts
44+
| | ├── 📄 generate-component.command.ts
45+
| | ├── 📄 generate-composable.command.ts
46+
| | ├── 📄 generate-constant.command.ts
47+
| | ├── 📄 generate-custom-component.command.ts
48+
| | ├── 📄 generate-directive.command.ts
49+
| | ├── 📄 generate-enum.command.ts
50+
| | ├── 📄 generate-hook.command.ts
51+
| | ├── 📄 generate-layout.command.ts
52+
| | ├── 📄 generate-middleware.command.ts
53+
| | ├── 📄 generate-model.command.ts
54+
| | ├── 📄 generate-page.command.ts
55+
| | ├── 📄 generate-router.command.ts
56+
| | ├── 📄 generate-service.command.ts
57+
| | ├── 📄 generate-store.command.ts
58+
| | ├── 📄 generate-test.command.ts
59+
| | └── 📄 index.ts
60+
| ├── 📂 configs/
61+
| | ├── 📄 constants.config.ts
62+
| | ├── 📄 extension.config.ts
63+
| | └── 📄 index.ts
64+
| ├── 📂 controllers/
65+
| | ├── 📄 command-invoker.controller.ts
66+
| | └── 📄 index.ts
67+
| ├── 📂 helpers/
68+
| | ├── 📄 index.ts
69+
| | └── 📄 inflector.helper.ts
70+
| ├── 📂 services/
71+
| | ├── 📄 file-generator.service.ts
72+
| | └── 📄 index.ts
73+
| └── 📂 types/
74+
| ├── 📄 command.type.ts
75+
| └── 📄 index.ts
76+
├── 📄 extension.ts
77+
└── 📂 templates/
78+
├── 📄 component.json
79+
├── 📄 composable.json
80+
├── 📄 constant.json
81+
├── 📄 directive.json
82+
├── 📄 enum.json
83+
├── 📄 hook.json
84+
├── 📄 layout.json
85+
├── 📄 middleware.json
86+
├── 📄 model.json
87+
├── 📄 page.json
88+
├── 📄 router.json
89+
├── 📄 service.json
90+
├── 📄 store.json
91+
└── 📄 test.json
7592
```
7693

94+
7795
## Key Components & Responsibilities
7896

7997
### `extension.ts`

‎src/app/commands/generate-component.command.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import { Uri } from 'vscode';
22
import { BaseCommand } from './base.command';
33

44
/**
5-
* The GenerateComponentCommad class.
5+
* The GenerateComponentCommand class.
66
*
77
* @class
88
* @classdesc The class that represents the generate component command.
99
* @extends {BaseCommand}
1010
* @export
1111
* @public
1212
* @example
13-
* const command = new GenerateComponentCommad(config);
13+
* const command = new GenerateComponentCommand(config);
1414
*/
15-
export class GenerateComponentCommad extends BaseCommand {
15+
export class GenerateComponentCommand extends BaseCommand {
1616
// -----------------------------------------------------------------
1717
// Methods
1818
// -----------------------------------------------------------------
@@ -25,7 +25,7 @@ export class GenerateComponentCommad extends BaseCommand {
2525
* @async
2626
* @method execute
2727
* @public
28-
* @memberof generateComponentCommad
28+
* @memberof generateComponentCommand
2929
*
3030
* @param {Uri} folderPath - The folder path
3131
*/

‎src/app/commands/generate-composable.command.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class GenerateComposableCommand extends BaseCommand {
2525
* @async
2626
* @method execute
2727
* @public
28-
* @memberof generateComposeableCommad
28+
* @memberof generateComposeableCommand
2929
*
3030
* @param {Uri} folderPath - The folder path
3131
*/

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /