React.js shortcut not working in VS Code issue [Solved]

# React.js shortcut not working in VS Code issue [Solved]

The issue where your React.js shortcuts aren't working in VS Code occurs when you haven't installed the extension that provides React.js snippets in the IDE.

To resolve the issue:

1. Click on Extensions in the left sidebar.

• You can also open the Extensions menu by pressing:
  • Ctrl + Shift + X on Windows or Linux.
  • Command + Shift + X on macOS.

2. Type react snippet and select the ES7+ React/Redux/React-Native snippets extension.

3. Click on the Install button.

Make sure to install the correct ES7+ React/Redux/React-Native snippets extension from dsznajder.

You can also use the Quick Open functionality to install the extension:

1. Press:

• Ctrl + P on Windows and Linux.
• Command + P on macOS.

2. Paste the following command.

Copied!
ext install dsznajder.es7-react-js-snippets

3. Press Enter to install the extension.

If the extension is disabled, you won't be able to use its snippets.

The extension provides code snippets for React, Redux and React-Native.

You can view all of the supported snippets in this GitHub Readme.

Here are some examples.

Type rafce and press Tab (or Enter depending on your settings).

The snippet defines a React functional component and exports it using a default export.

If you want to export the component using a named export, use the rafc snippet instead.

Many more React.js snippets are supported.

You can view all of the available snippets in this section of the extension's GitHub README page.

If you don't get autocomplete when you start typing, try to restart VS Code.

# Making sure the file's language is set correctly

If you still aren't able to use snippets in VS Code:

1. Open a file with a .js extension.
2. Click on JavaScript in the bottom right corner.

3. Type React and select JavaScript JSX.

4. Start typing a prefix and see if you can autocomplete a code snippet.

If you still aren't able to use snippets, you can try setting the file's extension to .jsx (or .tsx if you use TypeScript).

In most cases, pressing Tab once you start getting autocomplete posts the snippet.

However, if the Tab key doesn't work, try pressing Enter.

You can also press Tab to move your cursor to the next position in the snippet.

You can view all of the available snippets in this section of the extension's GitHub README page.

Another thing you can check is that you don't have any other React.js snippet extensions installed that interfere with this extension.

# Try to uninstall and reinstall the extension

If you still aren't able to use the extension, try to uninstall it and then reinstall it.

1. Click on Extensions in the left sidebar.

• You can also open the Extensions menu by pressing:
  • Ctrl + Shift + X on Windows or Linux.
  • Command + Shift + X on macOS.

2. Type react snippet and select the ES7+ React/Redux/React-Native snippets extension.

3. Select the extension and click on the Uninstall button.

4. Click on the Reload Required button and then click Install.

5. Check if the extension works after reloading VS Code.

# Make sure your settings are correct

If you still aren't able to use snippets:

1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).

2. Type user settings and select Preferences: Open User Settings.

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

3. Type editor.snippet.

4. Make sure the Editor: Snippet Suggestions setting is set to top.

When the setting is set to top, then snippets are shown with other suggestions and are placed at the top.

Make sure the Editor: Snippet Suggestions setting is NOT set to none.

If the setting is set to none, then snippet suggestions are not shown.

# Setting snippet suggestions to top in settings.json

You can also set the setting to top directly in your package.json file.

1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).

2. Type user settings json.

3. Click on Preferences: Open User Settings (JSON)

4. Paste the following line in your settings.json file.

Copied!
"editor.snippetSuggestions": "top",

Make sure to remove the trailing comma if the line comes last.

If you still aren't able to use snippets in VS Code, try clearing the cache.

I've also written an article on how to configure Emmet to work in React in VS Code.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Tab key not working in Visual Studio Code issue [Solved]
• Jump to a closing Bracket, Parenthesis or Tag in VS Code
• Wrap Tabs to Multiple Lines in Visual Studio Code
• Type annotations can only be used in TypeScript files