eslint-plugin-vue-2-object-reactivity
These rules aim to solve the problem with Vue 2 Object Reactivity.
Getting started
What does it catch
- When
mutations
is a property, for example:export default new Vuex.Store<{ object: { [key: string]: string } }>({ //... mutations: { setPropOnObject(state, { prop, val }: { prop: string; val: string }) { state.object[prop] = val; // <== this will be reported as error Vue.set(state.object, prop, val); // <== this is correct/expected }, }, });
- When
mutations
is a variable (not necessarily used inVuex.Store
, just searching for the name "mutations"), for example:const mutations: { setPropOnObject(state, { prop, val }: { prop: string; val: string }) { state.object[prop] = val; // <== this will be reported as error Vue.set(state.object, prop, val); // <== this is correct/expected }, };
Users
Install this plugin:
npm i eslint-plugin-vue-2-object-reactivity
Add to your .eslintrc.js
config:
module.exports = {
plugins: ["vue-2-object-reactivity"],
rules: {
"vue-2-object-reactivity/require-vue-set": "error",
},
};
Try it out:
npm run lint
Contributors
In this project:
npm link
In Vue 2 TS project:
Using config:
module.exports = {
plugins: ["vue-2-object-reactivity"],
rules: {
"vue-2-object-reactivity/require-vue-set": "error",
},
};
npm ci
npm link "eslint-plugin-vue-2-object-reactivity"
npm run lint
or, to enable verbose output:
export DEBUG=true # to enable verbose output
eslint src/store.ts
Additional info
See these:
- https://github.com/Maxim-Mazurok/vue-2-vuex-object-reactivity
- https://github.com/Maxim-Mazurok/vue-3-vuex-object-reactivity
- https://github.com/Maxim-Mazurok/vue-2-vuex-object-reactivity-typescript - will be used to test this rule
This will only work with TypeScript because we need to know that we're dealing with
Actually, we probably can make it work with JS, because we don't really use TS features right now...Vuex.Store
.
Bootstrapped with https://dev.to/bwca/create-a-custom-eslint-rule-with-typescript-4j3d See also: https://dev.to/alexgomesdev/writing-custom-typescript-eslint-rules-how-i-learned-to-love-the-ast-15pn and https://github.com/amzn/eslint-plugin-no-date-parsing