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

Question

有没有办法在VS Code中创建我自己的JSX用户代码？我试着在VS Code中配置了 javascriptreact.json 文件中，但在React组件的返回语句中，它不能工作。但在React组件的 javascript.json 文件，但我不想在使用普通Javascript时看到这些片段。我也不想使用全局或项目片段。下面是一个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",
}

使用命令板中的 "检查编辑器标记和作用域"，语言似乎是： jsx-tags但我找不到它的json文件。

Answer 1

由于你的代码段--位于 javascriptreact.json - 对我来说，工作正常，在一个 jsx 文件，我怀疑你是想在backticks中插入它。

如果是这样的话，你需要修改你的 editor.quickSuggestions 的设置，包括 strings 否则vscode将无法在backticks中显示你的snippet。那就试试吧。

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

Answer 2

是的，这是我的一个代码段。

{
  "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"
  }
}