Live template - move import to top of file

Trying to create a live template that allows me to write a console.log statement inside React useEffect. The issue Im having is getting the import statement to be inserted at the top of the file, like line 1, to avoid the webpack/build error. Here's the template I'm trying. I want to be able to use it anywhere in a file but have the import line automatically inserted at the top of the file. Is this doable?

import { useEffect } from 'react';
useEffect(() => {
console.log('%c>>>>', 'color:lime;font-size:17px;', {$NAME$});



Hi there,

Live Templates are code snippets (like paste predefined text) with some dynamic parts on that text: invoke code completion at specific place, make some basic transformations on placeholders/entered values -- stuff like that.

It will not invoke "do import" or "insert another fragment in another part of the file " kind of stuff for you.


No, it's not doable

I can only suggest removing import from template and using auto-import (available on Alt+Enter) to add missing imports once the code is added


Please sign in to leave a comment.