eslint-plugin-vue-2-object-reactivity

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 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; // <== 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 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