时间戳

首页 > 解决方案 > vscode - 基于 react 和 react native 加载代码片段

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

问题描述

有没有办法根据我是否正在开发来加载单独的片段集，例如，一个反应项目与一个反应本机项目？

基本上，当我点击我的 keybinding 时(ctrl+shift+b)，它应该填写我的Button片段，每个片段都不同：

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

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

现在我有一个愚蠢的解决方法，我将.jsx其用于 Web 组件和.jsreact-native 组件，然后相应地为每种语言模式配置我的片段，但我更喜欢.jsx两者都使用。

标签： reactjsreact-nativevisual-studio-codecode-snippets

解决方案

此解释涉及所有文件类型/片段，示例是添加react片段。

在 VSCode 中，片段是根据文件关联加载的。您可以在底栏检查当前文件关联。

文件示例JavaScript React： 在此处输入图像描述

现在您需要将片段配置为所需的文件类型，为此您需要files.associations在settings.json.

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

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

从这一点来看，文件名 likeMyComponent.react.js将与javascriptreact类型相关联。

剩下的就是添加您的代码段以javascriptreact键入：

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

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

所选类型中的所有片段都将关联并自动建议。

例如，下一个片段javascriptreact.json仅适用于React上面配置的文件：

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

总之，您需要单独.jsx扩展以识别reactand react-native，例如：*.native.jsx

推荐阅读