自定义反应代码片段在 javascriptreact.json 文件中的 vscode 中不起作用

Question

我想在 VSCode 中添加一些自定义 React.js 代码片段。我意识到 VSCode 中有两个文件用于此目的。 javascript.json 和 javascriptreact.json。 javascript.json 工作正常但是当我将片段移动到 javascriptreact.json, VSCode不认识他们。

如果我能在 javacriptreact.json 文件中隔离这些片段，那就太好了，因为我也在服务器端编写 JavaScript.

我猜 VSCode 没有将该应用程序识别为 React 应用程序。有办法解决这个问题吗？

Answer 1

保存文件 with.jsx 扩展名而不是 .js。即您在 javascript.json 中看到的代码片段是因为您正在编辑 .js 文件

Answer 2

我最近在 Ubuntu 18.04 中遇到了这个问题，在 vscode 文件中包含了我的 "react-classnames" 片段的以下代码之后（当我在 vscode 的 React 文件中输入时，没有给我预期的结果）

~/.config/Code/User/snippets/javascriptreact.json

  "react-classnames": {
    "prefix": "clmi",
    "body": [
      "className={classes.}"
    ],
    "description": "react-classname"
  },

因此，当我在 React 组件 .js 文件中键入代码片段（在本例中为 'clmi'）时 - 在 React 组件文件的 return() 语句之前，我得到了预期的行为。但是，如果我在 return() 语句中键入代码段 ('clmi')，我什么也得不到。即代码片段没有给我 return () 语句中的代码完成选项。

来源是 VSCode 没有将此文件识别为 "javascriptreact" 语言类型。

解决方法如下

在 React Component 的 .js 文件中，通过 "F1 > Inspect TM Scopes" 尝试令牌检查器并将光标定位在那些插入位置。这将告诉您检测到的嵌入式语言。根据您的语法，它可能是一种不同的语言

吹嘘是我得到的。

正如您所见，这不是 JavaScript 也不是 JavaScript React 而是 jsx-attr 语言。所以现在我必须使用 vscode snippet

来定位该类型

所以现在，我将整个片段放在 jsx-attr 类型的目标文件中 ~/.config/Code/User/snippets/jsx-attr.json

现在自定义代码段按预期工作。

Answer 3

当我将反应片段添加到 jsx.json 文件时，配置有效。添加到 js.json.

时不起作用

这有效： ~/.config/Code/User/snippets/jsx.json

这没有用： ~/.config/Code/User/snippets/js.json

自定义反应代码片段在 javascriptreact.json 文件中的 vscode 中不起作用

Custom react code snippets not working in vscode in javascriptreact.json file

javascript

json

code-snippets

reactjs

visual-studio-code