前端学习笔记（1.0）

2024-10-18 07:56:32

在开发项目时，需要使用@符号来代替书写./和../等麻烦的路径书写，所以就遇到了下面的问题。

输入@没有路径提示

我们都知道，设置@是通过配置vite等脚手架工具的配置文件，设置别名即可。

但是如果需要在使用@的时候需要出现路径提示，需要进行额外的配置，虽然跟着网上的视频进行配置，却发现仍然没有路径提示。现在把整个解决问题的过程贴出来，供大家参考。

网上通用的配置如下：

首先。安装智能提示插件：

介绍的比较多的就是这前两个，接下来以第一个的配置进行介绍。

来到第一个插件的配置文件

然后根据网上写的配置，进行@的映射配置，代码为框选部分，其他默认【这块主要是221行的一行代码就可以，如果想要加入其他的映射在这里后续添加即可】

然后是TS的tsconfig.json 配置文件，如果在项目中没有这个文件，新建一个即可，这里由于我的项目的TS项目，所以是tsconfig.json,如果是js项目，就是jsconfig.json,文件配置的内容如下，由于json文件中不能加注释，就直接进行解释，不再文件中进行注释了。

{
  "compilerOptions": {
   

    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "~@/*": ["src/*"]
    }
  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "exclude": ["node_modules", "dist"]
}

网上直接贴出的内容是下面这些，上面是我的json文件所有的内容

"compilerOptions": {
   

    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "~@/*": ["src/*"]
    }
  },

这样按照指示配置完毕后，发现并不能实现输入 import "@/"的时候会出现代码提示，于是看各种教程，发现说的都是一样，没有解决我的问题。

直接贴出我的解决思路，我就想着和网上查询的json文件都一模一样的内容【后续证明，这样确实可以解决这一个问题】。但是，确出现了新的问题。

一开始我的项目是这样的，没有报错

但是我要是按照和网上一模一样的json文件的配置就会出现报错

这就很奇怪，我试着看一下多的配置项是什么意思，却发现了新大陆【主要还是对TS的配置项不熟悉】，这样也锻炼了我解决问题的能力，那么，既然不知道这配置项是什么意思，那么就查文档嘛，但是从一开始我走了些许的弯路，我是从vscode中找到的配置路径，然后再绕道的TS配置文档。

第一个网址贴出来：TypeScript Compiling with Visual Studio Code

虽然这个界面提出了一些简单的tsconfig.json中的配置项，并做了介绍，但是没有发现我们想要的多出来的哪些配置项。

于是到project setting链接中找到了TS相应的配置项

TypeScript: Documentation - Project References

其实就是TS的官方文档，左侧是导航栏，右侧显示介绍，我找到了符合我要求的导航

在project configuration 的下面，我看到了Project References，就对应着json配置文件中的references配置项

由于都是英文，就不再将官方文档中的细节进行逐一介绍，将重要的一部分翻译下来贴出来：tsconfig.json文件有一个新的*属性references。它是一个对象数组，指定要引用的项目：
每个引用的path属性可以指向包含tsconfig.json文件的目录，也可以指向配置文件本身（可以有任何名称）。
当你引用一个项目时，会发生新的事情：
从引用的项目导入模块将加载其输出声明文件（.d.ts）
如果引用的项目生成outFile，则输出文件.d.ts文件的声明将在此项目中可见
如果需要，构建模式（见下文）将自动构建引用的项目
通过分成多个项目，您可以大大提高类型检查和编译的速度，减少使用编辑器时的内存使用，并改善程序逻辑分组的执行。

这里其实就是类似于模块化的思想，不是所有的配置都写在着一个json文件中，而是references了其他文件，path中就对应着references的文件路径，也可以是json文件，也可以直接是路径。

然后在自己的尝试下，得到了解决方案，解决方案一共有两种。

方案一：继承写法

因为他不是references下面两个文件嘛，那么如果单独的再tsconfig.json文件，单独设置@路径配置代码是不生效的。


    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "~@/*": ["src/*"]
    }

所以需要在他references中都进行继承配置，类似与Java的父类和子类的思想，tsconfig.json作为父类，剩下的两个references进行继承配置。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist/node",
    "baseUrl": ".",
    // ... 其他配置
  },
  "include": [
    "src/node/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

其实就是添加了一行代码 "extends": "./tsconfig.json",其他的配置默认自有的内容即可。