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;
Vue.set(state.object, prop, val);
},
},
});
- When
mutations
is a variable (not necessarily used in Vuex.Store
, just searching for the name "mutations"), for example:
const mutations: {
setPropOnObject(state, { prop, val }: { prop: string; val: string }) {
state.object[prop] = val;
Vue.set(state.object, prop, val);
},
};
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
eslint src/store.ts
Additional info
See these:
This will only work with TypeScript because we need to know that we're dealing with Vuex.Store
.
Actually, we probably can make it work with JS, because we don't really use TS features right now...
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