Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/rules/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ For example:
| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` | | :hammer: |
| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | | :hammer: |
| [vue/no-deprecated-delete-set](./no-deprecated-delete-set.md) | disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+) | | :warning: |
| [vue/no-deprecated-model-definition](./no-deprecated-model-definition.md) | disallow deprecated `model` definition (in Vue.js 3.0.0+) | :bulb: | :warning: |
| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` | | :hammer: |
| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty | | :hammer: |
Expand Down
52 changes: 52 additions & 0 deletions docs/rules/no-deprecated-delete-set.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/no-deprecated-delete-set
description: disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)
---

# vue/no-deprecated-delete-set

> disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)

- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>

## :book: Rule Details

This rule reports use of deprecated `$delete` and `$set`. (in Vue.js 3.0.0+).

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

```vue
<script>
import { set, del } from 'vue'
export default {
mounted () {
/* ✗ BAD */
this.$set(obj, key, value)
this.$delete(obj, key)

Vue.set(obj, key, value)
Vue.delete(obj, key)

set(obj, key, value)
del(obj, key)
}
}
</script>
```

</eslint-code-block>

## :wrench: Options

Nothing.

## :books: Further Reading

- [Migration Guide - Removed APIs](https://v3-migration.vuejs.org/breaking-changes/#removed-apis)

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-delete-set.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-delete-set.js)
1 change: 1 addition & 0 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@
'no-constant-condition': require('./rules/no-constant-condition'),
'no-custom-modifiers-on-v-model': require('./rules/no-custom-modifiers-on-v-model'),
'no-deprecated-data-object-declaration': require('./rules/no-deprecated-data-object-declaration'),
'no-deprecated-delete-set': require('./rules/no-deprecated-delete-set'),
'no-deprecated-destroyed-lifecycle': require('./rules/no-deprecated-destroyed-lifecycle'),
'no-deprecated-dollar-listeners-api': require('./rules/no-deprecated-dollar-listeners-api'),
'no-deprecated-dollar-scopedslots-api': require('./rules/no-deprecated-dollar-scopedslots-api'),
Expand Down Expand Up @@ -279,7 +280,7 @@
vue: require('./processor')
},
environments: {
// TODO Remove in the next major version

Check warning on line 283 in lib/index.js

View workflow job for this annotation

GitHub Actions / Lint

Unexpected 'todo' comment: 'TODO Remove in the next major version'
/** @deprecated */
'setup-compiler-macros': {
globals: {
Expand Down
142 changes: 142 additions & 0 deletions lib/rules/no-deprecated-delete-set.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
/**
* @author Wayne Zhang
* See LICENSE file in root directory for full license.
*/
'use strict'

const utils = require('../utils')
const { findVariable } = require('@eslint-community/eslint-utils')

const deprecatedApis = new Set(['set', 'delete'])
const deprecatedImportApis = new Set(['set', 'del'])
const deprecatedDollarApis = new Set(['$set', '$delete'])

/**
* @param {Expression|Super} node
*/
function isVue(node) {
return node.type === 'Identifier' && node.name === 'Vue'
}

module.exports = {
meta: {
type: 'problem',
docs: {
description:
'disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)',
categories: undefined,
url: 'https://eslint.vuejs.org/rules/no-deprecated-delete-set.html'
},
fixable: null,
schema: [],
messages: {
deprecated: 'The `$delete`, `$set` is deprecated.'
}
},
/** @param {RuleContext} context */
create(context) {
/**
* @param {Identifier} identifier
* @param {RuleContext} context
* @returns {CallExpression|undefined}
*/
function getVueDeprecatedCallExpression(identifier, context) {
// Instance API: this.$set()
if (
deprecatedDollarApis.has(identifier.name) &&
identifier.parent.type === 'MemberExpression' &&
utils.isThis(identifier.parent.object, context) &&
identifier.parent.parent.type === 'CallExpression' &&
identifier.parent.parent.callee === identifier.parent
) {
return identifier.parent.parent
}

// Vue 2 Global API: Vue.set()
if (
deprecatedApis.has(identifier.name) &&
identifier.parent.type === 'MemberExpression' &&
isVue(identifier.parent.object) &&
identifier.parent.parent.type === 'CallExpression' &&
identifier.parent.parent.callee === identifier.parent
) {
return identifier.parent.parent
}

// Vue 3 Global API
if (
identifier.parent.type === 'CallExpression' &&
identifier.parent.callee === identifier
) {
const variable = findVariable(
utils.getScope(context, identifier),
identifier
)

if (variable != null && variable.defs.length === 1) {
const def = variable.defs[0]

// import { set as st } from 'vue'; st()
if (
def.type === 'ImportBinding' &&
def.node.type === 'ImportSpecifier' &&
def.node.imported.type === 'Identifier' &&
deprecatedImportApis.has(def.node.imported.name) &&
def.node.parent.type === 'ImportDeclaration' &&
def.node.parent.source.value === 'vue'
) {
return identifier.parent
}

// const { set, delete } = require('vue'); set()
if (
def.type === 'Variable' &&
def.node.type === 'VariableDeclarator' &&
def.node.id.type === 'ObjectPattern' &&
def.node.init?.type === 'CallExpression' &&
def.node.init.callee.type === 'Identifier' &&
def.node.init.callee.name === 'require' &&
def.node.init.arguments.length === 1 &&
def.node.init.arguments[0].type === 'Literal' &&
def.node.init.arguments[0].value === 'vue'
) {
const properties = def.node.id.properties
for (const prop of properties) {
if (
prop.type === 'Property' &&
prop.key.type === 'Identifier' &&
deprecatedImportApis.has(prop.key.name) &&
prop.value.type === 'Identifier' &&
prop.value.name === identifier.name
) {
return identifier.parent
}
}
}
}
}

return undefined
}

const nodeVisitor = {
/** @param {Identifier} node */
Identifier(node) {
const callExpression = getVueDeprecatedCallExpression(node, context)
if (!callExpression) {
return
}

context.report({
node,
messageId: 'deprecated'
})
}
}

return utils.compositingVisitors(
utils.defineVueVisitor(context, nodeVisitor),
utils.defineScriptSetupVisitor(context, nodeVisitor)
)
}
}
Loading
Loading