CODEWITHSUNDEEP
visual-studio-code
AncientSwordRage
AncientSwordRage

Reputation: 7608

Refactor/extract JavaScript string in Visual Studio Code into an HTML file

I have a project that uses a lot of template strings, that I want to convert to separate HTML files.

I know Visual Studio Code can move JavaScript to a new file. Can it do the same with HTML string content?

The closest I can do is extract the JavaScript string to a new file, and then rename it and change the extension.

I've not found an issue in the Visual Studio Code GitHub account or any other questions about this.

So I want to go from this:

const MY_TEMPLATE = `<div>{{unicorn.fart()}}</div>`
function useTemplate(imports){
    return {
        template: MY_TEMPLATE,
        scope: {
            unicorn: imports.getUnicorn('charlie')
            onFart: imports.refuelCar(imports.ELECTRIC_CAR)
        }
    }
}

Highlight the string in the MY_TEMPLATE select a right click menu, and then get this:

import template from './MY_TEMPLATE.html'
function useTemplate(imports){
    return {
        template,
        scope: {
            unicorn: imports.getUnicorn('charlie')
            onFart: imports.refuelCar(imports.ELECTRIC_CAR)
        }
    }
}

Is there a setting to change, a version to install/wait for or a plugin?

Upvotes: 0

Views: 282

Answers (1)

Matt Bierner
Matt Bierner

Reputation: 65223

This does not exist as of Visual Studio Code 1.29. Since this is a very specific feature request, and it would best be implemented by an extension and not as part of core Visual Studio Code.

See this guide for information on how to get started writing a Visual Studio Code extension.

Upvotes: 1

Related Questions