CODEWITHSUNDEEP
javascriptvuejs2momentjslodasheslint
Soldeplata Saketos
Soldeplata Saketos

Reputation: 3461

How to setup eslint to detect lodash as global only in single file vue components?

#My use case

I have a utils mixin module that injects lodash as a method in all .vue (single file components) components:

// utilsMixin.js

import _ from 'lodash';
import moment from 'moment';

export default {
  computed: {
    _: () => _,
    moment: () => moment,
  },
};

// main.js
// ...

import utilsMixin from './utilsMixin';

Vue.mixin(utilsMixin);

Therefore, all my project can use _ and moment as methods.

#The issue If I use _ in the <template> part, no linter issues, as _ is hidden inside this variable from vue:

// MyFancyComponent.vue

<template>
  <myComponent
    v-for="item in _.get(this, 'myObject.collection', [])"
            >
    <div> {{ item }} </div>
  </myComponent>

But when I use it in the <script> part:

// MyFancyComponent.vue
// ...

<script>
export default {
  name: 'MyFancyComponent',
  methods: {
    find: ()=> _.find // [eslint] '_' is not defined. [no-undef]
};
</script>

Eslint complains from [eslint] '_' is not defined. [no-undef] issues, but I still can use it without importing _, and I can stop linter from complaining by declaring global lodash:

/* global _ */

Note that I still have other .js files that have not lodash as global, and I need linter to complain if I use lodash there:

#Expected behavior I expect '_' to be detected as a global variable only in my vue Single File Components, but to be undefined in my JavaScript files (and therefore I would need to import lodash in .js files).

#Intuitive solution I would expect to be able to configure globals inside .eslintrc.js that would work only inside Single File Components. As an approach, it could look like:

// .eslintrc.js
// ...

  globals: {
              vue: {
                     '_': false,
                     moment: false
                   },
              js: {
                    process: false,
                    isFinite: true
                  }
            },
// ...

Upvotes: 1

Views: 1282

Answers (1)

th3n3wguy
th3n3wguy

Reputation: 3737

Your problem is that you are missing how Vue.js is injecting this into your component. Here is what it will look like if you are properly using the Mixin within Vue.js (within the script):

// MyFancyComponent.vue
// ...

<script>
export default {
  name: 'MyFancyComponent',
  methods: {
    find(...args) {
      return this._.find.bind(this._, args);
    }// [eslint] '_' is not defined. [no-undef]
};
</script>

You use this._ to reference Lodash because you have bound it to the instance of the component, not made it a globally-referenced object. The reason that it works, but ESLint is complaining is because you have imported the library as a global object within your mixin, but you didn't import it within this specific file, so ESLint is complaining because it doesn't know that you did a global import within another file and bound it to every single component to make it available to those individual components.

Upvotes: -2

Related Questions