Как работать с компонентами Vue?

У меня есть файл .vue, который определяет компонент. Другие файлы .vue не могут правильно его видеть для линтера. Я получаю много ошибок ES Lint, например:

Cannot find module '../components/LinkButton'.

Я прошел через такие шаги, как

  1. Добавьте собственный // @vue/component прямо над моим компонентом https://github.com/vuejs/eslint-plugin-vue#attention

  2. убедитесь, что плагин html не включен https://github.com/vuejs/eslint-plugin-vue#why-doesnt-it-work-on-vue-file

  3. последний eslint и плагин

"eslint": "^5.3.0", "eslint-plugin-vue": "^5.0.0-beta.3",

Не уверен, что еще попробовать. Мой клиент .eslintrc выглядит следующим образом.

module.exports = {
  root: true,
  env: {
    browser: true,
  },

  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  // extends: 'vue',
  extends: 'plugin:vue/base',

  // required to lint *.vue files
  plugins: [
    'vue',
  ],
  // add your custom rules here
  'rules': {
    'space-before-function-paren': "off",
    'no-multi-spaces': 'off',
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    "no-multiple-empty-lines": 0,
    "comma-dangle": 0,
    "padded-blocks": 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}
```

и компонент определяется следующим образом

<script>
// @vue/component
const LinkButton = {
  name: 'LinkButton',
  props: [
    'label',
    'link',
    'type',
    'icon'
  ],
  data () {
    return {
      msg: 'NLP testing'
    }
  }
}

module.exports = {LinkButton}

</script>

и импортирован с

import {LinkButton} from '../components/LinkButton'

Обратите внимание, что файл нормально компилируется с помощью webpack, это просто проблема с линтингом.

Спасибо!

🤔 А знаете ли вы, что...
JavaScript имеет множество библиотек и фреймворков, таких как jQuery, Angular, и Vue.js.


3
1 894
1

Ответ:

Свойство parser конфигурации eslint должно находиться в корне, а не в parserOptions.

module.exports = {
  // ...
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module"
  }
  // ...

Также нет необходимости указывать vue в plugins, поскольку это уже сделано унаследованной конфигурацией plugin:vue/base.

Также обратите внимание, что файл в имени файла должен быть указан формат файла конфигурации.

Configuration File Formats

ESLint supports configuration files in several formats:

  • JavaScript - use .eslintrc.js and export an object containing your configuration.
  • YAML - use .eslintrc.yaml or .eslintrc.yml to define the configuration structure.
  • JSON - use .eslintrc.json to define the configuration structure. ESLint’s JSON files also allow JavaScript-style comments.
  • Deprecated - use .eslintrc, which can be either JSON or YAML.
  • package.json - create an eslintConfig property in your package.json file and define your configuration there.

В вашем случае вы должны назвать файл .eslintrc.js, поскольку вы экспортируете модуль узла.

Чтобы eslint правильно загружал файлы Vue, как и при использовании той же конфигурации веб-пакета, необходимо явно указать параметр import/resolver в файле конфигурации eslint.

settings: {
    'import/resolver': {
        webpack: {
            config: 'webpack.conf.js', // if at the project root
        },
    },
},

Это используется модулем eslint-import-resolver-webpack, который также должен быть установлен.