在 VS Code 中配置 JSX 用户代码段答案

【问题标题】：Configure JSX User Snippets in VS Code在 VS Code 中配置 JSX 用户代码段
【发布时间】：2020-09-10 17:32:49
【问题描述】：

有没有办法在 VS Code 中创建我自己的 JSX 用户 sn-ps？我尝试配置 javascriptreact.json 文件，但在 React 组件的 return 语句中它不起作用。它确实可以使用 javascript.json 文件，但我不想在使用纯 Javascript 时看到那些 sn-ps。我也不想使用全局或项目 sn-ps。下面是一个 JSX-Snippet 示例：

"Create contact list": {
    "prefix": "cl",
    "body": [
        "<div>",
        "\t<ListContacts",
        "\t\tcontacts={this.state.contacts}",
        "\t\tonDeleteContact={this.removeContact}",
        "\t/>",
        "</div>"
    ],
    "description": "Creates JSX code for contact component",
}

使用命令面板中的“Inspect Editor Tokens ans Scopes”，语言似乎是jsx-tags，但我找不到它的json文件。

【问题讨论】：

标签： reactjs visual-studio-code jsx code-snippets

【解决方案1】：

由于您的 sn-p - 位于 javascriptreact.json - 在 jsx 文件中对我来说可以正常工作，我怀疑您正试图将其插入反引号中。

如果是这种情况，您需要修改editor.quickSuggestions 设置以包含strings，否则vscode 不会在反引号内显示您的sn-p。所以试试：

"editor.quickSuggestions": {
  "other": true,
  "comments": false,
  "strings": true
},

【讨论】：

我创建了一个新的 react 应用程序（使用 npm create-react-app），这次我的 sn-ps 在 javascriptreact.json 中工作。我无法重建为什么它在我以前的项目中不起作用。感谢您指出这一点！

【解决方案2】：

是的，这是我的 sn-ps 之一

{
  "snView": {
    "prefix": "snView",
    "body": [
      "import React from 'react';",
      "import PropTypes from 'prop-types';",
      "",
      "import useStyles from './styles';",
      "",
      "const $1 = ({ $2 }) => {",
      "  const classes = useStyles()",
      "",
      "  return (",
      "    <div className={classes.container}>",
      "      <p>test</p>",
      "    </div>",
      "  )",
      "}",
      "",
      "$1.propTypes = {",
      "};",
      "",
      "export default $1;",
      ""
    ],
    "description": "Log output to console"
  }
}

【讨论】：