ESLint is not working for auto-imported ref and computed

[shuuji3]

Elk's ESLint config has rules for ref and computed such as vue/return-in-computed-property and vue/no-ref-as-operand. These rules can prevent errors like missing .value.

But currently eslint-plugin-vue doesn't support them for auto-imported ref and computed yet (ref. vuejs/eslint-plugin-vue#1969).

As a workaround, we can temporarily insert the import statement like import { ref, computed, watch, watchEffect, shallowRef } from 'vue' to every *.vue and *.ts files with the following temporary config adjustment.

diff --git a/eslint.config.js b/eslint.config.js
index e02aae2e..3e19a2fc 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,6 +5,7 @@ export default await antfu(
   {
     unocss: false,
     vue: {
+      files: ['**/*.vue', '**/*.ts'],
       overrides: {
         'vue/no-restricted-syntax': ['error', {
           selector: 'VElement[name=\'a\']',
@@ -25,6 +26,13 @@ export default await antfu(
     rules: {
       // TODO: migrate all process reference to `import.meta.env` and remove this rule
       'node/prefer-global/process': 'off',
+      'sort-imports': 'off',
+      'import/order': 'off',
+      'unused-imports/no-unused-imports': 'off',
+      'import/newline-after-import': 'off',
+      'import/no-duplicates': 'off',
+      'ts/no-redeclare': 'off',
     },
   },
   // Sort local files

(Note: **/*.ts was needed to enable vue-related rules other than *.vue file like composables/masto/search.ts. And the bottom ones from sort-imports to ts/no-redeclare is just to ignore temporary import statements.)

To fix this issue, we'll need to wait for the upstream fix.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

[shuuji3]

Example shell script to insert import statements (this is for fish shell):

for i in (find . -name '*.ts')
       sed -i "1 i\import { ref, computed, watch, watchEffect, shallowRef } from 'vue'" $i
   end

for i in (find . -name '*.vue')
       sed -E -i "s/(<script setup.+)/\1\nimport { ref, computed, watch, watchEffect, shallowRef } from 'vue'/" $i
   end

[userquin]

/cc @antfu

[patak-dev]

Ah, good catch. I think it would be good if auto imports supports this rule somehow, it feels important for Vue projects in general. Let's wait to see if @antfu has some ideas.

[antfu]

PR's here vuejs/eslint-plugin-vue#2422