react开发-配置开发时候@指向SRC目录

news2024/9/22 3:33:55

这里写目录标题

  • 配置开发时候@指向SRC目录VScode编辑器给出提示
  • 总体1.配置react的@ 2.配置Vscode的@
  • 1.配置react的@
  • 2,配置VSCode的@提示支持

配置开发时候@指向SRC目录VScode编辑器给出提示

总体1.配置react的@ 2.配置Vscode的@

1.配置react的@

1. 我么需要下载一个webpack的插件
这样我们的项目就能识别@指向SRC

npm install @craco/craco -D
 "devDependencies": {
    "@craco/craco": "^7.1.0"
  }

2.使用使用craco
在根部录下创建craco.config.js
在这里插入图片描述
写入以下内容

const path = require('path');
//配置@
module.exports= {
    webpack:{
        alias:{
            "@":path.resolve(__dirname,'src')
        }
    }
}

3. 在package.json中修改启动命令

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

在这里插入图片描述

2,配置VSCode的@提示支持

在项目的根目录创建jsconfig.json文件夹
写入

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

在这里插入图片描述

在这里插入图片描述
以上就实现了react的@路径问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1940103.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【闲谈】我的创作纪念日(CrowdStrike、无人驾驶)

感谢地心引力 ,有幸再次遇见你: 还记得 2020 年 07 月 22 日吗?你撰写了第 1 篇技术博客:《遗传算法实例解析》在这平凡的一天,你赋予了它不平凡的意义。也许是立志成为一名专业 IT 作者、也许是记录一段刚实践的经验。…

【iOS】——探究isKindOfClass和isMemberOfClass底层实现

isKindOfClass 判断该对象是否为传入的类或其子类的实例 // 类方法实现,用于检查一个类是否属于另一个类或其父类链上的任何类。(BOOL)isKindOfClass:(Class)cls {// 从当前类开始,tcls将沿着元类的继承链向上遍历。for (Class tcls self->ISA(); …

MySQL:库表操作

MySQL:库表操作 库操作查看创建字符编码集 删除修改备份 表操作创建查看删除修改 库操作 查看 查看存在哪些数据库: show databases;示例: 查看自己当前处于哪一个数据库: select database();示例: 此处由于我不处于任…

Unity UGUI 之 Input Field

本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 1.Input Field是什么? 给玩家提供输入的输入框 2.重要参数 中英文对照着看…

JSONNode树形解析或流式解析

哈喽,大家好,我是木头左! 什么是JSONNode? JSONNode是一个用于处理JSON数据的数据结构,它提供了一种简单、灵活、高效的方式来操作JSON数据。JSONNode可以看作是一个树形结构,其中每个节点都可以包含一个值…

MongoDB自学笔记(四)

一、前文回顾 上一篇文章中我们学习了MongoDB中的更新方法&#xff0c;也学了一部分操作符。今天我们将学习最后一个操作“删除”。 二、删除 原始数据如下&#xff1a; 1、deleteOne 语法&#xff1a;db.collection.deleteOne(< query >,< options >) 具体参…

OpenCV 像素操作—证件照换底色详细原理 C++纯手写实现

文章目录 总体步骤1.RGB转HSV2.找出要换的底色3.取反&#xff0c;黑白颠倒4.将原图像的非背景部分复制到新背景上 完整代码1.C纯手写版2.官方API版本 总体步骤 1.RGB转HSV 为什么一定要转为HSV 颜色空间&#xff1f; 将图像从BGR颜色空间转换为HSV颜色空间是因为HSV颜色空间更…

vscode 文件颜色变绿色

解决&#xff1a;关闭git功能 在设置中搜索Git:Enabled&#xff0c;取消Decorations: Enabled的勾选

内网渗透隧道构建,使用github项目联动msf绕uac,使用简单的spp来进行操作icmp隧道

在我们需要木马上线的时候&#xff0c;发现上线不了&#xff0c;我们一般就想到建立隧道&#xff0c;来解决问题&#xff0c;或者是说我们直接还一种连接的操作来进行上线。比如说我们正向连接上不了&#xff0c;我们可以还成反向连接的操作。或者我们使用隧道直接硬刚waf来进行…

