内置代码片段在 React 的 VS Code 中不起作用

Question

我正在使用 VS Code 编写 React 页面。

突然间，像

rfce

这样的一些片段开始不起作用，即使它从未给我带来问题。我不知道出了什么问题。

之前的照片

现在的照片

我最近所做的只是更新

react-router-dom

到版本5.2.0和

npm install

它。

Answer 1

React 片段不是内置的。例如，那个来自这个扩展。

确保您已安装并启用它，并且您正在使用具有正确文件扩展名的文件，以便它们可以工作。

Answer 2

如果在 Windows 上，请使用 -rfce 而不是 _rfce。这对我有用！

Answer 3

您所说的那些 React 片段不是内置的，这些片段来自扩展。 该扩展程序已停止为您工作，因为您可能会更改某些设置。

1. 确保您已安装扩展并启用。另外：您正在使用具有正确文件扩展名的文件（尝试：.jsx 和 .tsx）。
2. 如果它们仍然无法工作（我也遇到这种情况），请检查您的设置，因为某些设置可能会干扰，并使扩展程序停止工作。
3. 通过以下方式打开settings.json： CTRL + SHIFT + p ，输入：settings.json，选择：“打开设置（JSON）”
4. 检查settings.json文件中以下设置是否与我的不同：

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

作为一个快速实验，您可以复制整个代码，将其粘贴到 settings.json 的末尾，保存它，重新启动 VSC，然后尝试一下现在代码片段是否正常工作。
如果它解决了您的问题，您可以将命令一一排序，找出导致您问题的原因。

Answer 4

我也经历过同样的事情。您可以尝试卸载然后再次安装扩展

Answer 5

1. 如果您使用与 Rfce.js 相同的文件名，它可能不起作用
2. 确保文件的扩展名是js、ts等，
3. 从 VSCode 扩展卸载并安装 React 代码段可能会起作用。
4. 转到首选项 - 设置 - 扩展 - 搜索 React Snippet 并检查值是否正确签入。

Answer 6

React 代码片段似乎无法正常工作，请尝试手动下载并通过 vss 文件链接安装它，然后从扩展部分中的 Vss 选项安装

Answer 7

我必须卸载我拥有的代码片段扩展：

es6/es7 v2.0.6 的 React-Native/React/Redux 片段，作者：EQuimper

我使用了扩展名： ES7 React/Redux/GraphQL/React-Native 片段 v1.9.3 作者： 罗德里戈瓦拉德斯

Answer 8

启动快速打开：

• Linux：Ctrl+P
• macOS：⌘P
• Windows：Ctrl+P

粘贴以下命令并按 Enter：

ext install dsznajder.es7-react-js-snippets

Answer 9

我认为您不幸卸载了它。

你必须安装。

ES7+ React/Redux/React-Native snippets

在视觉工作室。希望有效果

Answer 10

一旦我通过将 includePackageJsonAutoImports 设置为始终打开来修复本文中的自动导入，我的代码片段就按照我的想法工作了。我以前必须输入“-”才能出现。

Visual Studio Code - 自动导入/快速修复不起作用

Answer 11

1.删除损坏的扩展文件夹

导航到扩展目录： Windows：C:\Users.vscode 扩展 Linux/macOS：~/.vscode/extensions 删除名为 dsznajder.es7-react-js-snippets-4.4.3 的文件夹。

2.重新安装扩展 搜索 ES7+ React/Redux/React-Native 代码片段并安装。