前端学习笔记(1.0)

发布于:2024-10-18 ⋅ 阅读:(32) ⋅ 点赞:(0)

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

输入@没有路径提示

我们都知道,设置@是通过配置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",其他的配置默认自有的内容即可。

哦,忘了说这两个文件是怎么来的,因为我的项目环境就是vite+react+ts,所以我们在创建项目的时候,就自动生成了这些文件和配置。

同样,另一个json文件中,也书写一句 "extends": "./tsconfig.json",其他的配置默认自有的内容即可。

方案二:CV写法

其实就是当个cv工程师就可以了,在tsconfig.json,tsconfig.node.json,tsconfig.app.json,这三个文件中进行复制粘贴这部分代码即可。

 

然后就是见证奇迹的时刻,为了保险起见,重启一下vscode就可以了

 tsconfig的其他配置就不再详细介绍,因为学习的过程就是这样,遇到一个差一个,解决问题。总不能去背文档把,那样也不太现实。

Endeavor...


网站公告

今日签到

点亮在社区的每一天
去签到