6

在带有Vetur的VS Code （使用 Vue 的扩展）中，“转到定义”不适用于最后没有.vue扩展的组件导入（Vetur 常见问题解答链接）

import我想知道是否有一个 eslint 规则会强制用户在文件中使用语句时始终提供扩展名.vue？

例子：

  • ✔️ 这有效：

      import HelloWorld from '@/components/HelloWorld.vue'

    右键单击HelloWorld并按下Go to definitionVS Code 将带您进入该HelloWorld.vue文件。

  • ❌ 这不会：

    import HelloWorld from '@/components/HelloWorld'

    如果您按下Go to definition（HelloWorld最左侧），VS Code 只会将光标移动到HelloWorld您刚刚右键单击的位置。预期的行为是我们移动到HelloWorld.vue文件。

4

2 回答 2

6

对于像./src/components/A.vue. 这比较棘手，@/components/A.vue因为您需要解析@别名。

以下解决方案适用于两者。

.vue要在路径中强制扩展，请执行以下操作：

1.安装eslint-plugin-import，通过 lint 导入路径扩展 eslint 的功能。还安装一个自定义路径解析器 -eslint-import-resolver-alias为它：

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

2.然后，在您的ESLint配置文件（.eslintrc.js或等中的eslintConfig字段package.json）中，添加以下内容：

// I'm using .eslintrc.js
module.exports = {
//...unimportant properties like root, env, extends, parserOptions etc
  plugins: ["import"],
  settings: {
    "import/resolver": {
      alias: {
        map: [
          ["@", "./src"], //default @ -> ./src alias in Vue, it exists even if vue.config.js is not present
          /* 
          *... add your own webpack aliases if you have them in vue.config.js/other webpack config file
          * if you forget to add them, eslint-plugin-import will not throw linting error in .vue imports that contain the webpack alias you forgot to add
          */
        ],
        extensions: [".vue", ".json", ".js"]
      }
    }
  }
}

这是一个带有工作演示的存储库，该演示正确地在导入中实现强制 .vue 路径。

以及来自 VSCode 的屏幕截图和来自npm run lint：

运行 npm run lint 后，在 vscode 问题视图和终端输出中显示有关缺少 .vue 路径的 eslint 错误

于 2020-07-12T11:49:26.893 回答
2

您需要配置eslint-plugin-import对vue文件设置强制，只需在 eslint config 中添加此规则

"import/extensions": ["error", "ignorePackages", { "vue": "always" }],
于 2019-11-02T20:56:43.410 回答