爆款云主机2核4G限时秒杀,88元/年起!
查看详情

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
热门活动
  • 618智算钜惠季 爆款云主机2核4G限时秒杀,88元/年起!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 首保服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
      • 文档
      • 控制中心
      • 备案
      • 管理中心

      前端学习笔记(1.0)

      首页 知识中心 服务器 文章详情页

      前端学习笔记(1.0)

      2024-11-18 09:54:42 阅读次数:24

      json,配置

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

      输入@没有路径提示

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

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

      网上通用的配置如下:

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

      前端学习笔记(1.0)

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

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

      前端学习笔记(1.0)

       

      前端学习笔记(1.0)

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

      前端学习笔记(1.0)

      然后是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文件都一模一样的内容【后续证明,这样确实可以解决这一个问题】。但是,确出现了新的问题。

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

      前端学习笔记(1.0)

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

      前端学习笔记(1.0)

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

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

       

      前端学习笔记(1.0)

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

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

       TypeScript: Documentation - Project References

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

      前端学习笔记(1.0)

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

      前端学习笔记(1.0)

      由于都是英文,就不再将官方文档中的细节进行逐一介绍, 将重要的一部分翻译下来贴出来: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",其他的配置默认自有的内容即可。

      前端学习笔记(1.0)

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

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

      方案二:CV写法

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

      前端学习笔记(1.0)

       

      前端学习笔记(1.0)

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

      前端学习笔记(1.0)

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

      Endeavor...

      版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_15888443/12330093,作者:mez_Blog,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

      上一篇:linux下Apache服务器的配置(2.0)

      下一篇:YAML文件格式详解及应用

      相关文章

      2025-05-19 09:04:44

      FinalShell 配置SSH密钥登陆

      FinalShell 配置SSH密钥登陆

      2025-05-19 09:04:44
      密钥 , 服务器 , 配置
      2025-05-16 09:15:24

      WCF 配置文件分解

      WCF 配置文件分解

      2025-05-16 09:15:24
      localhost , WCF , 地址 , 服务 , 配置
      2025-05-14 10:33:25

      webpack5基础--01_基本使用

      webpack5基础--01_基本使用

      2025-05-14 10:33:25
      json , main , package , Webpack , 打包 , 文件 , 编译
      2025-05-14 10:33:16

      30天拿下Python之使用Json

      Json的英文全称为JavaScript Object Notation,中文为JavaScript对象表示法,是一种存储和交换文本信息的语法,类似XML。Json作为轻量级的文本数据交换格式,比XML更小、更快,更易解析,也更易于阅读和编写。

      2025-05-14 10:33:16
      json , Json , Python , 字符串 , 对象 , 序列化 , 转换
      2025-05-14 09:51:15

      python json反序列化为对象

      在Python中,将JSON数据反序列化为对象通常意味着将JSON格式的字符串转换为一个Python的数据结构(如列表、字典)或者一个自定义的类实例。

      2025-05-14 09:51:15
      json , JSON , Person , Python , 列表 , 字典 , 实例
      2025-05-12 08:40:18

      DataTable转JSON

      DataTable转JSON

      2025-05-12 08:40:18
      dataset , DataTable , json , JSON
      2025-05-09 09:30:05

      【Linux 从基础到进阶】防火墙策略配置(iptables、firewalld、ufw)

      防火墙是保护系统受网络攻击的第一道防线。通过合理配置防火墙策略,可以有效地控制网络流量、过滤不必要的连接,并增强系统的安全性。

      2025-05-09 09:30:05
      iptables , 数据包 , 配置 , 防火墙
      2025-05-09 08:50:35

      SpringBoot学习(1)

      Spring Boot是Spring提供的一个子项目,用于快速构建Spring应用程序。

      2025-05-09 08:50:35
      Spring , 依赖 , 应用程序 , 部署 , 配置 , 配置文件
      2025-05-07 09:09:26

      springboot系列教程(十七):自定义启动页,项目打包指定运行环境

      springboot的打包方式有很多种。可以打war包,可以打jar包,可以使用jekins进行打包部署的。不推荐用war包,SpringBoot适合前后端分离,打成jar进行部署更加方便快捷。

      2025-05-07 09:09:26
      application , jar , 打包 , 配置
      2025-05-07 09:08:54

      springboot系列教程(十二):基于转账案例,演示事务管理操作

      springboot系列教程(十二):基于转账案例,演示事务管理操作

      2025-05-07 09:08:54
      spring , 事务 , 接口 , 管理器 , 配置
      查看更多
      推荐标签

      作者介绍

      天翼云小翼
      天翼云用户

      文章

      33561

      阅读量

      5265692

      查看更多

      最新文章

      FinalShell 配置SSH密钥登陆

      2025-05-19 09:04:44

      WCF 配置文件分解

      2025-05-16 09:15:24

      【Linux 从基础到进阶】防火墙策略配置(iptables、firewalld、ufw)

      2025-05-09 09:30:05

      springboot系列教程(十七):自定义启动页,项目打包指定运行环境

      2025-05-07 09:09:26

      【Linux 从基础到进阶】IPv6配置与管理

      2025-05-06 09:18:49

      VS 中调用调试DLL库的方法

      2025-04-23 08:18:27

      查看更多

      热门文章

      redis-配置主从-实际操作-over

      2023-03-29 10:07:52

      The type org.springframework.context.ConfigurableApplicationContext cannot be resolved. It is indire

      2022-12-28 07:22:30

      QT配置文件类封装

      2023-03-14 09:17:29

      redis-配置说明-重要的几个配置

      2023-03-29 10:07:17

      nginx【2】配置文件

      2023-04-27 07:57:16

      vim配置

      2023-05-06 09:03:13

      查看更多

      热门标签

      服务器 linux 虚拟机 Linux 数据库 运维 网络 日志 数据恢复 java python 配置 nginx centos mysql
      查看更多

      相关产品

      弹性云主机

      随时自助获取、弹性伸缩的云服务器资源

      天翼云电脑(公众版)

      便捷、安全、高效的云电脑服务

      对象存储

      高品质、低成本的云上存储服务

      云硬盘

      为云上计算资源提供持久性块存储

      查看更多

      随机文章

      基础配置

      【微服务】Nacos生产环境配置技巧分享

      fusuma配置

      Ansible学习笔记04:配置文件

      Vue3中如何安装和配置静态路由

      Ajax&Json笔记(1)

      • 7*24小时售后
      • 无忧退款
      • 免费备案
      • 专家服务
      售前咨询热线
      400-810-9889转1
      关注天翼云
      • 旗舰店
      • 天翼云APP
      • 天翼云微信公众号
      服务与支持
      • 备案中心
      • 售前咨询
      • 智能客服
      • 自助服务
      • 工单管理
      • 客户公告
      • 涉诈举报
      账户管理
      • 管理中心
      • 订单管理
      • 余额管理
      • 发票管理
      • 充值汇款
      • 续费管理
      快速入口
      • 天翼云旗舰店
      • 文档中心
      • 最新活动
      • 免费试用
      • 信任中心
      • 天翼云学堂
      云网生态
      • 甄选商城
      • 渠道合作
      • 云市场合作
      了解天翼云
      • 关于天翼云
      • 天翼云APP
      • 服务案例
      • 新闻资讯
      • 联系我们
      热门产品
      • 云电脑
      • 弹性云主机
      • 云电脑政企版
      • 天翼云手机
      • 云数据库
      • 对象存储
      • 云硬盘
      • Web应用防火墙
      • 服务器安全卫士
      • CDN加速
      热门推荐
      • 云服务备份
      • 边缘安全加速平台
      • 全站加速
      • 安全加速
      • 云服务器
      • 云主机
      • 智能边缘云
      • 应用编排服务
      • 微服务引擎
      • 共享流量包
      更多推荐
      • web应用防火墙
      • 密钥管理
      • 等保咨询
      • 安全专区
      • 应用运维管理
      • 云日志服务
      • 文档数据库服务
      • 云搜索服务
      • 数据湖探索
      • 数据仓库服务
      友情链接
      • 中国电信集团
      • 189邮箱
      • 天翼企业云盘
      • 天翼云盘
      ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
      公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
      • 用户协议
      • 隐私政策
      • 个人信息保护
      • 法律声明
      备案 京公网安备11010802043424号 京ICP备 2021034386号