VSCode - 自定义反应片段在 javascriptreact.json 文件和 javascript.json 文件中不起作用

Question

VSCode 版本：

Version: 1.41.1
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T15:04:31.999Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.2.11-050211-generic

• 操作系统版本：Ubuntu 18.04

复制步骤：

1. 我按照官方文档创建了一个新的自定义 sn-p - https://code.visualstudio.com/docs/editor/userdefinedsnippets
2. 打开托盘 > 输入“sn-p” > 选择“配置用户片段” >

然后从选项下拉列表中，为我的 React 文件选择“JavaScript React”，为常规 JS 文件选择“Babel JavaScript”。

3> 现在在 vscode 文件中包含以下我的“react-classnames”sn-p ~/.config/Code/User/sn-ps/javascriptreact.json

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

**但是，禁用所有扩展时不会出现此问题。即当我使用 ** 启动 VS Code 时

code --disable-extensions

下面是我的扩展列表（通过运行$ code --list-extensions 得到它）

2gua.rainbow-brackets
aaron-bond.better-comments
akamud.vscode-javascript-snippet-pack
alefragnani.Bookmarks
alefragnani.numbered-bookmarks
alexeyvax.vscode-open-native-terminal
bierner.markdown-preview-github-styles
chrisdias.vscode-opennewinstance
christian-kohler.npm-intellisense
christian-kohler.path-intellisense
CoenraadS.bracket-pair-colorizer
Compulim.compulim-vscode-closetag
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
DigitalBrainstem.javascript-ejs-support
dzannotti.vscode-babel-coloring
ecmel.vscode-html-css
eg2.tslint
eg2.vscode-npm-script
emilast.LogFileHighlighter
emmanuelbeziat.vscode-great-icons
Equinusocio.vsc-community-material-theme
Equinusocio.vsc-material-theme
equinusocio.vsc-material-theme-icons
eriklynd.json-tools
esbenp.prettier-vscode
fabiospampinato.vscode-open-in-terminal
faceair.ayu-one-dark
fms-cat.theme-monokaisharp
formulahendry.auto-close-tag
formulahendry.auto-complete-tag
formulahendry.auto-rename-tag
formulahendry.code-runner
formulahendry.terminal
gencer.html-slim-scss-css-class-completion
gerane.Theme-Sunburst
ghgofort.neon-vommit
HookyQR.beautify
httpsterio.henna
ivanzusko.theme-jo-light
jasonnutter.search-node-modules
jdinhlife.gruvbox
jolaleye.horizon-theme-vscode
josef.rouge-theme
kamikillerto.vscode-colorize
kube.theme-kay
leizongmin.node-module-intellisense
MaxfieldWalker.vscode-color-theme-spirited-away
mdickin.markdown-shortcuts
mgmcdermott.vscode-language-babel
michelemelluso.code-beautifier
mikestead.dotenv
mohsen1.prettify-json
monokai.theme-monokai-pro-vscode
mrmlnc.vscode-scss
ms-azuretools.vscode-docker
ms-python.python
ms-vscode.node-debug2
ms-vscode.Theme-MaterialKit
msjsdiag.debugger-for-chrome
msjsdiag.vscode-react-native
naumovs.color-highlight
nickdemayo.vscode-json-editor
Nimda.deepdark-material
Nuuf.theme-hackershaze
P-de-Jong.vscode-html-scss
philsinatra.nested-comments
PKief.material-icon-theme
pucelle.vscode-css-navigation
rafamel.subtle-brackets
rsbondi.highlight-words
sburg.vscode-javascript-booster
Shan.code-settings-sync
shardulm94.trailing-spaces
shubham-saudolla.lilac
sibiraj-s.vscode-scss-formatter
sldobri.daily
sleistner.vscode-fileutils
SmukkeKim.theme-setimonokai
sourcegraph.sourcegraph
sourcegraph.vscode-sourcegraph-theme
spywhere.guides
steoates.autoimport
streetsidesoftware.code-spell-checker
teabyii.ayu
trybick.terminal-zoom
ueno.react-native-code-styles
vincaslt.highlight-matching-tag
voldemortensen.rainbow-tags
vscode-icons-team.vscode-icons
wmaurer.change-case
xabikos.JavaScriptSnippets
yzhang.markdown-all-in-one
ZainChen.json

此外，在尝试隔离源时 - 我仅禁用了以下四个与 sn-p 相关的第三方扩展（同时保持其余扩展处于启用状态）

1. ES7 React/Redux/React-Native/JS snippets 2. JavaScript (ES6) snippets 3. HTML Snippets 4. JavaScript Snippet Pack

但问题仍然存在（即禁用了以上 4 个扩展）。

我还彻底清除并在我的机器上重新安装了 VS Code，问题仍然存在。

Answer 1

回答我自己的问题，最终得到 VS Codes 的解决方案，非常有帮助，很棒的团队 (https://github.com/microsoft/vscode/issues/88936)

这就是如何更接近问题的根源——在 React Component.js 文件中，当我键入 sn-p（在本例中为“clmi”）时出现这种奇怪的行为——在 React 组件文件返回之前() 声明，我得到了预期的行为。 但是如果我在 return() 语句中键入 sn-p ('clmi')，我什么也得不到。即 sn-p 没有在 return () 语句中给我代码完成选项。

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

解决方法如下

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

我得到的是自爆。

如您所见，这不是 JavaScript 也不是 JavaScript React 而是 jsx-attr 语言。所以现在我必须使用 vscode sn-p 来定位该类型

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

现在自定义的 sn-ps 可以正常工作了。