-
-
Notifications
You must be signed in to change notification settings - Fork 663
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New: vue/html-button-has-type rule (#1001)
* New: vue/html-button-has-type rule (fixes #894) * more precise error location * revert npm run update deleted script indent doc ref * fix: eslint-plugin-import when running lint * fix lint errors * update readme and docs * Support bind type attribute
- Loading branch information
1 parent
47e3f89
commit 9a9461a
Showing
6 changed files
with
339 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/html-button-has-type | ||
description: disallow usage of button without an explicit type attribute | ||
--- | ||
# vue/html-button-has-type | ||
|
||
> disallow usage of button without an explicit type attribute | ||
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge> | ||
- :gear: This rule is included in `"plugin:vue/recommended"`. | ||
|
||
Forgetting the type attribute on a button defaults it to being a submit type. | ||
This is nearly never what is intended, especially in your average one-page application. | ||
|
||
## :book: Rule Details | ||
|
||
This rule aims to warn if no type or an invalid type is used on a button type attribute. | ||
|
||
<eslint-code-block :rules="{'vue/html-button-has-type': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<button type="button">Hello World</button> | ||
<button type="submit">Hello World</button> | ||
<button type="reset">Hello World</button> | ||
<!-- ✗ BAD --> | ||
<button>Hello World</button> | ||
<button type="">Hello World</button> | ||
<button type="foo">Hello World</button> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :wrench: Options | ||
|
||
```json | ||
{ | ||
"vue/html-button-has-type": ["error", { | ||
"button": true, | ||
"submit": true, | ||
"reset": true | ||
}] | ||
} | ||
``` | ||
|
||
- `button` ... `<button type="button"></button>` | ||
- `true` (default) ... allow value `button`. | ||
- `false"` ... disallow value `button`. | ||
- `sumbit` ... `<button type="sumbit"></button>` | ||
- `true` (default) ... allow value `submit`. | ||
- `false"` ... disallow value `submit`. | ||
- `reset` ... `<button type="reset"></button>` | ||
- `true` (default) ... allow value `reset`. | ||
- `false"` ... disallow value `reset`. | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-button-has-type.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-button-has-type.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
/** | ||
* @fileoverview Disallow usage of button without an explicit type attribute | ||
* @author Jonathan Santerre <jonathan@santerre.dev> | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const utils = require('../utils') | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
const optionDefaults = { | ||
button: true, | ||
submit: true, | ||
reset: true | ||
} | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: 'disallow usage of button without an explicit type attribute', | ||
category: 'recommended', | ||
url: 'https://eslint.vuejs.org/rules/html-button-has-type.html' | ||
}, | ||
fixable: null, | ||
schema: [ | ||
{ | ||
type: 'object', | ||
properties: { | ||
button: { | ||
default: optionDefaults.button, | ||
type: 'boolean' | ||
}, | ||
submit: { | ||
default: optionDefaults.submit, | ||
type: 'boolean' | ||
}, | ||
reset: { | ||
default: optionDefaults.reset, | ||
type: 'boolean' | ||
} | ||
}, | ||
additionalProperties: false | ||
} | ||
], | ||
messages: { | ||
missingTypeAttribute: 'Missing an explicit type attribute for button.', | ||
invalidTypeAttribute: '{{value}} is an invalid value for button type attribute.', | ||
forbiddenTypeAttribute: '{{value}} is a forbidden value for button type attribute.', | ||
emptyTypeAttribute: 'A value must be set for button type attribute.' | ||
} | ||
}, | ||
|
||
create: function (context) { | ||
const configuration = Object.assign({}, optionDefaults, context.options[0]) | ||
|
||
function report (node, messageId, data) { | ||
context.report({ | ||
node, | ||
messageId, | ||
data | ||
}) | ||
} | ||
|
||
function validateAttribute (attribute) { | ||
const value = attribute.value | ||
const strValue = value.value | ||
if (strValue === '') { | ||
report(value, 'emptyTypeAttribute') | ||
} else if (!(strValue in configuration)) { | ||
report(value, 'invalidTypeAttribute', { value: strValue }) | ||
} else if (!configuration[strValue]) { | ||
report(value, 'forbiddenTypeAttribute', { value: strValue }) | ||
} | ||
} | ||
|
||
function validateDirective (directive) { | ||
const value = directive.value | ||
if (!value.expression) { | ||
report(value, 'emptyTypeAttribute') | ||
} | ||
} | ||
|
||
return utils.defineTemplateBodyVisitor(context, { | ||
"VElement[name='button']" (node) { | ||
if (utils.hasAttribute(node, 'type')) { | ||
validateAttribute(utils.getAttribute(node, 'type')) | ||
} else if (utils.hasDirective(node, 'bind', 'type')) { | ||
validateDirective(utils.getDirective(node, 'bind', 'type')) | ||
} else { | ||
report(node, 'missingTypeAttribute') | ||
} | ||
} | ||
}) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,170 @@ | ||
/** | ||
* @fileoverview Prevent usage of button without an explicit type attribute | ||
* @author Jonathan Santerre | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
var rule = require('../../../lib/rules/html-button-has-type') | ||
|
||
var RuleTester = require('eslint').RuleTester | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Tests | ||
// ------------------------------------------------------------------------------ | ||
|
||
var ruleTester = new RuleTester({ | ||
parser: require.resolve('vue-eslint-parser'), | ||
parserOptions: { ecmaVersion: 2015 } | ||
}) | ||
ruleTester.run('html-button-has-type', rule, { | ||
|
||
valid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><button type="button">Hello World</button></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><button type="submit">Hello World</button></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><button type="reset">Hello World</button></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><slot><button type="button">Hello World</button></slot></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: `<template> | ||
<button type="button">Hello World</button> | ||
<button type="submit">Hello World</button> | ||
<button type="reset">Hello World</button> | ||
</template>` | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: `<template><button :type="buttonType">Hello World</button></template>` | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '' | ||
} | ||
], | ||
|
||
invalid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><button>Hello World</button></template>', | ||
errors: [{ | ||
message: 'Missing an explicit type attribute for button.' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><button type="">Hello World</button></template>', | ||
errors: [{ | ||
message: 'A value must be set for button type attribute.' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><button type="foo">Hello World</button></template>', | ||
errors: [{ | ||
message: 'foo is an invalid value for button type attribute.' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
options: [{ button: false }], | ||
code: '<template><button type="button">Hello World</button></template>', | ||
errors: [{ | ||
message: 'button is a forbidden value for button type attribute.' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
options: [{ submit: false }], | ||
code: '<template><button type="submit">Hello World</button></template>', | ||
errors: [{ | ||
message: 'submit is a forbidden value for button type attribute.' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
options: [{ reset: false }], | ||
code: '<template><button type="reset">Hello World</button></template>', | ||
errors: [{ | ||
message: 'reset is a forbidden value for button type attribute.' | ||
}] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
options: [{ button: false, submit: false, reset: false }], | ||
code: `<template> | ||
<button type="button">Hello World</button> | ||
<button type="submit">Hello World</button> | ||
<button type="reset">Hello World</button> | ||
</template>`, | ||
errors: [ | ||
{ | ||
message: 'button is a forbidden value for button type attribute.' | ||
}, | ||
{ | ||
message: 'submit is a forbidden value for button type attribute.' | ||
}, | ||
{ | ||
message: 'reset is a forbidden value for button type attribute.' | ||
} | ||
] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
options: [{ button: true, submit: true, reset: false }], | ||
code: `<template> | ||
<button type="button">Hello World</button> | ||
<button type="submit">Hello World</button> | ||
<button type="reset">Hello World</button> | ||
<button type="">Hello World</button> | ||
<button type="foo">Hello World</button> | ||
</template>`, | ||
errors: [ | ||
{ | ||
message: 'reset is a forbidden value for button type attribute.' | ||
}, | ||
{ | ||
message: 'A value must be set for button type attribute.' | ||
}, | ||
{ | ||
message: 'foo is an invalid value for button type attribute.' | ||
} | ||
] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><button>Hello World</button><button>Hello World</button></template>', | ||
errors: [ | ||
{ | ||
message: 'Missing an explicit type attribute for button.' | ||
}, | ||
{ | ||
message: 'Missing an explicit type attribute for button.' | ||
} | ||
] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: `<template><button :type="">Hello World</button></template>`, | ||
errors: [ | ||
{ | ||
message: 'A value must be set for button type attribute.' | ||
} | ||
] | ||
} | ||
] | ||
}) |