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. Я выполнил официальную команду c для создания нового фрагмента customim - https://code.visualstudio.com/docs/editor/userdefinedsnippets
2. Открыть палитру> Введите 'snippet'> Выбрать "Настроить фрагменты пользователя">

Затем из списка параметров doropdown выберите «JavaScript React» для моих файлов React и «Babel JavaScript» для обычных JS файлов.

3> Теперь добавлено следующее для моего фрагмента "имя-класса-реактива" в файле vscode ~ / .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 расширениями).

Я также полностью очистил и выполнил бесплатную sh установку VS Code на мою машину, и проблема продолжилась как есть.

Answer 1

Отвечая на мой собственный вопрос, как, наконец, добрались до решения от VS Codes, очень полезная и отличная команда (https://github.com/microsoft/vscode/issues/88936)

И вот как все ближе к источнику проблемы - получил это странное поведение в файле React Component. js, когда я набираю фрагмент (в данном случае 'clmi') - перед оператором return () файла компонента React я получаю ожидаемое поведение , Но если я наберу фрагмент ('clmi') внутри оператора return (), я ничего не получу. т. е. фрагмент не дает мне опции завершения кода внутри оператора return ().

Источником было то, что VSCode не распознал этот файл как тип языка "javascriptreact".

Решение было таким, как показано ниже

В файле React Component. js, попробуйте инспектор токенов через «F1> Inspeme TM Scopes» и поместите курсор в позицию вставки. Это скажет вам обнаруженный, встроенный язык. В зависимости от вашей грамматики это может быть другой язык

И вот, что я получаю, это плохо.

Итак, как вы можете видеть, это не JavaScript или JavaScript Реакция , но jsx- attr язык. Итак, теперь мне нужно было настроить таргетинг на этот тип с помощью фрагмента vscode

Итак, теперь я поместил весь фрагмент в целевой файл типа jsx-attr ~/.config/Code/User/snippets/jsx-attr.json

И теперь пользовательские фрагменты работали, как и ожидалось. .