eslint-plugin-vue-required-attributes

eslint-plugin-vue-required-attributes

Inspired by eslint-plugin-idiomatic-jsx & require-attributes rule.

Require specified attributes on specified components from being used.

This is useful for things such as:

• Requiring a id attribute on things used by automated tests
• Requiring attributes needed for SEO or a11y concerns

Installation

You'll first need to install ESLint:

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

Next, install eslint-plugin-vue-required-attributes:

# npm
npm install eslint-plugin-vue-required-attributes --save-dev

# yarn
yarn add eslint-plugin-vue-required-attributes --dev

Configuration

Add vue-required-attributes to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix

{
  "plugins": [
    "vue-required-attributes"
  ]
}

Configure the rules you want to use under the rules section.

{
  "rules": {
    "vue-required-attributes/require-attributes": [ 1, {
      // options
    } ]
  }
}

Usage

This rule takes one object argument of type object that defines an associative array of attributes that that should be required on the defined array of components.

{
  "rules": {
    "vue-required-attributes/require-attributes": [
      1,
      {
        "id": ["a", "button", "input"]
      }
    ]
  }
}

Succeed

<a id='my-id'></a>                  <!-- Good: id is provided-->
<input id='my-id' />                <!-- Good: id is provided-->

Fail

<a></a>                             <!-- Bad: id is missing-->
<button></button>                   <!-- Bad: id is missing-->

Custom output message

You may also pass in a 3rd option to change the default message that is output on error.

This can be handy if you want to explain "why" this rule is being used in your project or organization. This option is a function that takes in the nodeType and attribute name and returns a string.

{
  "rules": {
    "vue-required-attributes/require-attributes": [
      1,
      {
        id: ['a', 'button'],
      },
      (componentName: string, missedAttribute: string) => `"${componentName}" missing "${missedAttribute} attribute."`
    ]
  }
}

✏️ Code conduction

This project uses Gitmoji for commit messages