vscode - 基于 react 和 react native 加载代码片段

Question

是否有任何方法可以根据我是否正在开发来加载单独的 sn-ps 集，例如， react 项目与 react 原生项目？

基本上，当我点击我的键绑定(ctrl+shift+b)时，它应该填写我的Button sn-p，每个人都不同：

反应："<button className=''>$1</button>",

反应原生："<Button title='$1' onPress={()=>{}}/>",

现在我有一个愚蠢的解决方法，我将 .jsx 用于 web 组件，将 .js 用于 react-native 组件，然后相应地为每种语言模式配置我的 sn-ps，但我更喜欢使用 @987654327 @ 对彼此而言。

Answer 1

这个解释涉及所有文件类型/sn-ps，例子是 添加reactsn-ps。

在VSCode中，sn-ps是根据文件关联加载的。您可以在底部栏查看当前文件关联。

JavaScript React 文件示例：

现在您需要将 sn-p 配置为所需的文件类型，为此您需要在 settings.json 中添加 files.associations 属性。

文件 -> 首选项 -> 设置 -> 打开设置 (JSON)

  "files.associations": {
    "*.react.js": "javascriptreact",
    "*.stories.js": "javascriptreact",
    "*.action.js": "javascriptreact",
    "*.reducer.js": "javascriptreact",
    "*.styles.js": "javascriptreact",
    "*.jsx": "javascriptreact",
    "*.js": "javascript"
  }

从此时起，像MyComponent.react.js 这样的文件名将与javascriptreact 类型相关联。

剩下的就是将你的 sn-ps 添加到 javascriptreact 类型：

查看 -> 命令面板 -> 首选项：配置用户代码段

并选择一个文件类型（如果存在，如javascriptreact.json 或创建一个新文件类型，如javascriptreactnative）。

所选类型中的所有 sn-ps 将关联并自动建议。

例如，javascriptreact.json 中的下一个 sn-p 将仅在上面配置的 React 文件中起作用：

  "React Fragment": {
    "prefix": "<>",
    "body": [
      "<>",
      "$1",
      "</>"
    ],
    "description": "Insert React Fragment"
  }

综上所述，需要将.jsx分机分开来识别react和react-native，例如：*.native.jsx