If i have 3 files: TheAloha.vue, TheAloha.html, TheAloha.js, linting don't work for TheAloha.js.

TheAloha.vue

<template src="./TheAloha.html"></template>
<script src="./TheAloha.js"></script>

TheAloha.js

export default {
  beforeDestroy() {
    console.log("Aloha");
  },
};

Ich benutze Vue.js "3.2.31", webpack "5.72.0",

package.json

...
"devDependencies": {
    "@babel/eslint-parser": "7.17.0",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@webpack-cli/generators": "2.4.2",
    "acorn": "8.7.0",
    "acorn-jsx": "5.3.2",
    "babel-loader": "8.2.4",
    "clean-webpack-plugin": "4.0.0",
    "copy-webpack-plugin": "10.2.4",
    "css-loader": "6.7.1",
    "eslint": "8.13.0",
    "eslint-plugin-vue": "8.6.0",
    "eslint-webpack-plugin": "3.1.1",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "5.5.0",
    "loader-utils": "3.2.0",
    "node-sass": "7.0.1",
    "null-loader": "4.0.1",
    "pug": "3.0.2",
    "regenerator-runtime": "0.13.9",
    "sass-loader": "12.6.0",
    "style-loader": "3.3.1",
    "vue-loader": "17.0.0",
    "vue-eslint-parser": "8.3.0",
    "vue-pug-loader": "1.1.26",
    "webpack": "5.72.0",
    "webpack-cli": "4.9.2"
  }

.eslintrc.js

const OFF = 0;
const WARN = 1;
const ERROR = 2;

module.exports = exports = {
  root: true,
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: {
      js: "@babel/eslint-parser",
    },
    allowImportExportEverywhere: true,
    ecmaVersion: 2021,
    sourceType: "module",
    impliedStrict: true,
    ecmaFeatures: {
      spread: true,
      globalReturn: false,
      impliedStrict: false,
      jsx: false,
    },
  },

  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
  ],
  rules: {
    ...
    // Vue.js
    "vue/multi-word-component-names": OFF,
    "vue/component-definition-name-casing": OFF,
  },
  env: {
    jquery: true,
    es6: true,
    browser: true,
  }
};

webpack.config.js

...
plugins: [
  new ESLintPlugin({
    context: path.resolve(__dirname, "../../"),
    overrideConfigFile: path.resolve(__dirname, ".eslintrc.js"),
    cache: options.mode !== "development",
    extensions: [
      "vue",
      "js",
    ],
  }),
]
...

for file TheAloha.vue linting works

<template>
  ...
</template>
<script>
export default {
  beforeDestroy() {
    console.log("Aloha");
  },
};
</script>

More details need to be written so that this question can be saved, but I don't know what other details would help.

CodePudding user response：

This plugin is not designed to work well for split files. We recommend that you combine the files into a single file. Also, I think maybe you can use the // @vue/component comment.

https://eslint.vuejs.org/user-guide/#how-does-eslint-detect-components

Answer from Github: https://github.com/vuejs/eslint-plugin-vue/issues/1875