DEV Community

Andreas Riedmüller
Andreas Riedmüller

Posted on • Edited on

🌊 A better way to do image/file imports?

Do you know the situation when you are in the middle of your code and want to import an image to use it right there?

You need to:

  1. leave your current line and jump to the top of your file 2. write something like import imageTest from './test-image.jpg
  2. get back to the line you left.

I hate things like that because they can interrupt my flow and throw me off.

With automatic import sorting, at least I don't have to find the right spot to import it. I can just add the import in the first line and it will be sorted automatically.

Here's the flow I'd like to get going:

  1. write the variable name you would like to use and select it: Image description
  2. Hit a hotkey eg. cmd-shift-i: This will bring up a dialog where i can choose a file like this: Image description
  3. Hit enter Done.

Notes

Importing svgr

When using svgr, it would be nice to be able to choose whether to import the SVG as a ReactComponent.

// A
import iconTest from 'icon-test.svg'
// B
import { ReactComponent as SvgIconTest } from 'icon-test.svg'
Enter fullscreen mode Exit fullscreen mode

Existing solutions
This is the only plugin I found so far:
https://github.com/ElecTreeFrying/auto-import-relative-path

You can select a file in the sidebar and it does import the file in the currently active tab.

Looks cool but still not exactly what I'm looking for.


Do you have any solution for this or a better idea? If I would make a VSCode plugin, would you use it? Any other thoughts?

Top comments (0)