如何使用 eslint 在所有导入中强制使用 .vue 扩展名？

Question

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

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

例子：

• ?? 这有效：

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

  在 VS Code 中右键单击HelloWorld并按下将Go to definition带您到该HelloWorld.vue文件。

• ? 这不会：

  import HelloWorld from '@/components/HelloWorld'
  

  如果按Go to definition上HelloWorld（最左边），VS代码只会将光标移动到HelloWorld你恰到好处点击。预期行为是我们移动到HelloWorld.vue文件。

Answer 1

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

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

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

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

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

2.然后，在您的ESLint配置文件（.eslintrc.js，或etc 中的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：

Answer 2

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

"import/extensions": ["error", "ignorePackages", { "vue": "always" }],