Refactor all Vue component imports to append .vue extension

Question

The Vue CLI is dropping support for extensionless imports, and various features supported by VS Code extensions like Vetur don't work with extensionless imports.

I have a need to modify every default component import from a .vue file to append the extension across the entire codebase. Due to the number of files this is infeasible to do by hand, and some automated method is necessary.

Examples:

Turn:

import Baz from '@/components/Baz'
import Thing from './LocalThing'
import OtherThing from '../../OtherThing'

into:

import Baz from '@/components/Baz.vue'
import Thing from './LocalThing.vue'
import OtherThing from '../../OtherThing.vue'

How can this be achieved?

Answer 1

Regex Find Replace with

Find:

^import (.*?)(?<!\.vue)'$

Replace

import $1.vue'

Don't replace the once already done.

It should work in Find/Replace in Files.

Edit

Then you have to construct a regex based on the filenames that end in .vue

find . -name "*.vue"

Then construct a regex with the file basenames:

^import (.*?(?:Baz|LocalThing|OtherThing))(?<!\.vue)'$