Vapor Components VS Code Extension

This VS Code extension adds Code Lenses to help you quickly access documentation for Vapor components used in your TypeScript and JavaScript React projects.

Features

• Code Lenses for Vapor Components:
  • Automatically detects and adds code lenses for Vapor components imported from @goorm-dev/vapor-core, @goorm-dev/vapor-components, and @goorm-dev/vapor-icons.
  • Code lenses provide quick links to the component documentation on the Vapor website.

How to Use Code Lenses

1. Install and Activate the Extension:

   • Follow the installation steps to install and activate the extension in your VS Code environment.

2. Import Vapor Components:

   • Import any components from @goorm-dev/vapor-core, @goorm-dev/vapor-components, or @goorm-dev/vapor-icons in your React project.

3. View Code Lenses:

   • Once the components are imported and used in your code, you will see code lenses appearing above the lines where the components are used.
   • The code lens will display a message like Go to <source> <component> documentation.

4. Navigate to Documentation:

   • Click on the code lens message to open the component documentation in your default web browser.
   • This allows you to quickly access detailed documentation and usage examples for the specific Vapor component.

Example

Here's an example demonstrating how to use the Code Lenses for Vapor components:

import React from "react";
import {
  Button as CoreButton,
  Checkbox as CoreCheckbox,
} from "@goorm-dev/vapor-core";
import {
  Button as ComponentsButton,
  Checkbox as ComponentsCheckbox,
} from "@goorm-dev/vapor-components";
import { Icon as IconComponent } from "@goorm-dev/vapor-icons";

const AllComponentsUsage: React.FC = () => {
  return (
    <div>
      <div>
        <h3>Core Components:</h3>
        <CoreButton>Core Button</CoreButton>
        <CoreCheckbox id="core-checkbox">Core Checkbox</CoreCheckbox>
      </div>
      <div>
        <h3>Components:</h3>
        <ComponentsButton>Components Button</ComponentsButton>
        <ComponentsCheckbox id="components-checkbox">
          Components Checkbox
        </ComponentsCheckbox>
      </div>
      <div>
        <h3>Icons:</h3>
        <IconComponent />
      </div>
    </div>
  );
};

export default AllComponentsUsage;

In this example, code lenses will appear above each imported and used component, providing quick links to their documentation.

Feedback and Issues

If you encounter any issues or have any feedback, please feel free to open an issue on the repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.