8000 vue/no-bare-strings-in-template: per-component ignoring of slot content · Issue #2613 · vuejs/eslint-plugin-vue · GitHub
[go: up one dir, main page]
Skip to content

vue/no-bare-strings-in-template: per-component ignoring of slot content #2613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
justingrant opened this issue Nov 18, 2024 · 3 comments · Fixed by #2734
Closed

vue/no-bare-strings-in-template: per-component ignoring of slot content #2613

justingrant opened this issue Nov 18, 2024 · 3 comments · Fixed by #2734

Comments

@justingrant
Copy link
justingrant commented Nov 18, 2024 •
edited
Loading

The v-icon component in Vuetify for Vue 2 uses the default slot to define the icon ID. This is not user-readable text, so I'd like to disable vue/no-bare-strings-in-template for all contents of any <v-icon> components.

For Vue3, this has been moved from a slot to an icon prop, so it's a non-issue there. But ignoring slot contents for some components seems like a good addition to this rule.

What rule do you want to change?
vue/no-bare-strings-in-template

Does this change cause the rule to produce more or fewer warnings?

Fewer

How will the change be implemented? (New option, new default behavior, etc.)?

New option to allow some components or tags to be exempted (by name). For example:

  'vue/no-bare-strings-in-template': ['error',
    {
      ignoreSlots: {
        'v-icon': [ true /* true means default slot */, 'some-other-slot-name' ]
      }
    }
  ]

Please provide some example code that this change will affect:

          <v-icon color="error">
            $power
          </v-icon>

What does the rule currently do for this code?
Error, because the rule thinks that $power should be localized.

What will the rule do after it's changed?
No error.

Additional context
@justingrant justingrant changed the title vue/no-bare-strings-in-template: per-component exclusions vue/no-bare-strings-in-template: per-component ignoring of slot content Nov 18, 2024
@waynzh
Copy link
Member
waynzh commented Dec 11, 2024 •
edited
Loading

As a workaround, you can use the plain text whitelist allowlist option, or use something like {{ '$power' }} to bypass the check.

Providing a new option to ignore slots might not be a general solution, so I'll leave this open for others to share their opinions.

@justingrant
Copy link
Author

If whitelist let me use regexes, then it would work perfectly, because I could whitelist something like /\$\w+/. But having to manually add every icon name to a whitelist option would be a big hassle.

@FloEdelmann
Copy link
Member

Allowing regexp patterns in allowlist seems like a good idea to me. PRs welcome for that 🙂

This was referenced Apr 3, 2025
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(no-bare-strings-in-template): allowlist support regex vuejs/eslint-plugin-vue
3 participants
@FloEdelmann @justingrant @waynzh
0