In the process of VSCode + Vue2 + Webpack + JavaScript development, there is always a problem that some modules cannot jump to the file definition by Ctrl + left mouse button. Why is that? How do you solve it?

The development environment

Basic development environment

  • VSCode
  • Vue2
  • Webpack
  • JavaScript

The Vetur plug-in has been installed on VSCode

WebpackThe path alias has been configured

{...resolve: {
    extensions: ['.js'.'.vue'.'.json'].alias: {
      'vue$': 'vue/dist/vue.esm.js'.The '@': resolve('src')}},module: {
    rules: [{test: /\.vue$/,
        include: [resolve('src')].use: 'vue-loader'
      },
      {
        test: /\.js$/,
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/element-ui/packages/table/'),
          resolve('node_modules/element-ui/src/utils/')].use: 'babel-loader? cacheDirectory=true'},... ] },... }Copy the code

jsconfig.jsonThe configured

{
  "compilerOptions": {
    "target": "es2017"."allowSyntheticDefaultImports": false."baseUrl": ". /"."paths": {
      "@ / *": ["src/*"]}},"exclude": ["node_modules"."dist"]."include": ["src"]}Copy the code

The basic situation

  • Project running properly ✅
  • Compile everything ok ✅

Common module loading rules

The ES Module absolute path is used as an example:

  1. Load the specified file directly, for example/src/utils/example.js 或 @/utils/example.js
  2. If you can’t find the exact file, try adding the extension.js..vueLoad the file. For example,/src/utils/example 或 @/utils/example
  3. If you still can’t find the exact file, try loading the file under that folderindex.js.index.vue. For example,/src/utils 或 @/utils

Actual problems encountered and solutions

// example.js

// => ✅ reCommand However, you cannot use CTRL + the left mouse button to jump to the definition
import utils from '@/utils'
// => 🚫 not recommand but yes
import utils from '@/utils/index'
Copy the code

In the example example.js above, the first method is recommended. However, you cannot jump to the definition by pressing CTRL + the left mouse button

// example.vue

// => ✅ reCommand You can use CTRL + the left mouse button to go to the definition
import utils from '@/utils'
// => 🚫 not recommand
import utils from '@/utils/index'


// The main point of contention, whether or not it is the recommended way of writing, is unclear
// => You can press CTRL + the left mouse button to go to the definition
import Navbar from '@/components/Navbar/index.vue'
// => No
import Navbar from '@/components/Navbar'
Copy the code

In the example example.vue above, the first method is recommended for the JS module. You can also click CTRL + the left mouse button to jump to the definition. There is no dispute

In the example example.vue above, the writing of the VUE module is the main focus of the debate.

Some people argue that vue files are js files, other than JSON files, should refer to CSS or less style files when the module loads the file extension. This includes the Vetur plugin development team, so @/ Components /Navbar can’t jump to the definition for now.

Others want vue files to be able to skip directly to the file definition, just like JS and JSON, without the index.vue notation. For example, Webpack + vue-loader implements this compilation method. Don’t worry, we can solve this problem by installing another VSCode plugin, alias path jump, which also solves the problem that the recommended @/utils in example.js cannot be jumped to by CTRL + left mouse button alone

VSCode alias path jump plug-in

Vetur recommends an Issue with a specified extension

Welcome to follow my wechat official account: The Coder of wind and waves