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

Question

在带有Vetur（用于Vue的扩展名）的VS Code中，“转到定义”不适用于组件导入，而结尾处没有.vue扩展名。

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

示例：

• ✔️这有效：

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

  右键单击HelloWorld，然后在VS Code中按Go to definition，将带您进入HelloWorld.vue文件。

• ❌这不是：

    

  import HelloWorld from '@/components/HelloWorld'
  

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

Answer 1

对于./src/components/A.vue之类的路径，这样做很容易。对于@/components/A.vue来说比较棘手，因为您需要解析@别名。

以下解决方案对两者都适用。

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

1。。安装eslint-plugin-import，它通过插入导入路径来扩展eslint的功能。还要安装自定义路径解析器-eslint-import-resolver-alias：

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

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

// 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路径： https://github.com/3nuc/demo-vue-eslint-force-dot-vue-extension-in-imports

VSCode的屏幕截图和npm运行lint的输出：

Answer 2

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

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