vscode 引用路径的别名设置

问题描述

​ 在开发过程中，由于模块越来越多，需要建立的文件夹就会越来越多，目录层级越来越深。这样就会导致import引用时极不方便，比如说：

​ 如果在开发过程中能够使用某别名来指代根目录或src文件夹（开发过程中引用的文件一般都在src下），达到下图的效果，是最好不过的了（程序员一般都是有强迫症的，可能要达到目的写的代码要远远大于这几个.，虽然可以达到目的，但是太难看了）。

解决过程

• 更改weboack.base.config.js文件

​ 去网上查阅了资料之后，发现可以通过更改weboack.base.config.js中的resolve.alias来达到目的。

module.exports = {
	···
    ···
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
    }
  }
  ···
  ···
}

​ 这样就可以使用@来指代./src文件夹，同样，也可以在alias对象中继续添加其他路径的别名。

​ 然而问题没有这么简单…

​ 当初为了方便，我是使用craete-react-app脚手架来搭建的工程，在不想使用react-scripts eject来显示webpackage等的配置文件的情况下（那样会破坏目录结构，并且是不可逆的），只能另寻其他方法。。。

• 使用customize-cra来定制配置

​ 之前使用高阶组件、less等配置时，引入了customize-cra并创建了./config-overrides.js来定制webpackage的一些属性。使用这一方法，同样可以配置路径别名：

const { addWebpackAlias } = require('customize-cra')
module.exports = override(
  ···
  ···
  addWebpackAlias({
    ['@']:require('path').resolve(__dirname, 'src')
  })
  ···
  ···
)

​ 经过上述配置，终于可以在文件中使用@来代替巨长无比的路径了！

​ 然而，使用别名替代后，vscode不再能智能提示来补全路径了（我就知道没这么简单）。。。

• vscode的路径智能提示功能

​ 后来查到了一个vscode官方提供的方法：通过自定义jsconfig.json文件来重新激活相应的路径智能提示。在项目根目录下，新建一个jsconfig.json文件，内容如下（大神是这么说的）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

​ 但是，做了如上配置之后，编译报错。。。

​ 根据错误提示，将baseUrl做出对应的修改即可：

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

然而，然而，再次然而。。。还是存在问题。。。

​ 经过上述设置，路径补全功能实现了，但是补全的文件夹下面文件补全功能有bug，目前只能自动提示*.js 文件，图片、css等文件不会提示。。。

• 解决路径补全不提示文件的bug

​ 不再使用jsconfig.js，使用vscode插件来实现路径补全：

​ 这里选择的是Path Autocomplete插件，而不是Path Intellisense（之前使用的这一个，但是关于别名路径方面还是存在问题。。。）

​ 在 工作区配置 .vscode/setting.json里面添加内容如下：

{
  "path-autocomplete.excludedItems": {
    "**/*.js": { "when": "**/*.ts" }, // ignore js files if i'm inside a ts file
    "**/*.map": { "when": "**" }, // always ignore *.map files
    "**/{.git,node_modules}": { "when": "**" } // always ignore .git and node_modules folders
  },
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },
}

​ 在path-autocomplete.pathMappings对象中配置别名对应的路径，即可实现别名下的路径补全，而且不只js文件会补全，其他文件也会。

​ 关于文件的后缀，Path Autocomplete默认是不自动添加文件后缀的，可以通过在系统的配置文件里面（如果只想当前项目生效就在当前工作区的配置文件里面）设置"path-autocomplete.extensionOnImport": true。即可自动添加文件后缀。其他的设置见下图：

---

就这样，因为路径过长而想用别名代替所引起的一系列问题就解决了（我还要更改代码里对应的路径）。。。

参考资料：

vue 用别名取代路径引用
解决vscode使用了@别名后路径不提示的问题