На відміну від webstorm, я не можу коментувати код JSX у .js
файлах коду Visual Studio.
На відміну від webstorm, я не можу коментувати код JSX у .js
файлах коду Visual Studio.
Відповіді:
Ви можете прокоментувати JSX від {/ ** /}
Приклад:
render() {
return (
<div>
<Component1 />
{/* <Component2 /> */}
</div>
)
}
і тоді Компонент2 буде закомментований
Спробуйте вимкнути всі плагіни, оскільки вони можуть змінити поведінку редактора. Наприклад, якщо використовується плагін Babel ES6 / ES7 , редактор коментує .jsx
синтаксис //
замість {/*
. Ви бачите проблему тут .
{/* */}
протягом декількох тижнів, але потім він перестав працювати. Я вчора встановив Babel ES6 / ES7, тому просто спробував видалити його, і він не повертається до звичного. Будь-яка допомога?
Шукати Babel JavaScript
у коді VS:
https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
Встановіть і command + /
прокоментуйте jsx за допомогою{ /* */ }
Команди клавіатури ...
Ctrl + /
- Windows і Linux
Cmd + /
- MacOS
... тепер працюйте, як очікувалося, для одного рядка та блочного коду, додаючи {/* */}
навколо вибраних рядків.
Це було виправлено в останніх збірках Visual Studio Code від Insiders, і воно потрапить до наступного повного випуску.
{/ * це працює, але лише один рядок * /}
{/*
лише в першому та */}
лише в останньому рядках).
У мене була та сама проблема, доки я не перетворив мову файлу на Typescript React (typecriptreact).
Якщо ви хочете налаштувати цю мову як мову для всіх файлів .js, додайте це до свого settings.json (глобально або на рівні проекту в /.vscode/settings.json).
"files.associations": {
"*.js": "typescriptreact"
}
Якщо ви хочете прокоментувати блок синтаксису JSX, ви можете зробити це так
{
/* <section>
<header><h3>Contact Form</h3></header>
<figure>
<Form />
</figure>
</section> */
}
Це також працює
{
//this.props.user.profileImage
//? <img
// src={ this.props.user.profileImage }!
// alt=""
// />
//: <FontAwesome name='smile-o' />
}
Якщо натиснути cmd + /
за замовчуванням, vs код буде робити однорядкові коментарі, які не можна застосувати для JSX. Просто встановіть нижче розширення коду, і це буде добре.
Я витратив кілька годин на цю проблему, і найпростішим рішенням, яке я знайшов, є наступне: Так, проблема виникає з установкою розширення Babel ES6 / ES7, як багато хто помічав, і коли ви видаляєте або деактивуєте, VScode отримує це нормальна поведінка: Ctrl + / => Переключити коментар до рядка або рядка, вибраного //
за допомогою файлів JS, JSX, ...; Shift + Alt + A => Включити блокувати коментар для рядка чи блоку, вибраного між <!--
-->
файлами HTML, між /*
*/
виразами JS та між{/*
*/}
у файлах JSX для тегів розмітки в рендерінгу / поверненні ... Отже, якщо ви хочете зберегти розширення Babel ES6 / ES7 активним і все ще мати таку поведінку: Ви можете параметризувати власну комбінацію прив'язок ярликів у файлі keybindings.json (Файл / Налаштування / Комбінації клавіш (або Ctrl + K + S), а потім клацніть маленький значок файлу вгорі праворуч для вибору Відкрити комбінації клавіш, що відкриває keybindings.json), де ви використовуєте вбудовану команду VScode "editor.action.insertSnippet" наступним чином:
[
{
"key": "shift+alt+a",
"command": "editor.action.insertSnippet",
"args": {
"snippet": "{/*\n ${TM_SELECTED_TEXT} \n*/}$0"
},
"when": "editorLangId == 'javascript' && editorTextFocus && !editorReadonly"
}
]
Розмістіть /n
потрібне місце у виразі для розриву рядків, а в $0
кінцевому розташуванні курсору. Потім збережіть, і це працює прямо :) лише у файлах JS та JSX. Якщо ви хочете вказати іншу мову, просто замініть 'javascript'
у "when"
виразі на потрібний із цього списку ідентифікаторів мови VScode:
https://code.visualstudio.com/docs / languages / identifiers # _known-language-identifiers
І звичайно, якщо вам потрібна інша поведінка фрагмента: просто замініть те {/*
, що ви хочете у "args"
виразі.
Для Linux, для одного рядка, використовуйте Ctrl+ /.
А для багаторядкових виділіть фрагменти у VSCode Просто натисніть Ctrl+ Shift+ A.
Це працює. Щасливого кодування
=> Щоб прокоментувати вибраний однорядковий або багаторядковий код:
Для машин з ОС Windows або Linux виберіть код і використовуйте:
Ctrl + /
отримати шаблон коментаря //Ctrl + Shift + A
отримати шаблон коментаря {/ * * /}Для машин Mac виберіть код і використовуйте:
Cmd + /
отримати шаблон коментаря //Cmd + Shift + A
отримати шаблон коментаря {/ * * /}=> Для розкоментувати комментируемую рядок (и) коди: Просто повторіть крок, ви використовували для коментування.
Очевидно vs код не робить коментарі автоматично, використовуючи ctrl + /
абоcmd + /
на jsx, тому нам доводиться писати {/ * текст йде сюди * /} вручну
EDIT: Видаліть розширення Babel із коду vs і коментарі jsx почнуться з ctrl + /
абоcmd + /