计算机毕业设计-程序论文文档-基于SSM的驾校管理系统

本系统开发采用技术为JSP、Bootstrap、Ajax、SSM、Java、Tomcat、Maven 此文章为本人亲自指导加编写&#xff0c;禁止任何人抄袭以及各类盈利性传播&#xff0c; 相关的代码部署论文ppt代码讲解答辩指导文件都有可私要 项目源码&#xff0c;请关注❥点赞收藏并私信博主&#x…

代码随想录 day 18 二叉树

第六章 二叉树part06 详细布置 530.二叉搜索树的最小绝对差 需要领悟一下二叉树遍历上双指针操作&#xff0c;优先掌握递归 题目链接/文章讲解&#xff1a;https://programmercarl.com/0530.%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91%E7%9A%84%E6%9C%80%E5%B0%8F%E7%B…

鸿蒙OpenHarmony Native API【HiLog】

HiLog Overview Description: HiLog模块实现日志打印功能。 开发者可以通过使用这些接口实现日志相关功能&#xff0c;输出日志时可以指定日志类型、所属业务领域、日志TAG标识、日志级别等。 syscap SystemCapability.HiviewDFX.HiLog Since: 8 Summary Files File …

甄选范文“论企业集成平台的理解与应用”,软考高级论文,系统架构设计师论文

论文真题 企业集成平台(Enterprise Imtcgation Plaform,EIP)是支特企业信息集成的像环境,其主要功能是为企业中的数据、系统和应用等多种对象的协同行提供各种公共服务及运行时的支撑环境。企业集成平台能够根据业务模型的变化快速地进行信息系统的配置和调整,保证不同系统…

HarmonyOS应用开发者高级认证,Next版本发布后最新题库 - 单选题序号3

基础认证题库请移步&#xff1a;HarmonyOS应用开发者基础认证题库 注&#xff1a;有读者反馈&#xff0c;题库的代码块比较多&#xff0c;打开文章时会卡死。所以笔者将题库拆分&#xff0c;单选题20个为一组&#xff0c;多选题10个为一组&#xff0c;题库目录如下&#xff0c;…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 堆内存申请(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

爬虫自己做的

1.urllib 1.1基本使用 1.2 下载&#xff08;图片&#xff0c;页面&#xff0c;视频&#xff09; 1.3 get 1.3.1 quote 中文变成对应uncode编码 当url 的wd中文时 quote是将中文变成对应uncode编码 然后拼接成完整的url 1.3.2urlencode方法 wd有多个参数 1.3.3ajas get实例 …

科普文:银行信贷系统概叙

信贷业务流程 资金需求者提交申请&#xff1a;资金需求者通过不同渠道&#xff08;如APP、网站、门店等&#xff09;提交贷款申请。 系统交互完成审批&#xff1a;系统通过自动化和人工相结合的方式&#xff0c;对贷款申请进行初步筛选和审批。 系统交互完成策略判断&#xf…

java学习---小项目---租房系统

package com.project.House_rental.HouseApp;import com.project.House_rental.HouseView.HouseView; //主界面 public class HouseApp {public static void main(String[] args) {new HouseView().List_();System.out.println("------已退出----------");} }package…

5G网络近海覆盖和融合应用5G网关5G路由器CPE

5G移动超远高速率CPE 5G移动超远距离高速率海上CPE是根据海上特殊场景需求&#xff0c;研发的5G天通电话&#xff0c;短信&#xff0c;北斗短报文&#xff0c;远航道宽带接入系统&#xff0c;专门为海洋急救&#xff0c;海洋作业、海洋施工定制的船用5G高速上网终端&#xff0c…

合并区间 1

合并区间 思路&#xff1a; 感觉就是一个个vector遍历&#xff1f; 两两对比。若第一个的第二个元素大于下一个的第一个元素&#xff0c;则合并&#xff0c;存入答案数组即可。 nonono 新思路 思路打开&#xff01; 对于每一个区间&#xff0c;判断他能覆盖的最大区间在哪里…