Rule Proposal: `vue/no-deprecated-delete-set`

[alexanderturinske]

Please describe what the rule should do:

Since $delete and $set APIs are removed in Vue 3; it would be helpful to add a warning to help people transition to Vue 3 by discouraging deprecated APIs

Global functions set and delete, and the instance methods $set and $delete. They are no longer required with proxy-based change detection.

What category should the rule belong to?

[ ] Enforces code style (layout) [ ] Warns about a potential error (problem) [ ] Suggests an alternate way of doing something (suggestion) [x] Other (please specify: Vue 3 transition)

Provide 2-3 code examples that this rule should warn about:

<!-- BAD -->
this.$set(...)
Vue.set(...)
this.$delete(...)
Vue.delete(...)

<!-- BAD -->
Vue.set(col, 'value', usage[col.id]);

<!-- GOOD -->
Object.assign(col, { value: usage[col.id] });

<!-- BAD -->
this.$set(targetObj, lastKey, value);

<!-- GOOD -->
targetObj[lastKey] = value;

<!-- BAD -->
Vue.delete(targetObj, lastKey);
this.$delete(targetObj, lastKey);

<!-- GOOD -->
delete targetObj[lastKey];

Additional context

• Vue 3 docs
• Custom ESLint rules for preventing $delete in Vue files
• GitLab: Remove Vue.set occurrences epic
• GitLab: Remove Vue.delete occurrences epic

[FloEdelmann]

Additionally, these cases should be reported:

import { set, del } from 'vue'

set(obj, key, val)
del(obj, key)

const { set, del } = require('vue')

set(obj, key, val)
del(obj, key)