使用 <script src="./TheAloha.js"> 对 .vue 的 eslint-plugin-vue 进行检查不工作

Question

如果我有 3 个文件：TheAloha.vue、TheAloha.html、TheAloha.js，linting 不适用于 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",
    ],
  }),
]
...

文件 TheAloha.vue linting 有效

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

需要写更多的细节才能保存这个问题，但我不知道其他细节会有什么帮助。

Answer 1

此插件不适用于拆分文件。我们建议您将这些文件合并为一个文件。另外，我想也许你可以使用 // @vue/component 评论。

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

来自Github的回答：https://github.com/vuejs/eslint-plugin-vue/issues/1875

使用 <script src="./TheAloha.js"> 对 .vue 的 eslint-plugin-vue 进行检查不工作

Linting not working eslint-plugin-vue for .vue with <script src="./TheAloha.js">

javascript

vue.js

webpack

eslint

eslint-plugin-vue