Merge branch 'master' into ci-workflow

vuejs · Dec 16, 2024 · c204aae · c204aae
2 parents c7d28c2 + 9453949
commit c204aae
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 13 deletions.
diff --git a/tests/lib/rules/jsx-uses-vars.js b/tests/lib/rules/jsx-uses-vars.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const eslint = require('../../eslint-compat')
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/jsx-uses-vars')
 const { getCoreRule } = require('../../../lib/utils')
 const ruleNoUnusedVars = getCoreRule('no-unused-vars')
 
-const RuleTester = eslint.RuleTester
 const ruleTester = new RuleTester({
   languageOptions: {
     ecmaVersion: 6,
@@ -108,7 +108,23 @@ describe('jsx-uses-vars', () => {
       `,
         errors: [
           {
-            message: "'SomeComponent' is defined but never used."
+            message: "'SomeComponent' is defined but never used.",
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'SomeComponent'.",
+                    output: `
+        /* eslint vue/jsx-uses-vars: 1 */
+        import './SomeComponent.jsx';
+        export default {
+          render () {
+            return <div></div>;
+          },
+        };
+      `
+                  }
+                ]
+              : null
           }
         ]
       },
@@ -128,7 +144,25 @@ describe('jsx-uses-vars', () => {
       `,
         errors: [
           {
-            message: "'wrapper' is assigned a value but never used."
+            message: "'wrapper' is assigned a value but never used.",
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'wrapper'.",
+                    output: `
+        /* eslint vue/jsx-uses-vars: 1 */
+        import SomeComponent from './SomeComponent.jsx';
+        
+
+        export default {
+          render () {
+            return <div></div>;
+          },
+        };
+      `
+                  }
+                ]
+              : null
           }
         ]
       }

diff --git a/tests/lib/rules/script-setup-uses-vars.js b/tests/lib/rules/script-setup-uses-vars.js
@@ -5,12 +5,12 @@
  */
 'use strict'
 
-const eslint = require('../../eslint-compat')
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/script-setup-uses-vars')
 const { getCoreRule } = require('../../../lib/utils')
 const ruleNoUnusedVars = getCoreRule('no-unused-vars')
 
-const RuleTester = eslint.RuleTester
 const ruleTester = new RuleTester({
   languageOptions: {
     parser: require('vue-eslint-parser'),
@@ -260,7 +260,39 @@ describe('script-setup-uses-vars', () => {
         errors: [
           {
             message: "'Bar' is defined but never used.",
-            line: 6
+            line: 6,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'Bar'.",
+                    output: `
+        <script setup>
+          /* eslint vue/script-setup-uses-vars: 1 */
+          // imported components are also directly usable in template
+          import Foo from './Foo.vue'
+          import './Bar.vue'
+          import { ref } from 'vue'
+
+          // write Composition API code just like in a normal setup()
+          // but no need to manually return everything
+          const count = ref(0)
+          const inc = () => {
+            count.value++
+          }
+          const foo = ref(42)
+          console.log(foo.value)
+          const bar = ref(42)
+          bar.value++
+          const baz = ref(42)
+        </script>
+
+        <template>
+          <Foo :count="count" @click="inc" />
+        </template>
+        `
+                  }
+                ]
+              : null
           },
           {
             message: "'baz' is assigned a value but never used.",
@@ -285,7 +317,24 @@ describe('script-setup-uses-vars', () => {
         errors: [
           {
             message: "'camelCase' is defined but never used.",
-            line: 4
+            line: 4,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'camelCase'.",
+                    output: `
+        <script setup>
+          /* eslint vue/script-setup-uses-vars: 1 */
+          import './component.vue'
+        </script>
+
+        <template>
+          <CamelCase />
+        </template>
+        `
+                  }
+                ]
+              : null
           }
         ]
       },
@@ -308,7 +357,26 @@ describe('script-setup-uses-vars', () => {
         errors: [
           {
             message: "'msg' is assigned a value but never used.",
-            line: 5
+            line: 5,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'msg'.",
+                    output: `
+        <script setup>
+          /* eslint vue/script-setup-uses-vars: 1 */
+          if (a) {
+            
+          }
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `
+                  }
+                ]
+              : null
           }
         ]
       },

diff --git a/tests/lib/script-setup-vars.js b/tests/lib/script-setup-vars.js
@@ -1,6 +1,7 @@
 'use strict'
 
-const { RuleTester } = require('../eslint-compat')
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../eslint-compat')
 const { getCoreRule } = require('../../lib/utils')
 const ruleNoUnusedVars = getCoreRule('no-unused-vars')
 const ruleNoUndef = getCoreRule('no-undef')
@@ -220,7 +221,38 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'Bar' is defined but never used.",
-            line: 5
+            line: 5,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'Bar'.",
+                    output: `
+        <script setup>
+          // imported components are also directly usable in template
+          import Foo from './Foo.vue'
+          import './Bar.vue'
+          import { ref } from 'vue'
+
+          // write Composition API code just like in a normal setup()
+          // but no need to manually return everything
+          const count = ref(0)
+          const inc = () => {
+            count.value++
+          }
+          const foo = ref(42)
+          console.log(foo.value)
+          const bar = ref(42)
+          bar.value++
+          const baz = ref(42)
+        </script>
+
+        <template>
+          <Foo :count="count" @click="inc" />
+        </template>
+        `
+                  }
+                ]
+              : null
           },
           {
             message: "'baz' is assigned a value but never used.",
@@ -244,7 +276,23 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'camelCase' is defined but never used.",
-            line: 3
+            line: 3,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'camelCase'.",
+                    output: `
+        <script setup>
+          import './component.vue'
+        </script>
+
+        <template>
+          <CamelCase />
+        </template>
+        `
+                  }
+                ]
+              : null
           }
         ]
       },
@@ -266,7 +314,25 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'msg' is assigned a value but never used.",
-            line: 4
+            line: 4,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'msg'.",
+                    output: `
+        <script setup>
+          if (a) {
+            
+          }
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `
+                  }
+                ]
+              : null
           }
         ]
       },