Built-in snippet not working in VS Code for React

Question

I am coding a React page with VS Code.

Suddenly, some snippets like rfce started not working even if it's never given me problems. I don't know what's wrong.

picture of before

picture of now

What I did recently was just updated react-router-dom to version 5.2.0 and npm install it.

Please upload pictures of the errors prompted in vscode if you have any. Please also upload pictures of what the expected outcome and the current outcome (what you mean with "not working") is. Some snippets may change their behaviour across versions. — feychu, Feb 09 '21 at 12:04
Install ES7+ React/Redux/React-Native snippets from Extensions and make sure it is Enabled. — Onkar Kole, Feb 03 '22 at 07:04

score 20 · Accepted Answer · answered Feb 09 '21 at 11:36

20

React snippets are not built-in. That one for example comes from this extension.

Make sure you have it installed and enabled, and that you are working in a file with the proper file extension for them to work.

answered Feb 09 '21 at 11:36

Guillermo Brachetta

3,857
3
18
36

score 10 · Answer 2 · answered Sep 14 '22 at 13:56

10

If on windows, use -rfce instead of _rfce. This worked for me!

answered Sep 14 '22 at 13:56

Alex

101
1
2

Exvinp · Answer 3 · 2023-05-23T07:58:03.667

Those React snippets what you are talking about are not built-in, those snippets are coming from an extension. That extension stopped working for you because you may change some of your settings.

Make sure you have installed the extension and enabled. Also that: you are working in a file which has the proper file extension (try: .jsx & .tsx).
If they are still not working (which was the case at me also), check your settings, because some of the settings can interfere, and make the extension stop working.
Open settings.json by: CTRL + SHIFT + p , type: settings.json, select: "Open settings (JSON)"
Check in the settings.json file if the following settings are different than mine:

    "editor.snippetSuggestions": "top",     /*make sure this is NOT "none"*/
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.quickSuggestions": {
      "other": true,
      "comments": false,
      "strings": true
    },
    "editor.wordBasedSuggestions": true,
    "html.suggest.html5": false,
    "typescript.suggest.paths": false,
    "javascript.suggest.paths": false,

As a fast experiment you can copy the whole code, paste it at the end of the settings.json, save it, restart VSC, and try it out if now the snippets are working.
If it solved your issue, you can sort the commands one-by-one out, to find out which caused the issue of yours.

score 3 · Answer 4 · answered Feb 18 '22 at 12:09

3

I went through the same thing. You can try uninstalling and then installing the extension again

answered Feb 18 '22 at 12:09

Md Shahidul Islam

31
2

score 1 · Answer 5 · answered Mar 17 '22 at 09:02

It might not work, if you use the same file name like Rfce.js
Ensure that the file has extension js, ts etc.,
Uninstalling and installing React snippet from VSCode Extension might work.
Go to Preference - Settings - Extensions - Search for React Snippet and check if the values are correctly checked in.

score 0 · Answer 6 · answered Jun 29 '22 at 19:13

0

It seems like that React snippet is not working properly, try to download it manually and install it through the link to the vss file and now install from Vss option in the extension section

answered Jun 29 '22 at 19:13

Ak Khan

31
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 01 '22 at 05:41
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32137338) – Francisco Maria Calisto Jul 06 '22 at 13:26

score 0 · Answer 7 · answered Dec 18 '22 at 07:48

0

I had to uninstall the snippet extension I had which was:

React-Native/React/Redux snippets for es6/es7 v2.0.6 by: EQuimper

and I used the extension: ES7 React/Redux/GraphQL/React-Native snippets v1.9.3 by: rodrigovallades

answered Dec 18 '22 at 07:48

TrevTheDev

37
1
9

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 22 '22 at 12:32

score 0 · Answer 8 · answered Jan 06 '23 at 13:12

0

Launch Quick Open:

Linux: Ctrl+P
macOS: ⌘P
Windows: Ctrl+P

Paste the following command and press Enter:

ext install dsznajder.es7-react-js-snippets

answered Jan 06 '23 at 13:12

cancan

59
6

score 0 · Answer 9 · answered Jan 08 '23 at 04:08

0

I think you unfortunately uninstall it.

you have to install.

ES7+ React/Redux/React-Native snippets

in visual studio. Hope it works

answered Jan 08 '23 at 04:08

Solomon Suraj

1,162
8
8

score 0 · Answer 10 · answered Feb 18 '23 at 12:36

My snippets worked as I thought they should once I fixed auto imports from this post by setting includePackageJsonAutoImports to always on. I used to have to type "-" before they would come up.

Visual Studio Code - Auto Imports / Quick Fix does not work

Built-in snippet not working in VS Code for React

10 Answers10