Drag And Drop Import Relative Path (vscode extension)

This extension helps developers to quickly and easily import files by dragging them from the tree view to their active text editor. The extension simplifies the workflow, allowing developers to save time and improve their productivity by eliminating the need to type long and tedious import statements and file paths.

Click here for more usage examples

Supported file extensions

	File extension
Programming Language	.js, .jsx, .ts, .tsx
Markup Language	.html, .md
Stylesheet	.css, .scss

Usage

1. Drag supported files from the tree view.
2. Hold shift
3. Drop them into any of your active editors.

Active text editor Drop (to)	Supported file extensions Drag (from)
.html	.js, .css, .gif, .jpeg, .jpg, .png, .webp
.md	self, .gif, .jpeg, .jpg, .png, .webp
.js, .ts	self
.jsx	self, .js, .json .css,.sass .scss .png, .jpg, .gif, .svg, .webp .woff, .woff2, .ttf, .eot .md, .yml, .yaml, .html
.tsx	self, .ts, .js, .json .css, .sass .scss .png, .jpg, .gif, .svg, .webp .woff, .woff2, .ttf, .eot .md, .yml, .yaml, .html
.css	self, .gif, .jpeg, .jpg, .png, .webp
.scss	self, .css, .gif, .jpeg, .jpg, .png, .webp

More usage examples

• Click here

Extension Settings

Import statements

Scripts: Javascript, React Javascript, Typescript, React Typescript

• importStatements.script.preserveFileExtension: (Boolean) default → false

• importStatements.script.javascriptImportStyle

  • import $1 from '_relativePath_'; → default
  • import { $1 } from '_relativePath_';
  • import { $1 as $2 } from '_relativePath_';
  • import * as $1 from '_relativePath_';
  • import '_relativePath_';
  • var $1 = require('_relativePath_');
  • const $1 = require('_relativePath_');
  • var $1 = import('_relativePath_');
  • const $1 = import('_relativePath_');

• importStatements.script.typescriptImportStyle

  • import $1 from '_relativePath_';
  • import { $1 } from '_relativePath_'; → default
  • import { $1 as $2 } from '_relativePath_';
  • import * as $1 from '_relativePath_';
  • import '_relativePath_';

Stylesheets: CSS, SCSS

• importStatements.styleSheet.preserveFileExtension: (Boolean) default → false

• importStatements.styleSheet.cssImportStyle

  • @import '_relativePath_'; → default
  • @import url('_relativePath_');

• importStatements.styleSheet.cssImageImportStyle

  • url('_relativePath_') → default

• importStatements.styleSheet.scssImportStyle

  • @import '_relativePath_'; → default
  • @import url('_relativePath_');
  • @use '_relativePath_';
  • @use '_relativePath_' as *;

• importStatements.styleSheet.scssImageImportStyle

  • url('_relativePath_')'; → default

Markup: HTML, Markdown

• importStatements.markup.htmlScriptImportStyle

  • <script type="text/javascript" src="_relativePath_"></script> → default

• importStatements.markup.htmlImageImportStyle

  • <img src="_relativePath_" alt="sample"> → default

• importStatements.markup.htmlStyleSheetImportStyle

  • <link href="_relativePath_" rel="stylesheet"> → default

• importStatements.markup.markdownImportStyle

  • ![text](_relativePath_) → default

• importStatements.markup.markdownImageImportStyle

  • ![alt-text](_relativePath_ "Hover text") → default
  • ![alt-text][image] / [image]: _relativePath_ "Hover text"

Installation

1. Install VS Code v1.70.0 or higher
2. Launch Visual Studio Code
3. Enter command Ctrl+Shift+P (Windows, Linux) or Cmd+Shift+P (OSX)
4. Select → Extensions: Install Extensions.
5. Choose Drag And Drop Import Relative Path by ElecTreeFrying
6. Reload Visual Studio Code

Changelog

See CHANGELOG for more information.

Contributing

• You can submit bug reports and feature requests in GitHub Issues.
• Leave a review on Visual Studio Marketplace.

Related

More extensions of mine

• Visual Studio Code
• Atom

License

MIT