VSCode中如何根据React/React Native项目加载不同代码片段？

Great question! You totally can set up context-aware code snippets that serve React web vs. React Native Button code when using the same .jsx file extension and shortcut. Here are two reliable ways to pull this off without splitting your file types:

Approach 1: Workspace Settings + Conditional Snippets #

This method uses VS Code's built-in workspace settings to flag your project type, then uses a conditional variable in your snippet to load the right code.

Step 1: Tag your projects #

• For your React Web project, create/open .vscode/settings.json and add:

  {
    "projectType": "react-web"
  }
  

• For your React Native project, do the same but set:

  {
    "projectType": "react-native"
  }
  

Step 2: Create the conditional snippet #

1. Open VS Code's user snippets panel: Press Ctrl+Shift+P → select Configure User Snippets → choose javascriptreact.json (this applies to all .jsx files).
2. Paste this snippet definition:

   "Smart Button Snippet": {
     "prefix": "smart-button", // Use this prefix manually, or bind it to your shortcut
     "body": [
       "${{config:projectType == 'react-web' ? '<button className=''>$1</button>' : '<Button title=\"$1\" onPress={()=>{}}/>'}}"
     ],
     "description": "Insert Button based on project type (React Web/Native)"
   }
   

Step 3: Bind your shortcut #

1. Open keyboard shortcuts: Press Ctrl+K Ctrl+S.
2. Click the {} icon in the top-right to open the JSON settings.
3. Add this binding to trigger the snippet with Ctrl+Shift+B:

   {
     "key": "ctrl+shift+b",
     "command": "editor.action.insertSnippet",
     "args": {
       "name": "Smart Button Snippet"
     },
     "when": "editorLangId == javascriptreact"
   }
   

Approach 2: Project-Specific Snippets #

If you prefer keeping snippets isolated per project, you can define project-level snippets that override global ones automatically.

Step 1: Create project-specific snippet files #

• In your React Web project, create .vscode/javascriptreact.code-snippets with:

  {
    "Web Button": {
      "prefix": "button",
      "body": "<button className=''>$1</button>",
      "description": "React Web Button"
    }
  }
  

• In your React Native project, create the same file name but with:

  {
    "Native Button": {
      "prefix": "button",
      "body": "<Button title='$1' onPress={()=>{}}/>",
      "description": "React Native Button"
    }
  }
  

Step 2: Bind the shortcut #

Use the same keyboard shortcut binding as above. You can even use the same snippet name in both projects—VS Code will always prioritize project-level snippets over global ones.

Pro Tips #

• Double-check that your workspace settings are saved (VS Code usually prompts you to reload the window when changes are made).
• If you want to add more context-aware snippets later, just extend the conditional logic in Approach 1 or duplicate the project-specific snippet pattern.

内容的提问来源于stack exchange，提问作者Joe Roddy