VSCode - пользовательские фрагменты реакции не работают в файле javascriptreact.json, а также в файле javascript.json

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

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

3> Теперь я включил приведенный ниже фрагмент кода "response-classnames" в файл 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 расширениями).

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


person Rohan_Paul    schedule 19.01.2020    source источник


Ответы (1)


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

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

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

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

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

И вот что я получаю. введите описание изображения здесь

Как видите, это не JavaScript или JavaScript React, а язык jsx-attr. Итак, теперь мне пришлось настроить таргетинг на этот тип с помощью фрагмента vscode

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

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

person Rohan_Paul    schedule 23.01.2020
comment
Не знал о целевой природе сниппетов. Спасибо. Теперь я понимаю, почему мои фрагменты тоже не работают! - person Somjit; 02.06.2020
comment
У меня была именно эта проблема, но другое решение. В моих фрагментах у меня не было «javascriptreact» в качестве свойства scope - только «Печать на консоли: {scope: javascript, typescriptreact, ´ - person Mr. Robot; 23.06.2021