Astro File Generator
👩🚀 Astro File Generator is a Visual Studio Code extension that automatically generates Astro files based on a template. It is useful for creating Astro files quickly and efficiently.
With a few clicks, you can create:
- Basic Page: Create a Basic Page file for Astro.
- Basic Component: Create a Basic Component file for Astro.
- Layout with Slots: Create a Layout file with slots.
- Static Data Page: Create a Page file with static data.
- Page with getStaticProps: Create a Page file with getStaticProps.
- Styled Component: Create a Styled Component file for Astro.
- Custom Component: Create a Custom Component file with a simple template.
The extension is highly customizable, allowing you to create custom templates for your files. It also automatically formats the file upon saving and integrates with Astro for easy installation.
Table of Contents
Requirements
Key Features
- Create Astro Files: Quickly create Astro files with a template.
- Custom Templates: Create custom templates for your files.
- Automatic Formatting: Automatically format the file upon saving.
- Integrations for Astro: Install the integrations for Astro easily.
- File Watcher: Watch for changes in the files and automatically format them.
- Customizable: Customize the extension to fit your needs.
- Open Source: The extension is open source and free to use.
Project Settings
Configure your project by creating or updating a settings.json file at the project's root. If you already have a .vscode/settings.json file, skip the first two steps.
Open the command palette in VSCode:
CTRL + SHIFT + P (Windows)CMD + SHIFT + P (Mac OS)
Type Preferences: Open Workspace Settings (JSON).
In the .vscode/settings.json file, copy and paste the following settings:
{
"astroGenerator.enable": true, // Enable or disable the extension
"astroGenerator.files.include": [
"astro"
], // The file extensions to watch for changes. Example: "json", "jsonc"
"astroGenerator.files.exclude": [
"**/node_modules/**",
"**/dist/**",
"**/out/**",
"**/build/**",
"**/.*/**"
], // The files to exclude from watching. Example: "**/node_modules/**", "**/dist/**", "**/out/**", "**/build/**", "**/.*/**"
"astroGenerator.files.showPath": true, // Show the path of the file in the file name. Example: "home.component.tsx (pages/home)"
"astroGenerator.files.skipFolderConfirmation": false, // Skip the folder confirmation when creating a new file
"astroGenerator.formatting.headerCommentTemplate": [
"/*",
" * This file was generated by Astro File Generator",
" */"
], // The template to use for the header comment
"astroGenerator.formatting.insertFinalNewline": true, // Insert a final newline at the end of the file
"astroGenerator.templates.customComponents": [
{
"name": "React Page",
"description": "Create a new page",
"extension": ".jsx",
"template": [
"export const meta = { title: 'Page Title' };",
"export default function Page() {",
" return <h1>Hello, World!</h1>;",
"}"
]
},
{
"name": "React Layout",
"description": "Create a new layout",
"extension": ".jsx",
"template": [
"export default function Layout({ children }) {",
" return <div>{children}</div>;",
"}"
]
},
{
"name": "React Component",
"description": "Create a new component",
"extension": ".jsx",
"template": [
"export default function {{ComponentName}}() {",
" return <div>Hello, World!</div>;",
"}"
]
}
] // The templates to use when creating a new file
}
Restart VS Code
Your project is now set up to automatically format code upon saving.
Settings Options
Configure Astro File Generator settings in your .vscode/settings.json file to customize the extension's behavior. The following settings are available:
astroGenerator.enable: Enable or disable the extension. Default is true.astroGenerator.files.include: The file extensions to watch for changes. Default is ["astro"].astroGenerator.files.exclude: The files to exclude from watching. Default is ["**/node_modules/**", "**/dist/**", "**/out/**", "**/build/**", "**/.*/**"].astroGenerator.files.showPath: Show the path of the file in the file name. Default is true.astroGenerator.files.skipFolderConfirmation: Skip the folder confirmation when creating a new file. Default is false.astroGenerator.formatting.headerCommentTemplate: The template to use for the header comment. Default is ["/*", " * This file was generated by Astro File Generator", " */"].astroGenerator.formatting.insertFinalNewline: Insert a final newline at the end of the file. Default is true.astroGenerator.templates.customComponents: The templates to use when creating a new file. You can create custom templates for your files.
The astroGenerator.templates.customComponents setting is an array of objects with the following properties:
name: The name of the template. Example: "React Page".description: A description of the template. Example: "Create a new page".extension: The file extension for the template. Example: .jsx.template: The template content for the file. Use {{ComponentName}} as a placeholder for the component name.
For more information on configuring Auto TS Generator settings, refer to the Project Settings section.
Connect with me
VSXpert Template
This extension was created using VSXpert, a template that helps you create Visual Studio Code extensions with ease. VSXpert provides a simple and easy-to-use structure to get you started quickly.
Other Extensions
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Code of Conduct
Please read CODE_OF_CONDUCT.md for details on our code of conduct.
Changelog
See CHANGELOG.md
Authors
See also the list of contributors who participated in this project.
License
Astro File Generator is licensed under the MIT License - see the MIT License for details.
| |
