Skip to content

Commit

Permalink
New: add vue/no-deprecated-scope-attribute rule (#838)
Browse files Browse the repository at this point in the history
  • Loading branch information
ota-meshi authored and mysticatea committed Mar 4, 2019
1 parent ff6b275 commit 9f2cec1
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/rules/README.md
Expand Up @@ -152,6 +152,7 @@ For example:
| [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords | :wrench: |
| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | |
| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: |
| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns | |
| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax | |
| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |
Expand Down
47 changes: 47 additions & 0 deletions docs/rules/no-deprecated-scope-attribute.md
@@ -0,0 +1,47 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/no-deprecated-scope-attribute
description: disallow deprecated `scope` attribute (in Vue.js 2.5.0+)
---
# vue/no-deprecated-scope-attribute
> disallow deprecated `scope` attribute (in Vue.js 2.5.0+)
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.

## :book: Rule Details

This rule reports deprecated `scope` attribute in Vue.js v2.5.0+.

<eslint-code-block fix :rules="{'vue/no-deprecated-scope-attribute': ['error']}">

```vue
<template>
<ListComponent>
<!-- ✓ GOOD -->
<template v-slot:name="props">
{{ props.title }}
</template>
<template slot="name" slot-scope="props">
{{ props.title }}
</template>
</ListComponent>
<ListComponent>
<!-- ✗ BAD -->
<template slot="name" scope="props">
{{ props.title }}
</template>
</ListComponent>
</template>
```

</eslint-code-block>

## :books: Further reading

- [API - scope](https://vuejs.org/v2/api/#scope-removed)

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-scope-attribute.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-scope-attribute.js)
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -36,6 +36,7 @@ module.exports = {
'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
'no-boolean-default': require('./rules/no-boolean-default'),
'no-confusing-v-for-v-if': require('./rules/no-confusing-v-for-v-if'),
'no-deprecated-scope-attribute': require('./rules/no-deprecated-scope-attribute'),
'no-dupe-keys': require('./rules/no-dupe-keys'),
'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
'no-empty-pattern': require('./rules/no-empty-pattern'),
Expand Down
28 changes: 28 additions & 0 deletions lib/rules/no-deprecated-scope-attribute.js
@@ -0,0 +1,28 @@
/**
* @author Yosuke Ota
* See LICENSE file in root directory for full license.
*/
'use strict'

const utils = require('../utils')
const scopeAttribute = require('./syntaxes/scope-attribute')

module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'disallow deprecated `scope` attribute (in Vue.js 2.5.0+)',
category: undefined,
url: 'https://eslint.vuejs.org/rules/no-deprecated-scope-attribute.html'
},
fixable: 'code',
schema: [],
messages: {
forbiddenScopeAttribute: '`scope` attributes are deprecated.'
}
},
create (context) {
const templateBodyVisitor = scopeAttribute.createTemplateBodyVisitor(context)
return utils.defineTemplateBodyVisitor(context, templateBodyVisitor)
}
}
27 changes: 27 additions & 0 deletions lib/rules/syntaxes/scope-attribute.js
@@ -0,0 +1,27 @@
/**
* @author Yosuke Ota
* See LICENSE file in root directory for full license.
*/
'use strict'
module.exports = {
deprecated: '2.5.0',
createTemplateBodyVisitor (context) {
/**
* Reports `scope` node
* @param {VDirectiveKey} scopeKey node of `scope`
* @returns {void}
*/
function reportScope (scopeKey) {
context.report({
node: scopeKey,
messageId: 'forbiddenScopeAttribute',
// fix to use `slot-scope`
fix: fixer => fixer.replaceText(scopeKey, 'slot-scope')
})
}

return {
"VAttribute[directive=true] > VDirectiveKey[name.name='scope']": reportScope
}
}
}
101 changes: 101 additions & 0 deletions tests/lib/rules/no-deprecated-scope-attribute.js
@@ -0,0 +1,101 @@
'use strict'

const RuleTester = require('eslint').RuleTester
const rule = require('../../../lib/rules/no-deprecated-scope-attribute')

const tester = new RuleTester({
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 2015
}
})

tester.run('no-deprecated-scope-attribute', rule, {
valid: [
`<template>
<LinkList>
<a v-slot:name />
</LinkList>
</template>`,
`<template>
<LinkList>
<a #name />
</LinkList>
</template>`,
`<template>
<LinkList>
<a v-slot="{a}" />
</LinkList>
</template>`,
`<template>
<LinkList>
<a #default="{a}" />
</LinkList>
</template>`,
`<template>
<LinkList>
<a slot="name" />
</LinkList>
</template>`,
`<template>
<LinkList>
<a slot-scope="{a}" />
</LinkList>
</template>`,
`<template>
<LinkList>
<a />
</LinkList>
</template>`
],
invalid: [
{
code: `
<template>
<LinkList>
<template scope="{a}">
<a />
</template>
</LinkList>
</template>`,
output: `
<template>
<LinkList>
<template slot-scope="{a}">
<a />
</template>
</LinkList>
</template>`,
errors: [
{
message: '`scope` attributes are deprecated.',
line: 4
}
]
},
{
code: `
<template>
<LinkList>
<template slot="name" scope="{a}">
<a />
</template>
</LinkList>
</template>`,
output: `
<template>
<LinkList>
<template slot="name" slot-scope="{a}">
<a />
</template>
</LinkList>
</template>`,
errors: [
{
message: '`scope` attributes are deprecated.',
line: 4
}
]
}
]
})

0 comments on commit 9f2cec1

Please sign in to comment.