eslint-plugin-vue

Appearance

vue/jsx-uses-vars ​

prevent variables used in JSX to be marked as unused

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

Since 0.17.0 the ESLint no-unused-vars rule does not detect variables used in JSX (see details). 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:

jsx
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 ​