vscode - load snippets based on react vs react native

Question

Is there any way to load separate sets of snippets depending on if I'm developing, for example, a react project vs. a react native project?

Basically, when I hit my keybinding (ctrl+shift+b), it should fill out my Button snippet, which is different for each:

react: "<button className=''>$1</button>",

react-native: "<Button title='$1' onPress={()=>{}}/>",

Right now I have a silly workaround where I use .jsx for web components and .js for react-native components, then configure my snippets for each language-mode accordingly, but I would prefer to use .jsx for both.

Dennis Vash · Accepted Answer · 2019-07-30 16:26:00Z

2

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

In VSCode, snippets are loaded according to file association. You can check the current file association on the bottom bar.

Example for JavaScript React file:

Now you need to configure the snippet to the desired file type, for this you need to add files.associations property in settings.json.

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

From this point, files names like MyComponent.react.js will associate with javascriptreact type.

All is left adding your snippets to javascriptreact type:

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

and choose a file type (if exists like javascriptreact.json or create a new file type like javascriptreactnative).

All snippets in the chosen type will associate and auto-suggests.

For example, the next snippet in javascriptreact.json will work only in React files as configured above:

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

In conclusion, you need to separate .jsx extension to recognize react and react-native, for example: *.native.jsx

edited Jul 30, 2019 at 16:26

answered Jul 30, 2019 at 16:21

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joe Roddy Over a year ago

Okay, thanks for the thorough answer Dennis! So if I'm understanding this right, there is no way to have snippets in a file with the exact same name (MyComponent.jsx) behave differently based on whether it is a react or a react native project? It can only be achieved by naming my react files and my react native files differently (beit through file extensions or some sort of file tail)?

Dennis Vash Over a year ago

Yes, like *.native.jsx for react-native files, its a good practice to use extensions like this for a clue of what the files hold.

Joe Roddy Over a year ago

Thanks a lot for your time! Learned a lot from your file associations example :D

Collectives™ on Stack Overflow

vscode - load snippets based on react vs react native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related