vue/jsx-uses-vars

prevent variables used in JSX to be marked as unused

• ⚙️ This rule is included in all of "plugin:vue/base", "plugin:vue/essential", "plugin:vue/vue3-essential", "plugin:vue/strongly-recommended", "plugin:vue/vue3-strongly-recommended", "plugin:vue/recommended" and "plugin:vue/vue3-recommended".

Since 0.17.0 the ESLint no-unused-vars rule does not detect variables used in JSX (see details (opens new window)). This rule will find variables used in JSX and mark them as used.

This rule only has an effect when the no-unused-vars rule is enabled.

📖 Rule Details

Without this rule this code triggers warning:

import HelloWorld from './HelloWorld';

export default {
  render () {
    return (
      <HelloWorld msg="world"/>
    )
  },
};

After turning on, HelloWorld is being marked as used and no-unused-vars rule doesn't report an issue.

🔇 When Not To Use It

If you are not using JSX or if you do not use the no-unused-vars rule then you can disable this rule.

🚀 Version

This rule was introduced in eslint-plugin-vue v2.0.0

🔍 Implementation

• Rule source (opens new window)
• Test source (opens new window)