Как настроить eslint для обнаружения lodash как глобального только в отдельных компонентах файла? - PullRequest
Новая
       23

Как настроить eslint для обнаружения lodash как глобального только в отдельных компонентах файла?

0 голосов
/ 24 января 2019

Мой вариант использования

У меня есть модуль миксина utils, который внедряет lodash как метод во все .vue ( отдельные файловые компоненты ) компонентов: 

// utilsMixin.js

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

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

// main.js
// ...

import utilsMixin from './utilsMixin';

Vue.mixin(utilsMixin);

Таким образом, все мои проекты могут использовать _ и moment в качестве методов.

Проблема

Если я использую _ в части <template>, без линтеравыдает, поскольку _ скрыт внутри this переменная от vue: 

// MyFancyComponent.vue

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

Но когда я использую его в <script> части: 

// MyFancyComponent.vue
// ...

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

Эслинт жалуется на [eslint] '_' is not defined. [no-undef] проблем, но я все еще могу использовать его без импорта _, и я могу остановить жалобу Линтера, объявив глобальный lodash: 

/* global _ */

Обратите внимание, что у меня все еще есть другие .js файлы, которые не имеютlodash как глобальный, и мне нужно linter, чтобы жаловаться, если я использую lodash там:

Ожидаемое поведение

Я ожидаю, что '_' будет обнаружен как глобальная переменная только в моих vue Single File Components,но быть неопределенным в моих файлах JavaScript (и поэтому мне нужно будет импортировать lodash в .js файлах).

Интуитивно понятное решение

Я ожидал бы, что смогу настроить глобальные переменные внутри .eslintrc.js, которые будут работать только внутри однофайловых компонентов.В качестве подхода это может выглядеть так: 

// .eslintrc.js
// ...

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

1 Ответ

0 голосов
/ 28 января 2019

Ваша проблема в том, что вам не хватает того, как Vue.js внедряет это в ваш компонент.Вот как это будет выглядеть, если вы правильно используете Mixin в Vue.js (в скрипте): 

// MyFancyComponent.vue
// ...

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

Вы используете this._ для ссылки на Lodash, потому что вы привязали его к экземпляру компонента, а не сделали его объектом с глобальными ссылками.Причина, по которой это работает, но ESLint жалуется, потому что вы импортировали библиотеку как глобальный объект в свой миксин, но не импортировали ее в этот конкретный файл, поэтому ESLint жалуется, потому что не знает, что вы сделалиглобальный импорт в другой файл и привязка его к каждому компоненту, чтобы сделать его доступным для этих отдельных компонентов.

...