eslint-plugin-vue-required-attributes
v1.0.1
Published
Require specified attributes on specified components from being used!
Downloads
11,669
Readme
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