Skip to content

DEMO.md

Latest commit

 

History

History
297 lines (197 loc) · 13.4 KB

DEMO.md

File metadata and controls

297 lines (197 loc) · 13.4 KB

Auto Import Relative Path (DEMO)

Version Installs Downloads Ratings

Auto Import Relative Path is a Visual Studio Code extension that simplifies how you import files in your projects. No more memorizing or typing out long relative paths — let this extension do the heavy lifting for you. Whether you’re building a small side project or a complex application with hundreds of files, Auto Import Relative Path will help you streamline your workflow and keep your code clean.

Table of Contents

Features

  • Instant Relative Path Imports: Quickly copy and paste a file’s path in your editor, or auto-import it in a single command.
  • Flexible Placement: Place new import statements at the top, the bottom, or even at your cursor’s current position.
  • Highly Customizable: Configure the style of import statements for JavaScript, TypeScript, React, CSS, SCSS, HTML, and Markdown.
  • Time-Saving: Ideal for large projects with complex directory structures.
  • Keyboard Friendly: Offers intuitive default shortcuts so you can keep your hands on the keyboard and stay in the flow.

Supported File Extensions

File Type File Extension
Programming .js, .jsx, .ts, .tsx
Markup .html, .md
Stylesheet .css, .scss

Commands

Command Windows/Linux macOS Description Demo
Auto Import: Copy Ctrl+Shift+A Cmd+Shift+A Copy the relative path of the selected file in Explorer. See it in action
Auto Import: Paste Ctrl+I Cmd+I Paste the import statement into your active text editor. See it in action
Auto Import: Auto Alt+D Option+D Auto copy and paste the import statement from Explorer to your active text editor in one step (copy + paste). Single keybinding import

Import Statement Position

You can configure where the import statement goes in your code. Choose any of the following placement options:

Append to Cursor

Windows/Linux:

  1. Press Ctrl+Shift+A on a file in Explorer.
  2. Switch to your active text editor and press Ctrl+I to paste.
  3. Or use Alt+D to do both in one step (copy + paste).

macOS:

  1. Press Cmd+Shift+A on a file in Explorer.
  2. Switch to your active text editor and press Cmd+I to paste.
  3. Or use Option+D to do both in one step (copy + paste).

Cursor Demo

Append to the Bottom of the Import List

Windows/Linux:

  1. Press Ctrl+Shift+A on a file in Explorer.
  2. Press Ctrl+I in your code editor to paste at the bottom.
  3. Or use Alt+D to copy and paste in one step.

macOS:

  1. Press Cmd+Shift+A on a file in Explorer.
  2. Press Cmd+I in your code editor to paste at the bottom.
  3. Or use Option+D to copy and paste in one step.

Bottom Demo

Append to the Top of the Import List

Windows/Linux:

  1. Press Ctrl+Shift+A on a file in Explorer.
  2. Press Ctrl+I in your code editor to paste at the top.
  3. Or use Alt+D to copy and paste in one step.

macOS:

  1. Press Cmd+Shift+A on a file in Explorer.
  2. Press Cmd+I in your code editor to paste at the top.
  3. Or use Option+D to copy and paste in one step.

Top Demo

Keybindings

Auto Import from Explorer

Windows/Linux

  1. In the Explorer, press Ctrl+Shift+A on a file.
  2. In the editor, press Ctrl+I to paste the import statement.

macOS

  1. In the Explorer, press Cmd+Shift+A on a file.
  2. In the editor, press Cmd+I to paste the import statement.

Auto import from explorer demo

Single Keybinding Import

Windows/Linux

  1. Press Alt+D on a file in the Explorer.
  2. The import statement is automatically inserted into your active editor.

macOS

  1. Press Option+D on a file in the Explorer.
  2. The import statement is automatically inserted into your active editor.

Single keybinding import demo

Auto Import Across Active Tabs

Windows/Linux

  1. Press Ctrl+Shift+A on a file in the Explorer.
  2. Switch to any open tab and press Ctrl+I.
  3. The relative path import will be pasted where your cursor is.

macOS

  1. Press Cmd+Shift+A on a file in the Explorer.
  2. Switch to any open tab and press Cmd+I.
  3. The relative path import will be pasted where your cursor is.

Auto import from text editor demo

HTML Support

Import Script and Stylesheet

Windows/Linux

  1. Press Ctrl+Shift+A on a .js or .css file in the Explorer.
  2. Press Ctrl+I in your HTML file, or use Alt+D for a single-step import.
  3. The extension automatically creates the appropriate <script> or <link> tag.

macOS

  1. Press Cmd+Shift+A on a .js or .css file in the Explorer.
  2. Press Cmd+I in your HTML file, or use Option+D for a single-step import.
  3. The extension automatically creates the appropriate <script> or <link> tag.

Import script and stylesheet

Markdown Support

Import Image to Markdown

Windows/Linux

  1. Press Ctrl+Shift+A on an image file (.png, .jpg, etc.) in the Explorer.
  2. Press Ctrl+I or use Alt+D in your Markdown file.
  3. The extension inserts the Markdown image syntax automatically.

macOS

  1. Press Cmd+Shift+A on an image file (.png, .jpg, etc.) in the Explorer.
  2. Press Cmd+I or use Option+D in your Markdown file.
  3. The extension inserts the Markdown image syntax automatically.

Markdown image import demo

Import Markdown

Windows/Linux

  1. Press Ctrl+Shift+A on a .md file in the Explorer.
  2. In another Markdown file, press Ctrl+I or use Alt+D.
  3. The extension automatically inserts the relative link to your Markdown resource.

macOS

  1. Press Cmd+Shift+A on a .md file in the Explorer.
  2. In another Markdown file, press Cmd+I or use Option+D.
  3. The extension automatically inserts the relative link to your Markdown resource.

Markdown import demo

Changelog

Check out the CHANGELOG for detailed release notes and version history.

Contributing

Found a bug or have a feature request? Feel free to open an issue in GitHub Issues. You can also leave a star on GitHub or a review on the Visual Studio Marketplace. Your feedback is greatly appreciated and helps make this extension better!

Support

If you're running into issues or need help using Auto Import Relative Path, please check the resources below:

  • 🛠 Troubleshooting: Review the SUPPORT.md for known issues and helpful tips.
  • ❓ Ask a Question: If your question isn’t answered in the documentation or support page, feel free to open an issue.
  • 💬 Discussions: You can also participate in GitHub Discussions (if enabled) or reach out via comments on the Visual Studio Marketplace.
  • 💡 Feature Requests: Use GitHub Issues to suggest improvements or new features.

Support the Project

If this extension has helped you or saved you time, and you’d like to show your support, you can send a donation to any of the addresses below:

  • Bitcoin: bc1q4j2uewfphjmca83905qv37vcl4jh8va5yupl7w
  • Solana: EHtTGyRoDAK44KBGrEoypAWyPpResHUqwufKnuLs7Tyy
  • Sui: 0xcaf8ff4a65d7e35d961abd0203180013b7fe974d4fa0313e880c39c45ada2b09
  • ERC20: 0xd25f84Ed2F76dF2F0C8f1207402eF9e15b5d7855

Thank you for your support—every bit helps us continue improving Auto Import Relative Path!

Related

Check out more of my extensions on the VS Code Marketplace.

Thank you for using Auto Import Relative Path! If you have any suggestions or feedback, don’t hesitate to reach out via GitHub Issues. Happy coding!