在 VS 代码中配置 JSX 用户代码片段

Question

有没有办法在 VS Code 中创建我自己的 JSX 用户代码片段？我尝试配置 javascriptreact.json 文件，但在 React 组件的 return 语句中它不起作用。它确实可以使用 javascript.json 文件，但我不想在使用普通 Javascript 时看到这些片段。我也不想使用全局或项目片段。这是一个 JSX 片段的例子：

"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 文件。

Answer 1

是的，这是我的片段之一

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

Answer 2

由于您的代码段 - 位于 javascriptreact.json - 在 jsx 文件中对我来说工作正常，我怀疑你正试图将它插入反引号中。

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

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

在 VS 代码中配置 JSX 用户代码片段

Configure JSX User Snippets in VS Code

reactjs

visual-studio-code

jsx

code-snippets