Refactor all Vue component imports to append .vue extension

user_3547347 0
Viewed 288

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?

es6-modules vue.js visual-studio-code refactoring javascript
1 Answers

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)'$
user_99383170
Related