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

OS版本：Ubuntu18.04

重现步骤：

我按照官方文档创建了一个新的自定义片段 - https://code.visualstudio.com/docs/editor/userdefinedsnippets
打开调色板 > 输入“片段”> Select“配置用户片段”>

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

3> 现在在 vscode 文件中包含我的 "react-classnames" 代码段的以下内容 ~/.config/Code/User/snippets/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

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

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 文件中出现这种奇怪的行为，当我键入代码段时（'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

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

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

VSCode - Custom react snippets not working in javascriptreact.json file and also javascript.json file

visual-studio-code

vscode-settings