VueJS File Generator

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.

Index

• VueJS File Generator
  • Index
  • Key Features
  • Supported File Templates
  • Requirements
  • Requirements
  • Setup
    • Step 1: Open Command Palette in VS Code
    • Step 2: Add Configuration to settings.json
    • Step 3: Restart VS Code
  • Configuration
  • Variables Table
  • Community
  • Contributing
  • Code of Conduct
  • Changelog
  • License

Key Features

• Customizable Templates: Define TypeScript and Vue.js file templates tailored to your project.
• Project-Level Configuration: Configure file formatting, naming conventions, and more.
• Open Source: Contribute to and benefit from community-driven development.

Supported File Templates

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

Requirements

• VS Code 1.88.0 or higher.

Requirements

• VS Code 1.88.0 or higher.

Setup

Step 1: Open Command Palette in VS Code

1. Open the Command Palette in VS Code:

   • Windows: CTRL + SHIFT + P
   • macOS: CMD + SHIFT + P

2. Open the Workspace Settings:

   • Type Preferences: Open Workspace Settings (JSON).

Step 2: Add Configuration to settings.json

Copy the following configuration into your .vscode/settings.json file:

{
    "vuejs.generator.enable": true,
    "vuejs.generator.files.skipFolderConfirmation": false,
    "vuejs.generator.formatting.excludeSemiColonAtEndOfLine": false,
    "vuejs.generator.formatting.endOfLine": "lf",
    "vuejs.generator.formatting.insertFinalNewline": true,
    "vuejs.generator.templates.customComponents": [
        {
            "name": "Vue Component",
            "description": "Vue component template",
            "type": "vue",
            "template": [
                "<template>",
                "  <div id=\"{{fileName}}\">",
                "    <!-- Your code here -->",
                "  </div>",
                "</template>",
                "",
                "<script lang=\"ts\">",
                "import { defineComponent } from \"vue\";",
                "",
                "export default defineComponent({",
                "  name: \"{{fileName}}\",",
                "  props: {",
                "    // Your props here",
                "  },",
                "  setup() {",
                "    // Your code here",
                "  }",
                "});",
                "</script>",
                "",
                "<style scoped>",
                "/* Your styles here */",
                "</style>"
            ]
        }
    ],
    "vuejs.generator.project.author": "Manuel Gil",
    "vuejs.generator.project.owner": "Vue JS Colombia",
    "vuejs.generator.project.maintainers": "VueJS Team",
    "vuejs.generator.project.license": "MIT",
    "vuejs.generator.project.version": "1.0.0"
}

Step 3: Restart VS Code

Restart VS Code to apply the settings.

Configuration

You can customize VueJS File Generator by modifying its settings in .vscode/settings.json. Some of the available settings are:

• vuejs.generator.enable: Enable or disable the extension (default: true).
• vuejs.generator.files.skipFolderConfirmation: Skip folder selection when creating files (default: false).
• vuejs.generator.formatting.excludeSemiColonAtEndOfLine: Omit semicolons (default: false).
• vuejs.generator.formatting.endOfLine: Specify end-of-line character (default: lf).
• vuejs.generator.formatting.insertFinalNewline: Add a newline at the end of the file (default: true).
• vuejs.generator.templates.customComponents: Define custom component templates. Each template should include a name, description, type, and template.
• vuejs.generator.project.author: Set the author name for the project.
• vuejs.generator.project.owner: Set the owner name for the project.
• vuejs.generator.project.maintainers: Set the maintainers name for the project.
• vuejs.generator.project.license: Set the license for the project.
• vuejs.generator.project.version: Set the version for the project.

The following variables can be used in the template:

For the full list of customizable variables in the template, check the Variables Table.

Variables Table

The following variables can be used in the template:

Community

This extension is maintained by the Vue JS Colombia Meetup Community. Stay updated on new features and improvements:

• GitHub
• Twitter (X)

Contributing

We welcome contributions from the community! To get started:

1. Fork the GitHub repository.
2. Make your changes and submit a pull request.

For contribution guidelines, refer to the Contribution Guide.

Code of Conduct

We value a welcoming and inclusive community. Please review our Code of Conduct before participating.

Changelog

See the full list of changes in the CHANGELOG.md file.

License

This extension is licensed under the MIT License. See the MIT License for details.