ReactJS Component Renaming

[AlexMachin1997]

Hi,

I've been using this plugin for a few weeks now and it's honeslty been either working or not, it's such a pain.

When I rename the opening tag it should rename the component closing tag, however , it doesn't it just doesn't do anything.

Im not sure why this is not happening with react, it shuld behave like normal HTML but it doesn't.

Is there some confiration Im missing ? I should be able to install the plugin and it should just work, I shouldn't need to mess around maintaining setting files all day.

UPDATE: 12/07/2020

The plugin seems to work and doesn't work, I just saw it work but it doesn't always work which is annoying.

[machineghost]

I just want to add that I set:

"auto-rename-tag.activationOnLanguage": ["*"],

  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "javascriptreact"
  ]

in settings and I still can't get it to rename JSX tags.

[AlexMachin1997]

@machineghost

Have you tried adding something along the lines of this:

    "files.associations": {
        "*.react.js": "javascriptreact",
        "*.jsx": "javascriptreact",
        "*.js": "javascriptreact"
    }

[machineghost]

Thanks, I added that (well, just the .js one, as I don't use the other extensions). As you noted:

The plugin seems to work and doesn't work, I just saw it work but it doesn't always work which is annoying.

so I'm hesitant to declare total victory ... but it does seem to be working a lot better now!

[AlexMachin1997]

@machineghost Glad it helped out in the meantime, it's weird. I guess all right react files need to be "javascriptreact" or whatever 🤷

[machineghost]

Just to follow up, there's clearly other bugs at play here. This did help, but I pretty consistently (although still intermittently; the extension does work X% of the time) go to rename a tag expecting the matching tag to change ... and it doesn't.

Hopefully someone will tackle that (again, separate but incredibly frustrating) bug. If I have to hit F2 every time because I never know whether the extension will work, it all but defeats the purpose of using the extension.

[SimonSiefke]

To provide some more context, here is a simple example where it works:

const Button = () => <button>click me</button>

Here is a simple example where it doesn't work:

const Button = () => <button onClick={() => {}}>click me</button>

Currently Auto-Rename-Tag uses one parser for all languages. For example: <button it is processed as an opening tag and > is processed as the end of an opening tag. That works well with a lot of languages (html, xml, ejs, vue) but often times that doesn't work with React. In the second example, > is not the end of the opening tag but part of an arrow function () => {}.

I've tried to add some workarounds for this in https://github.com/formulahendry/vscode-auto-rename-tag/pull/556. You can try that version by downloading this vsix: auto-rename-tag-0.1.5.zip

[AlexMachin1997]

@machineghost @SimonSiefke Yeah I've noticed that too.

Sometimes it works well, othertimes it just doesn't auto-rename the tag weirdly. It's like it can't find it 🤔