vscode - 基于 React 与 React Native 加载片段

Question

是否有任何方法可以根据我是否正在开发加载单独的片段集，例如，反应项目与反应本机项目？

基本上，当我按下快捷键 (ctrl+shift+b) 时，它应该填写我的 Button 片段，每个片段都不同：

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

本机反应："<Button title='' onPress={()=>{}}/>",

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

Answer 1

This explanation regards to all file types/snippets, the examples are of adding react snippets.

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

Example for JavaScript React file:

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

中添加 files.associations 属性

File -> Preferences -> Settings -> Open Settings (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 类型相关联。

剩下的就是将您的代码段添加到 javascriptreact 类型：

View -> Command Palette -> Preference: Configure User Snippets

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

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

例如，javascriptreact.json 中的下一个片段将仅在 React 个文件中工作，如上配置：

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

总之，需要将.jsx后缀分开才能识别react和react-native，例如：*.native.jsx

vscode - 基于 React 与 React Native 加载片段

vscode - load snippets based on react vs react native

code-snippets

reactjs

react-native

visual-studio-code