vscode识别@路径并给出路径提示

最新推荐文章于 2024-09-09 10:01:40 发布
最新推荐文章于 2024-09-09 10:01:40 发布
阅读量442 收藏
点赞数
文章标签： react 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yezi153/article/details/121382363
版权
本文介绍了如何在React项目中通过VSCode设置路径别名，利用`jsconfig.json`和`craco`进行配置，以实现@符号代表src目录的功能，简化代码引用路径。
摘要由CSDN通过智能技术生成

步骤

  1. 在项目根目录创建 jsconfig.json 配置文件
  2. 在配置文件中添加以下配置
  3. jsconfig.json 中：

  4. VSCode 会自动读取 jsconfig.json 中的配置，让 vscode 知道 @ 就是 src 目录 

    用craco来配置路径别名

    craco的使用步骤

  5. 安装包。npm i -D @craco/craco

  6. 在项目根目录下，创建配置文件：craco.config.js。在配置文件中就可以做自定义的修改了。

  7. craco.config.js

  8. 配置路径别名

  9.  

  10. 修改 package.json 中的脚本命令

 

package.json 中：

  这样脚手架可以识别@

yezi153
关注
如何让vscode 识别@路劲符
weixin_45430932的博客
05-30 1247
如何让vscode 识别@路劲符 安装 paht 插件 打开vscode 的settings.js配置文件 // 新增这句话 "path-intellisense.mappings": { "@": "${workspaceRoot}/src" }, 在自己的项目根目录中生成一个jsconfij.json文件 { "compilerOptions": { "baseUrl": "./", "paths": {
75，小红书后端面试
m0_58269070的博客
04-14 548
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
vs code 中路径别名（@）提示和转定义等问题。
m0_61783767的博客
09-09 86
配置文件中添加对Path Intellisense插件的mappings设置。到此就可以实现@路径。（虽然有很多博主说在。
vscode 设置提示 @ 路径 和 ~@ 路径、使用 prettier 一直把大写的PX转换成小写解决办法、ctrl+c 结束终端老是提示 Terminate batch job (Y/N)?
PBitW的博客
05-17 1909
vscode 设置提示 @ 路径 和 ~@ 路径 vscode 使用 prettier 一直把大写的PX转换成小写解决办法 vscode 使用 ctrl+c 结束终端老是提示 Terminate batch job (Y/N)?
VSCode配置@路径提示
m0_59357304的博客
01-26 1033
1、在VSCode安装如图插件 2、在设置→setting.json中添加 // 导入文件时是否携带文件的扩展名 "path-autocomplete.extensionOnImport": true, // 配置@的路径提示 "path-autocomplete.pathMappings": { "@": "${folder}/src" },
在VScode中配置@路径提示
yy_demo的博客
06-16 2340
可以在目录看一下是否有webpack.config.js文件或者是vue.config.js文件，需要先配置一下如下代码。默认情况下使用@选择路径是没有提示的，但是这在我们选择路径的时候非常不方便，我们可以配置一下，下面是具体的步骤。可以用快捷键Ctrl+shift+p快捷键搜索setting.js,去配置代码片段。完成以上三步，你就可以到自己的代码中测试一下效果了。
vs code路径提示插件
m0_73461567的博客
02-02 243
vue中的路径提示，下载插件并在设置json文件中添加配置。
React中使Vscode识别@路径并给出路径提示
数组喜欢打对象的博客
11-17 1281
步骤1: 在项目根目录创建 jsconfig.json 配置文件 在配置文件中添加以下配置 jsconfig.json 中： { "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": {
在CRA创建的项目中使用@并让其识别@路径并给出路径提示
Mr_ZCheng的博客
12-22 555
1.vscode识别@路径并给出路径提示 在项目根目录创建jsconfig.json配置文件 在配置文件中添加以下配置 jsconfig.json 中： { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } } 经过以上操作，VSCode 会自动读取jsconfig.json中的配置，让 vscode 知道 @ 就是 src 目录 2.配置@路径别...
vscode中Vue别名路径提示的实现
11-19
虽然在 vscode 中安装了Path Intellisense 插件，但是并无作用。这样容易出现路径拼写错误的低能问题，同时也会造成开发效率降低 解决方案 在项目 package.json 所在同级目录下创建文件 jsconfig.json， 来解决别名...
vscode 引入文件路径提示
qq_36208612的博客
02-17 1094
vscode 辅助开发配置
Vue2-在VScode中配置@路径提示的插件
tq040626的博客
07-07 486
1、安装插件 Path Autocomplete。
VScode实现@/自动提示
weixin_46058007的博客
06-03 784
在vue项目中使用@/代替src目录，实现路径提示
vue学习笔记：在vscode中使用@提示路径
杨威的博客
05-03 3378
在vscode中输入“@/"后如果可以智能提示路径，可以有效防止路径名称输入错误，减少不必要的麻烦。效果如下图所示： 安装"Path Autocomplete"插件后可以实现路径的智能提示，步骤如下： 1、在vscode中查找Path Autocomplete插件 2、安装插件 3、在vscode中选择“文件-首选项-设置”，在设置页面右上角点击图标打开settings.json配置文件 4、在配置文件中添加如下代码在 //导入文件时是否携带文件扩展..
VSCode路径提示插件Path Intelisense提示很慢
weixin_56101597的博客
09-16 448
把项目中的.vscode文件夹删除，重启即可。
vsCode配置import@路径提示
热门推荐
SunnyRun
06-05 2万+
1、安装插件：Path Intellisense插件； 2. eg： 3.添加： "path-intellisense.mappings": { "@": "${workspaceRoot}/src" } 4.在项目package.json所在同级目录下创建文件jsconfig.json： { "compilerOptions": { "target":...
vscode中@符号自动路径提示代码
m0_50864962的博客
03-15 1519
关于@/ 根路径路径自动补全步骤 第一步:安装 vscode插件 Path Intellisense 在vscode配置项(settings.json)中设置节点 "path-intellisense.mappings": { "@": "${workspaceRoot}/src" } 3.项目根目录中新建jsconfig.json { "compilerOptions": { "target": "ES6", "module": "commonjs", "a
vscode识别jsvite的路径别名
最新发布
09-10
在使用VSCode编辑JavaScript项目时，为了提高开发效率和代码的可读性，经常会对文件路径使用别名，尤其是在使用Vite这样的现代前端构建工具时。要让VSCode识别由Vite定义的路径别名，通常需要在项目的`tsconfig.json`或`jsconfig.json`文件中进行配置。 具体步骤如下： 1. 确保你已经安装了Vite，并在项目中正确配置了`vite.config.js`文件。 2. 在项目根目录下，找到或创建`jsconfig.json`或`tsconfig.json`文件。这个文件用于配置JavaScript或TypeScript项目的编译器选项。 3. 在`jsconfig.json`或`tsconfig.json`文件中添加`compilerOptions`部分，然后在该部分中添加`baseUrl`和`paths`属性。`baseUrl`通常设置为`"."`，表示从项目根目录开始查找文件。`paths`属性用于定义别名和对应的路径映射。 以下是一个配置示例： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], // 其他别名映射 } } } ``` 在这个例子中，`@`被设置为一个别名，它映射到了项目中的`src`目录。这意味着你可以在代码中使用`@/components/MyComponent`这样的路径来引用`src/components/MyComponent.js`文件。 完成配置后，VSCode会根据这些配置识别路径别名，自动为别名路径提供代码补全和跳转功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值