eslint-plugin-data-attribute

Ensure specified elements have a specified data attribute in Vue.js components.

Installation

To use this ESLint plugin, you need to install it via npm:

npm install eslint-plugin-data-attribute --save-dev

Usage

Add data-attribute to the plugins section of your ESLint configuration file and configure the rule under the rules section.

.eslintrc.js

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'data-attribute',
  ],
  rules: {
    'data-attribute/data-attribute': ['error', {
      attributes: ['data-test-id'],  // Customizable attributes to enforce
      elements: ['button', 'input']  // Customizable elements to check
    }],
  },
};

Rule Details

This rule aims to ensure that specified elements have a specified data attribute in Vue.js components.

Rule Options

The rule accepts an options object with the following properties:

• attributes: An array of attribute names that must be present on the specified elements. Default is ['data-test-id'].
• elements: An array of element names that should be checked for the specified attributes. Default is ['button', 'input'].

Examples

Valid

<template>
  <div data-test-id="123"></div>
</template>

<template>
  <div :data-test-id="123"></div>
</template>

<template>
  <span :data-custom-id="123"></span>
</template>

<template>
  <QBtn data-test-id="asdf"></QBtn>
</template>

<template>
  <QBtn :data-test-id="`platform-selector_${platform}`"></QBtn>
</template>

Invalid

<template>
  <div></div>
</template>

<template>
  <span></span>
</template>

<template>
  <button></button>
</template>

<template>
  <input></input>
</template>

Development and Testing

Running Tests

You can run the tests using Mocha by executing the following command:

npm test

Testing a Specific File

To lint a specific file with debugging output, use the following command:

Unix-like Systems (Linux, macOS):

DEBUG=eslint-plugin-data-attribute npx eslint ./path/to/your/file.vue --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore

Windows (using cross-env):

cross-env DEBUG=eslint-plugin-data-attribute npx eslint ./path/to/your/file.vue --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore

Contributing

Contributions are welcome! Please open an issue or submit a pull request with your changes.

License

This project is licensed under the MIT License.