У меня есть файл .vue, который определяет компонент. Другие файлы .vue не могут правильно его видеть для линтера. Я получаю много ошибок ES Lint, например:
Cannot find module '../components/LinkButton'.
Я прошел через такие шаги, как
Добавьте собственный // @vue/component
прямо над моим компонентом
https://github.com/vuejs/eslint-plugin-vue#attention
убедитесь, что плагин html
не включен
https://github.com/vuejs/eslint-plugin-vue#why-doesnt-it-work-on-vue-file
последний 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.
Свойство 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 yourpackage.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
, который также должен быть установлен.