Mac React开发JSX自动补全功能设置

已于 2022-06-12 21:25:40 修改
阅读量331 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： react.js macos vscode json 前端
于 2022-06-09 09:45:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43710627/article/details/125196991
本文指导在Mac环境下，如何设置Visual Studio Code（VSCode）以实现React JSX代码的自动补全功能。步骤包括：打开VSCode，通过菜单进入设置，搜索相关设置项，编辑并保存设置代码，最后重启VSCode使设置生效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Mac React开发JSX自动补全功能设置

1.打开vscode，code–>首选项–>设置

你好！ 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

2.在搜索框中输入emmet即可

在这里插入图片描述

3.在当前页面向下滑动，找到任意一个settinh.json文件即可

在这里插入图片描述

4.在里面编写设置项代码即可

在这里插入图片描述

5.保存，退出vscode重启


文末彩蛋:代码提供
最低0.47元/天 解锁文章

200万优质内容无限畅学
LuckyWishes
关注
Sublime Text3: 让JSX支持Emmet调用代码补全和缩写(tab)
CRPER
07-25 1万+
今天偶然发现在jsx,不能用tab来调用emmet,瞬间懵逼....折腾出一个兼容方案; 不用兼容方案的情况下,只能用`ctrl+e`来展开snippet ...
React Native 开发工具
srxboys的博客
07-13 1180
React Native Develop Tool 开发工具提供 自动补全、语法检查, 方便我们开发。 1、* Atom + Nuclide + watchman * (1)Atom 是github专门为程序员推出的一个跨平台文本编辑器。 具有简洁和直观的图形用户界面，并有很多有趣的特点： 支持CSS，HTML，JavaScript等...
react/cli里jsx代码自动补全设置
Fat_Shady_的博客
05-09 466
很多刚接触react的小白使用react/cli敲jsx代码时会遇到无代码提示的问题，大大降低了工作效率。
React-如何在jsx中自动补全标签
weixin_33850015的博客
12-12 2040
在vscode编辑器里面，写标签按 键不会自动闭合补全标签，估计大家都会装一些插件来达到自己的目的，其实只要用户设置里加上一段就行（有一个很让人苦恼的问题, 就是标签在jsx语法中不能自动补全） 1.文件 -> 首选项 -> 设置 -> 点击右边的扩展...选择打开setting.json 用户设置页签中添加下面 ----- 也可以在左边的搜所设置中搜索emmet.inclu...
VSCode 设置 JSX 语法自动补全
lilygg的博客
06-25 1479
1.打开VScode 2.文件>首选项>设置 3.搜索用户设置 4.添加配置 "emmet.includeLanguages": { "javascript":"javascriptreact" } 参考博文：https://www.cnblogs.com/yigexiaojiangshi/p/10219617.html ...
vscode react中标签自动补全 vscode jsx语法自动补全html标签
无名小小卒的博客
08-28 833
vscode jsx语法自动补全
vscode jsx 自动补全
08-05
在编写React的代码时，我们通常会使用JSX语法。...你可以在其中编写设置项代码，以启用JSX的自动补全功能。保存并退出VSCode，然后重新启动它。这样，你就可以享受到VSCode中的JSX自动补全功能了。
React.sugar 插件：提升 Espresso 编辑器的 React 开发体验
4. 自动完成 React 顶级 API：React.sugar 提供了对 React 核心库 API 的自动完成功能，这意味着在编写 React 代码时，开发者可以利用代码补全功能快速输入 React 的方法和属性名称，减少了编码错误的可能性。...
打造React高仿网易云音乐Mac客户端：功能丰富的音乐播放器
使用TypeScript可以提供更好的代码组织、自动补全、类型检查等功能，从而减少运行时错误，并提升开发者的效率。 #### TypeScript的核心优势： - **类型安全**：通过静态类型检查，可以在编译时捕捉到许多错误。 - ...
【react全家桶学习】jsx语法如何在vscode中自动补全标签
蜗牛~~
04-17 1421
我们在编写react的代码时，用到jsx语法，在js文件中输入html标签无法自动提示补全，很不方便，因此我们通过下文去解决该问题，提升开发效率。一、快速打开vscode中的settings.json。可以看到，此时再输入标签就有提示了~2、直接打开右上角的小图标即可。二、加入这行代码，保存即可。
React-如何在jsx中自动补全标签(vscode)
考拉很OK
07-04 278
那我们经常会想到下载对应的插件来解决这个问题, 可以我们尝试了多个插件之后, 还是解决不了这个问题. 所以小编就深入的对这个东西进行了研究. 发现在vscode的设置中就可以配置.但在使用React库写代码的时候, 有一个很让人苦恼的问题, 就是标签在jsx语法中不能自动补全(vscode)打开设置-> 搜索emmet.include -> 找到上方代码拷贝 -> 粘贴到右侧工作区。React库最近的增长趋势很明显, 很多朋友都在选择学习, 很多公司也在选择使用React栈.
mac新建文件的方法，新建js文件就是把txt后缀改成js
weixin_40945354的博客
02-16 2221
打开后，敲下快捷键 shift + command + T ,这个快捷键是在.rtf和.txt之间来回切换，默认是.rtf后缀，切换到.txt时可敲下 command + s 保存到指定路径
VScode设置jsx语法自动补全
weixin_30550081的博客
01-04 555
1.打开VScode 2.文件>首选项>设置 3.加上以下配置项就可以了 "emmet.includeLanguages": { "javascript": "javascriptreact" } 　　 转载于:https://www.cnblogs.com/yigexiaojiangshi/p/10219617.html...
vscode中react的jsx中补全html标签
qq_41834059的博客
07-01 9894
在首选项的设置中加入 "emmet.includeLanguages": { "javascript": "javascriptreact" },即可出现按tab键补全HTML标签。
vscode编写react代码 jsx中html标签tab键自动补全(2018 12 24亲测有效)
八佾舞于庭
12-24 9485
ctrl+shift+p 然后在搜索栏中搜索setting 点击进入setting界面 在setting界面搜索 includeLanguages   添加代码如下： "emmet.includeLanguages": { "javascript": "javascriptreact" }    重启后即可生效 ...
vscode 自动补全jsx语法
瑞朋哥的博客
05-01 2917
一直使用vscode编辑器，感觉十分强大，最近复习rect，发现对于jsx语法，不太友好了，百度搜索一番，添加下面的配置即可，复制粘贴，配置好即可，亲测！！！ "emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" } 在用...
vscode jsx语法自动补全html闭合标签
sxs7970的博客
05-12 1899
学习React 接触了一种类似于 HTML的语法就是 JSX语法，但是用VSCode每次写JSX语法的时候，不会自动闭合元素标签，不过可以进行配置： 打开 vsCode，选择 文件 -> 首选项 -> 设置 然后在搜索中，输入 emmet.includeLanguages ，点击如下 settings.json中编辑 添加如下代码 "emmet.includeL...
vscode支持jsx的自动补全
你，若盛开的专栏
08-08 933
在设置文件settings.json中添加如下配置： "emmet.includeLanguages": { "javascript": "javascriptreact" }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值