使用 Webpack 波浪号别名时,通过 Vim 中的 'gf' 解析 JavaScript 模块



我是Vue.js项目的新成员,该项目在模块导入中使用波浪号(~(表示法,如

import WhateverApi from '~/api/whatever';

项目存储库包含所有类型的文件:Vagrant机器、Laravel后端应用程序、配置文件和Vue.js SPA。后者位于嵌套文件夹结构(resources/assets/js/(中,应将其解释为项目根,因此为~

使用Vim,我习惯了通过gf跳转到链接文件。当我在上面显示的路径上执行此操作时,Vim会抱怨该文件不存在,因为它可能会(在某种程度上正确地(将波浪号解释为用户的主文件夹。

谷歌搜索没有结果,主要是因为我不知道该搜索什么。这似乎是Webpack正在做的一些魔术。由于其他团队成员使用WebStorm/PHPStorm,他们没有这个问题。

如何让Vim在项目范围内正确解析路径?

更新示例:

Webpack有一个别名设置,允许将任何路径定义为要在源代码文件中使用的别名。它看起来像这样:

resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
'~': path.resolve(__dirname, 'resources/assets/js'),
sass: path.resolve(__dirname, 'resources/assets/sass'),
},
extensions: ['*', '.js', '.vue', '.json'],
},

忽略$vue密钥,它特定于带有Webpack的Vue.js。CCD_ 6和CCD_。第一个基本上是一个替代滤波器,它交换到resources/assets/js的路径中的每个~sass也是如此,它的路径是一致的。但是,导入语句各不相同。下面是一个Vue单文件组件的例子,其中包含两个import语句:

<template>
<div>
<p>Some content.</p>
</div>
</template>
<script>
import WhateverApi from '~/api/whatever';
export default {};
</script>
<style lang="scss" scoped>
@import '~sass/variables/all';
</style>

现在,当使用gf时,如果它能根据以下规则解决这些(奇怪的(组合,那将是非常棒的:

  • ~/开头的路径应将~替换为resources/assets/js,并尝试通过附加扩展名.js.vue.json来查找文件
  • ~sass开头的路径应将~替换为resources/assets/sass,并尝试通过附加扩展名.scss来查找文件

我知道这是其中的一部分——而且发生在我加入团队之前。有一个有趣的项目试图简化这一点(https://github.com/davidosomething/vim-enhanced-resolver)但不幸的是,它似乎被破坏了,因为它在试图解析现有路径时会抛出错误。

非常感谢您的帮助。

谷歌搜索没有结果,主要是因为我不知所措到底要搜索什么。

要获得Vim帮助,请先尝试Vim帮助本身。例如您正在使用命令?如果是gf,请查看gf的帮助看看它是如何工作的:

:h gf
[count]gf       Edit the file whose name is under or after the cursor.
Mnemonic: "goto file".
Uses the 'isfname' option to find out which characters
are supposed to be in a file name.  Trailing
punctuation characters ".,:;!" are ignored. Escaped
spaces " " are reduced to a single space.
Uses the 'path' option as a list of directory names to
look for the file.  See the 'path' option for details
about relative directories and wildcards.
Uses the 'suffixesadd' option to check for file names
with a suffix added.
If the file can't be found, 'includeexpr' is used to
modify the name and another attempt is done.

您也可以检查:h 'includeexpr'。例如将初始~扩展为resources/assets/js:

set inex=substitute(v:fname,'^\~','resources/assets/js','')

在sidyll为我指明了正确的方向后,我经过了大量的修改和阅读帮助页面,终于让它发挥了作用。秘密是递归substitute()调用、正则表达式捕获组和suffixesadd:的组合

set includeexpr=substitute(substitute(v:fname,'^\~/','resources/assets/js/',''),'^\~sass/\(.*\)/\(.*\)$','resources/assets/sass/\1/_\2','')
set suffixesadd=.js,.vue,.scss

这是相当丑陋的,但这是你的Vimscript。

substitudeincludeexpr的方法涉及在vim配置中存储项目路径。这远非理想。

有了vim-npr插件,我成功地做到了这一点。

最新更新