Recently, I joined a Vue.js project that makes use of the tilde (~) notation in module imports. For example:
import WhateverApi from '~/api/whatever';
The project repository is a mix of various files including a Vagrant machine setup, a Laravel backend application, configuration files, and a Vue.js single-page application (SPA). The SPA is located within a nested folder structure (resources/assets/js/) which is considered as the project root denoted by ~.
While using Vim, I noticed that when I try to jump to a linked file using the gf command with the path shown above, Vim throws an error indicating that the file does not exist. This could be due to Vim interpreting the tilde as the user's home folder.
After searching online, I couldn't find a solution mainly because I was unsure of what exactly to look for. It seems like some sort of magic being done by Webpack. The other team members who use WebStorm/PHPStorm do not encounter this issue.
How can I configure Vim to correctly resolve the path within the project's scope?
Update with an example:
Webpack provides an alias setting, allowing the definition of custom paths to be used as aliases in source code files. Here's an example configuration:
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'],
},
Ignoring the $vue key specific to Vue.js with Webpack, focus on ~ and sass. These act as substitute filters replacing every occurrence of ~ in paths with resources/assets/js and resources/assets/sass, respectively. However, import statements vary. Below is an example of a Vue single file component with both types of import statements:
<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>
It would be helpful if Vim could resolve these combinations using the following rules while using gf:
- Paths starting with
~/should replace~withresources/assets/jsand attempt to locate files with extensions.js,.vue, and.json. - Paths starting with
~sassshould replace~withresources/assets/sassand attempt to find files with the extension.scss.
I understand this may be complex and was implemented before my joining the team. There is a project aimed at simplifying this process (https://github.com/davidosomething/vim-enhanced-resolver), but it seems to be broken as it throws errors when attempting to resolve existing paths.
Any assistance provided will be greatly appreciated.