在 JSX 的 VSCode 中启用 Emmet - JavaScript

在使用 React 开发时，通常会用到 JSX，而在 JSX 中使用 Emmet 可以显著提高代码编写的效率。本文将介绍如何在 JSX 的 VSCode 中启用 Emmet。

步骤

1. 打开 VSCode，进入设置（快捷键 Ctrl+, 或 Cmd+,）。

2. 在搜索框中输入 Emmet，找到 Emmet: Include Languages，点击进入设置。

3. 单击 Edit in settings.json，在 settings.json 文件中添加以下内容：

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

   这个设置告诉 VSCode 在 JavaScript 中启用 Emmet。

   Markdown 代码片段：

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

4. 保存 settings.json 文件，并重启 VSCode。

5. 在 JSX 文件中输入 Emmet 缩写，例如 div.container>ul.nav>li*3>a，按下 Tab 键，即可自动生成对应的代码。

   Markdown 代码片段：

    <div className="container">
      <ul className="nav">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </div>
   

结论

启用 Emmet 可以显著提高编写 JSX 代码的效率，这个小技巧可以帮助开发者更加高效地完成项目。