vscode 引用路径的别名设置

最新推荐文章于 2024-09-09 10:01:40 发布

DxCaesar

最新推荐文章于 2024-09-09 10:01:40 发布

阅读量5.2k

点赞数 3

分类专栏： React 前端文章标签：前端 reactjs

本文链接：https://blog.csdn.net/DxCaesar/article/details/104277013

版权

React 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

问题描述

在开发过程中，由于模块越来越多，需要建立的文件夹就会越来越多，目录层级越来越深。这样就会导致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

解决路径补全不提示文件的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"
  },
}