-
-
Notifications
You must be signed in to change notification settings - Fork 668
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New: Add
vue/no-deprecated-data-object-declaration
rule (#1083)
- Loading branch information
1 parent
7c24f5e
commit 7609be6
Showing
6 changed files
with
443 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,65 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-deprecated-data-object-declaration | ||
description: disallow using deprecated object declaration on data | ||
--- | ||
# vue/no-deprecated-data-object-declaration | ||
> disallow using deprecated object declaration on data | ||
- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`. | ||
- :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 use of deprecated object declaration on `data` property (in Vue.js 3.0.0+). | ||
The different from `vue/no-shared-component-data` is the root instance being also disallowed. | ||
|
||
<eslint-code-block fix :rules="{'vue/no-deprecated-data-object-declaration': ['error']}"> | ||
|
||
```vue | ||
<script> | ||
/* ✗ BAD */ | ||
createApp({ | ||
data: { | ||
foo: null | ||
} | ||
}).mount('#app') | ||
export default { | ||
data: { | ||
foo: null | ||
} | ||
} | ||
/* ✓ GOOD */ | ||
export default { | ||
data () { | ||
return { | ||
foo: null | ||
} | ||
} | ||
} | ||
createApp({ | ||
data () { | ||
return { | ||
foo: null | ||
} | ||
} | ||
}).mount('#app') | ||
</script> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :wrench: Options | ||
|
||
Nothing. | ||
|
||
## :books: Further reading | ||
|
||
- [RFC: remove data object declaration](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0019-remove-data-object-declaration.md) | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-data-object-declaration.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-data-object-declaration.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,86 @@ | ||
/** | ||
* @fileoverview disallow using deprecated object declaration on data | ||
* @author yoyo930021 | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const utils = require('../utils') | ||
|
||
function isOpenParen (token) { | ||
return token.type === 'Punctuator' && token.value === '(' | ||
} | ||
|
||
function isCloseParen (token) { | ||
return token.type === 'Punctuator' && token.value === ')' | ||
} | ||
|
||
function getFirstAndLastTokens (node, sourceCode) { | ||
let first = sourceCode.getFirstToken(node) | ||
let last = sourceCode.getLastToken(node) | ||
|
||
// If the value enclosed by parentheses, update the 'first' and 'last' by the parentheses. | ||
while (true) { | ||
const prev = sourceCode.getTokenBefore(first) | ||
const next = sourceCode.getTokenAfter(last) | ||
if (isOpenParen(prev) && isCloseParen(next)) { | ||
first = prev | ||
last = next | ||
} else { | ||
return { first, last } | ||
} | ||
} | ||
} | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'problem', | ||
docs: { | ||
description: 'disallow using deprecated object declaration on data', | ||
categories: ['vue3-essential'], | ||
url: 'https://eslint.vuejs.org/rules/no-deprecated-data-object-declaration.html' | ||
}, | ||
fixable: 'code', | ||
schema: [], | ||
messages: { | ||
objectDeclarationIsDeprecated: "Object declaration on \'data\' property is deprecated. Using function declaration instead." | ||
} | ||
}, | ||
|
||
create (context) { | ||
const sourceCode = context.getSourceCode() | ||
|
||
return utils.executeOnVue(context, (obj) => { | ||
obj.properties | ||
.filter(p => | ||
p.type === 'Property' && | ||
p.key.type === 'Identifier' && | ||
p.key.name === 'data' && | ||
p.value.type !== 'FunctionExpression' && | ||
p.value.type !== 'ArrowFunctionExpression' && | ||
p.value.type !== 'Identifier' | ||
) | ||
.forEach(p => { | ||
context.report({ | ||
node: p, | ||
messageId: 'objectDeclarationIsDeprecated', | ||
fix (fixer) { | ||
const tokens = getFirstAndLastTokens(p.value, sourceCode) | ||
|
||
return [ | ||
fixer.insertTextBefore(tokens.first, 'function() {\nreturn '), | ||
fixer.insertTextAfter(tokens.last, ';\n}') | ||
] | ||
} | ||
}) | ||
}) | ||
}) | ||
} | ||
} |
Oops, something went wrong.