Proposal: no bare strings in template

Please describe what the rule should do: Projects which use localization (e.g. vue-i18n) should not allow the use of bare strings (hardcoded strings) in templates. They should force the use the mustache syntax or directives.

This proposal is based on the Ember template linter, which includes such a rule already: https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-bare-strings.md

What category of rule is this? (place an “X” next to just one item)

[x] Enforces code style [ ] Warns about a potential error [ ] Suggests an alternate way of doing something [ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about: Invalid template content

<h1>Foo baa</h1>

Valid template content

<h1>{{ $t('myTranslationKey') }}</h1>
<h1>{{ aComputedValue }}</h1>
<h1 v-t="'foo.bar'"></h1>
<h1><span>{{ aComputedValue }}</span></h1>

Why should this rule be included? It allows to test templates for hardcoded text which most likely will lead to issues in localized projects.

[chrisvfritz]

Ah, I see. Then we may want to disable string literals for directives, with a whitelist of some directives, like v-t and the user could add their own as well. Otherwise, we open up a big hole with v-text, v-html, and directives defined by other libraries, like v-tooltip. For example:

<p v-text="'hello'"/>

<button v-tooltip="'Hard-coded button tooltip content'">

We probably don’t want those to be considered valid, right?

[nilesh9836]

can anybody help me with how to use this rule in my package.json