Auto Import Relative Path (vscode extension)

Auto Import Relative Path, is an extension for VS Code that makes importing relative paths much easier and less tedious. With this extension, you can say goodbye to long and complicated import statements and file paths. It provides a simple and efficient way to import files without having to manually type out the entire path. Whether you're working on a small project or a large one with many files, this extension can save you a lot of time and effort

Supported file extensions

Usage

1. Press Ctrl+Shift+A on a file in Explorer, then press Ctrl+I in your active text editor to import it. → Click here to see it in action.
2. Alternatively, press Alt+D to automatically import the file in your active text editor. → Click here to see it in action.

Click here for more usage examples.

Commands

Configuration Settings

General settings

• preferences.importStatementPlacement: Choose where you want your import statements to be placed in your code with this setting. You can choose to place them at the 'top' of the import list, at the 'bottom', or on the current position of the mouse cursor with the 'Cursor' option.

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="https://github.com/ElecTreeFrying/auto-import-relative-path/raw/HEAD/_relativePath_" alt="sample"> → default

• importStatements.markup.htmlStyleSheetImportStyle

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

• importStatements.markup.markdownImportStyle

  • ![text](https://github.com/ElecTreeFrying/auto-import-relative-path/raw/HEAD/_relativePath_) → default

• importStatements.markup.markdownImageImportStyle

  • ![alt-text](https://github.com/ElecTreeFrying/auto-import-relative-path/raw/HEAD/_relativePath_ "Hover text") → default
  • ![alt-text][image] / [image]: _relativePath_ "Hover text"

Installation

1. Install VS Code v1.76.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 Auto Import Relative Path by ElecTreeFrying
6. Reload Visual Studio Code

Changelog

See CHANGELOG for more information.

Contributing

• File bugs, or any feature requests in GitHub Issues.
• Leave a review on Visual Studio Marketplace.

Related

More extensions of mine

• VSCode Text editor
• Atom Text editor

License

MIT