0035. 在 vscode 中，让 Emmet 语法支持 JSX

• 1. 📝 概述
• 2. 💻 具体配置流程
  • 2.1. 【做法 1】通过设置面板来配置
  • 2.2. 【做法 2】通过配置文件 .vscode/settings.json 来配置
• 3. 💻 demos.1 - 在 vscode 中，让 Emmet 语法支持 JSX
• 4. 🔗 References

1. 📝 概述

• 介绍如何配置 VSCode，让 Emmet 语法支持 JSX。
• JSX 是在 React 中用于描述页面结构的 JS 扩展语法。

2. 💻 具体配置流程

2.1. 【做法 1】通过设置面板来配置

1. 打开 VSCode 设置
2. 搜索 emmet.includeLanguages
3. 加上 "javascript": "javascriptreact" 键值对

2.2. 【做法 2】通过配置文件 .vscode/settings.json 来配置

在项目的根目录创建 .vscode/settings.json 文件，添加如下内容：

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

3. 💻 demos.1 - 在 vscode 中，让 Emmet 语法支持 JSX

• 
• 输入：div>span
  • 
  • 按下回车，将会快速生成：<div><span></span></div>
  • 
• 输入：.foo
  • 按下回车，将会快速生成：<div className="foo"></div>

4. 🔗 References

• https://eshwaren.medium.com/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c
  • Medium - Enable Emmet support for JSX in Visual Studio Code | React
• https://stackoverflow.com/questions/56311467/configure-emmet-for-jsx-in-vscode
  • Configure Emmet for JSX in VSCode