vs code设置支持jsx支持emmet

最新推荐文章于 2025-05-19 00:47:51 发布
最新推荐文章于 2025-05-19 00:47:51 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 开发工具 json javascript ViewUI
原文链接：https://segmentfault.com/a/1190000014509651
本文介绍如何在VSCode中启用Emmet插件来提高React JSX语法的编写效率。默认情况下，VSCode可能无法在React项目中完全支持Emmet语法，通过简单的设置即可解决这一问题。

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

html中默认支持

现在vscode中html文件默认是支持emmet语法的，可以新建一个html文件，输入html:5按tab键试一下，会自动生成html结构。

问题

但是中写react的时候，中jsx语法中，输入html标签，按tab键不仅不会生成成套的html标签，而且使用emmet的写法也不管用。

解决

这个其实vs code是支持的，只是默认设置不支持，需要手动设置一下，设置步骤：

  • 点击左下角“设置”
  • 搜emmet
  • 设置如下属性
"emmet.triggerExpansionOnTab": true

这时jsx语法中就支持了emmet了

VS Code插件神器
JanLEE
07-04 2985
1. Codelf 安装次数：2万+ 在计算机科学中只有两件难事:缓存失效和命名。 我对这句话深有同感，当开发项目时，命名一直都是一种让我痛苦的事情。我想，应该不止我一个人有这样的感觉。 可是，命名又是开发过程中一项非常重要的事情，例如，一个好的函数命名，能够让你瞬间明白它实现的功能，这样就节省了很大一部分时间琢磨一段代码到底是什么含义。 所以，每当开发过程中遇到要命名的变量、函数、类时我就不得不停下开发，苦思冥想半天。 但是，CodeIf的出现让这个问题迎刃而解，它通过搜索GitHub
Sublime Text3: 让JSX支持Emmet调用代码补全和缩写(tab)
CRPER
07-25 1万+
今天偶然发现在jsx,不能用tab来调用emmet,瞬间懵逼....折腾出一个兼容方案; 不用兼容方案的情况下,只能用`ctrl+e`来展开snippet ...
React-vscode如何支持jsx语法
种子不服古怪的博客
06-15 1809
文章目录问题描述 问题描述 安装了插件ES7 React/Redux/GraphQL/React-Native snippets还是不能完全支持
CSS——选择器进阶（伪类选择器&emmet语法）
最新发布
irotoru的博客
05-19 830
Emmet语法是一种用于快速生成HTML和CSS代码的工具，通过简写形式显著提高编码效率。它支持多种功能，包括基础标签生成、类选择器生成、ID选择器生成、复合属性生成、同级元素生成、父子元素生成、重复元素生成、内容填充生成、数字序列生成、CSS属性简写、多属性组合生成以及内容递增扩展。
1. vscode配置到jsx(reference: jonas tutorial)
weixin_49379140的博客
04-11 925
不用登录和注册，直接在原来地址上输入。react.new然后自动创建react项目目录点击获取Advice，应用useState、useEffect、props、自定义组件。
VS code编辑器中使用JSX语法，自动补全HTML标签
baidu_41604826的博客
04-22 1361
VScode 自动补全HTML标签 第一步：打开vscode界面——点击左下角的“设置”图标——打开设置 第二部：在搜索框中输入：emmet.triggerExpansionOnTab，显示如下： 第三步：把上图的方框打钩，就可以了 现在就可以实现，写完标签之后，按Tab键，补全标签 ...
VSCode中JSX的编写优化
m0_46165586的博客
11-08 973
在vscode中的文件>首选项>设置中，直接搜索，进入：找到 “注意：有些vscode的版本不一样，都如出一辙。在vscode中的文件>首选项>设置中，直接搜索，找到 “” 配置项，点击添加项javascript，值为。
在 Visual Studio Code 中的 Emmet的使用.pdf
01-14
Visual Studio Code（VSCode）是一款功能强大的代码编辑器，它内置了对Emmet的支持，这是一种用于HTML、CSS以及其他标记语言的代码片段展开工具，能够快速编写代码。Emmet的主要作用是通过缩写的方式来提高编码效率...
Emmet-monaco-es：提升Monaco编辑器的Emmet支持体验
资源摘要信息: "Emmet-monaco-es是为Monaco编辑器提供Emmet支持的库，它允许用户在使用Monaco编辑器时，享受与Visual Studio Code内置Emmet插件几乎相同的快捷功能。Emmet是一种插件，它极大地提高了HTML和CSS的编写...
VS Code高级设置技巧与扩展插件深度解析
VS Code设置是指在Visual Studio Code（VS Code）这款流行的代码编辑器中配置和优化工作环境的过程。VS Code提供了强大的功能来提升开发者的编程体验，以下是一些核心的知识点，它们都与VS Code的设置和扩展相关。 ...
VS-CODE-SETUP
05-05
VS代码设置 扩充功能 自动重命名标签 自动重命名配对HTML / XML标签 支架对着色器 可自定义的扩展程序，用于为匹配的括号着色 ES7 React / Redux / GraphQL / React-Native片段 使用ES7语法在JS / TS中对React，...
使用VSCode编写jsx代码时如何实现标签自动补齐
热门推荐
kiddd_fu的博客
11-29 2万+
VSCode是kiddd最喜欢的编辑器，极简而灵活，丰富而且继续丰富着的插件库，配置简单，都吸引着我。众所周知，VSCode在编写HTML代码时可以tab键自动补齐标签。然而在编写.jsx文件的代码时，嵌套的标签就无法享用一键补齐的优待了。当然，如果这点问题不能解决，VSCode也不能在现代编译器中脱颖而出了。这里kiddd就介绍一种简单的实现方法，你不需要下载任何插件。1. 打开设置 打开：文
Emmet - 自动补全 JSX
anleng6817的博客
03-02 529
VSCode 中设置"emmet.syntaxProfiles": {"javascript": "jsx"} reactjs - JSX or HTML autocompletion in Visual Studio Code - Stack Overflow 转载于:https://www.cnblogs.com/jffun-blog/p/10463596.html...
vscode编辑器开发react时，设置使emmet支持自定义组件
weixin_30242907的博客
08-23 404
"emmet.triggerExpansionOnTab": true 在vscode用户配置当中配置这个，就可以了 转载于:https://www.cnblogs.com/kugeliu/p/7418114.html
VSCode 设定emmet，解决在js中自动补全html标签的问题
weixin_44376327的博客
12-06 2182
VSCode 设定emmet，解决在js中自动补全html标签的问题 解决方法参考VScode 設定 js 的 emmet 按下 tab 快速產生「樣板字面值( Template Literal )」 文件–>首选项–>设置–>在搜索中输入“Launch”，点击“在settings.json中编辑” –>添加以下代码 "emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "j
配置vscode使它能够在自定义扩展名当中支持emment语法
weixin_30566111的博客
03-31 163
在.vue文件当中默认是不支持emment的，需要在vscode设置当中设置 "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" } 转载于:https://www.cnblogs.com/kugeliu/p/6650473.html...
sublime 修改emmet兼容jsx文件
Lv骚年
09-08 496
安装 PC上ctrl+shift+p（MacCmd+shift+p）打开面板输入emmet安装 使用方法 打开 preferences -> Key bindings - Users，把下面代码复制到[]内部。 { "keys": [ "super+e" ], "args": { "action": "ex...
VS Code必备插件神器（2024）
我们好像在哪见过
07-28 1万+
VSCode能够如此强大还源自于它的插件市场，一款好的插件能够较为明显的提升大家的开发效率，废话不多说，直接上插件！
【React】05-06.JSX语法及使用
HUMM
11-09 583
JSX语法及使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值