vue/dot-notation conflict with noPropertyAccessFromIndexSignature typescript setting

[iliubinskii]

Checklist

• [+] I have tried restarting my IDE and the issue persists.
• [+] I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.8.0
• eslint-plugin-vue version: 8.4.0
• Node version: 14.18
• Operating System: Win 10

Please show your full configuration:

tsconfig.json:
  "noPropertyAccessFromIndexSignature": true,

eslintrc.js:
  "vue/dot-notation": "warn",

What did you do?

<script lang="ts">
export default defineComponent({
  setup() {
    const item: Record<string, string> = { name: "Value" };
    return { item };
  }
});
</script>

<template>
  <div>{{ item["name"] }}</div>
</template>

What did you expect to happen?

The rule should leave item["name"] as is because it comes from index signature

What actually happened?

Vue ESLint rule transforms it to item.name after which I see typescript error:

Repository to reproduce this issue

I have this issue in private repository. I will create public reproduction repository on demand, if needed.

[FloEdelmann]

I think in this case, disabling the vue/dot-notation for your project is the best option. I don't think there is a way for us to guess that

1. the project uses TypeScript
2. the noPropertyAccessFromIndexSignature TypeScript setting is enabled
3. the object type is Record<string, any>

[iliubinskii]

There is typescript-eslint rule: https://typescript-eslint.io/rules/dot-notation/ that already correctly treats this situation. Maybe this will help.

Strategically thinking, it would be great to have a bridge that would allow to apply any typescript-eslint rule inside and a bridge for any core eslint rule. This would allow to get rid of duplicate rules like vue/dot-notation that already exist in eslint and typescript-eslint.

I can even imagine a flow for such bridge:

1. Convert .vue file to .ts file that will contain all code extracted from
2. Create map between .vue and .ts
3. Get typescript-eslint response
4. Correct line/column data using previously created map

I think in this case, disabling the vue/dot-notation for your project is the best option.

Thx. I'll use this option for the moment.

[FloEdelmann]

a bridge for any core eslint rule

We already have that: https://github.com/vuejs/eslint-plugin-vue/blob/d6f0337d88ce39214f4bf2853a5cdc26e2c30e32/lib/utils/index.js#L375

[iliubinskii]

wrapCoreRule(coreRuleName, options) {

Then I have additional questions:

1. Is there any documentation on how I can use it?

2. Is it possible to wrap core rule inside eslint config file?

For example, consider this plugin: https://www.npmjs.com/package/eslint-plugin-no-autofix

It allows to disable auto-fix for any third-party rule. This is their sample eslint config:

{
  "plugins": ["no-autofix", "react"],
  "rules": {
    "react/jsx-indent": "off",
    "no-autofix/react/jsx-indent": "error",
  }
}

So, is it possible to write something like this:

{
  "rules": {
    "vue/wrap/dot-notation": "warn",
    "vue/wrap/@typescript-eslint/dot-notation": "warn"
  }
}

If no, I would like to submit this as feature request (I can create separate ticket if it make sense).

3. Is it possible to wrap typescript-eslint rules?

If yes, then the solution to my issue would be to wrap "@typescript-eslint/dot-notation" rule because they already solved it.

If no, I would like to submit this (wraper for typescript-eslint rules) as feature request.

[FloEdelmann]

I don't know. @ota-meshi maybe you can help here?

[ota-meshi]

I think it's very difficult to implement. The parser provides the AST of the expression in the template, but does not provide the typings. If you want to implement the rule you need to create a new parser.

[ota-meshi]

I think it's better for you to turn off that rule.