Як коментувати код JSX у файлах .js у VSCode?


81

На відміну від webstorm, я не можу коментувати код JSX у .jsфайлах коду Visual Studio.


1
Шукаєте ярлик або просто як це зробити?
erichardson30,

@ erichardson30 Я хотів би знати, як це зробити! Ярлик коментує код, виконуючи "//", але, очевидно, це не спрацює. Я хотів би замість цього робити "/ * * /".
YH Eng

Це одна пов'язана: stackoverflow.com/q/49121821/823321
sɐunıɔ ןɐ qɐp

Відповіді:


94

Ви можете прокоментувати JSX від {/ ** /}

Приклад:

render() {
  return (
    <div>
      <Component1 />
      {/* <Component2 /> */}
    </div>
  )
}

і тоді Компонент2 буде закомментований


8
Так, але чи є спосіб зробити це за допомогою ярлика Cmd + / ярлик?
YH Eng

Я шукав навколо і нічого не бачу .... Я дам вам знати, коли
натраплю

1
github.com/Microsoft/vscode/issues/6461 Це те, що мені вдалося знайти щодо проблеми
YH Eng

Так ... здається, це постійне питання?
erichardson30

23

Спробуйте вимкнути всі плагіни, оскільки вони можуть змінити поведінку редактора. Наприклад, якщо використовується плагін Babel ES6 / ES7 , редактор коментує .jsxсинтаксис //замість {/*. Ви бачите проблему тут .


Здається, у мене була ця проблема, коли код коду VS, коментуючи в JSX, застосовувався {/* */}протягом декількох тижнів, але потім він перестав працювати. Я вчора встановив Babel ES6 / ES7, тому просто спробував видалити його, і він не повертається до звичного. Будь-яка допомога?
Джонатан Тузман,



9

Команди клавіатури ...

Ctrl + /- Windows і Linux
Cmd + /- MacOS

... тепер працюйте, як очікувалося, для одного рядка та блочного коду, додаючи {/* */}навколо вибраних рядків.

Це було виправлено в останніх збірках Visual Studio Code від Insiders, і воно потрапить до наступного повного випуску.


Та сама комбінація клавіш працює і в Atom (мабуть, не дивно, оскільки Visual Studio Code & Atom побудовані на електроні).
Greg K

Не вдається змусити його працювати в VS CODE. Чи використовуєте ви якийсь плагін, який допомагає в цьому?
Йорданія

Працює для мене без будь-яких плагінів на останньому загальному випуску VS Code.
GollyJer

4

{/ * це працює, але лише один рядок * /}


4
Ваша відповідь не відрізняється від уже добре позначеної відповіді.
HDJEMAI

2
Багаторядкові коментарі, що використовують цей синтаксис, добре працюють для мене ( {/*лише в першому та */}лише в останньому рядках).
Джон Шнайдер,

1
Безумовно, підтримується багаторядковий коментар
Чарльз Уотсон,

4

У мене була та сама проблема, доки я не перетворив мову файлу на Typescript React (typecriptreact).

Якщо ви хочете налаштувати цю мову як мову для всіх файлів .js, додайте це до свого settings.json (глобально або на рівні проекту в /.vscode/settings.json).

"files.associations": {
    "*.js": "typescriptreact"
  }

3

Якщо ви хочете прокоментувати блок синтаксису JSX, ви можете зробити це так

{
  /* <section>
     <header><h3>Contact Form</h3></header>
     <figure>
       <Form />
     </figure>
   </section> */
}


2

Наразі в коді Visual Studio це можна зробити, натиснувши комбінацію - Shift + Alt + A та прокоментувавши отриманий код - jsx - {/ ** /} коментарі.


2

Якщо натиснути cmd + /за замовчуванням, vs код буде робити однорядкові коментарі, які не можна застосувати для JSX. Просто встановіть нижче розширення коду, і це буде добре.

vscode-language-babel


2

У React "{}" дозволяє нам використовувати вирази JavaScript, тому ми можемо коментувати так, як це робимо в JavaScript.

Приклад:

{/* multi 
line 
comment 
*/}

{// single line comment
}

2

Я витратив кілька годин на цю проблему, і найпростішим рішенням, яке я знайшов, є наступне: Так, проблема виникає з установкою розширення 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"виразі.


1

Для Linux, для одного рядка, використовуйте Ctrl+ /.

А для багаторядкових виділіть фрагменти у VSCode Просто натисніть Ctrl+ Shift+ A.

Це працює. Щасливого кодування


0

=> Щоб прокоментувати вибраний однорядковий або багаторядковий код:

Для машин з ОС Windows або Linux виберіть код і використовуйте:

  1. Ctrl + / отримати шаблон коментаря //
  2. Ctrl + Shift + A отримати шаблон коментаря {/ * * /}

Для машин Mac виберіть код і використовуйте:

  1. Cmd + / отримати шаблон коментаря //
  2. Cmd + Shift + A отримати шаблон коментаря {/ * * /}

=> Для розкоментувати комментируемую рядок (и) коди: Просто повторіть крок, ви використовували для коментування.


0

Я видаляю SUBLIME BABEL JOSH PENG, і це працює

Перед: //

Після:

{/ * * /}

з React JavaScript і це РОБОТА :-)

введіть тут опис зображення


0

Очевидно vs код не робить коментарі автоматично, використовуючи ctrl + /абоcmd + / на jsx, тому нам доводиться писати {/ * текст йде сюди * /} вручну

EDIT: Видаліть розширення Babel із коду vs і коментарі jsx почнуться з ctrl + /абоcmd + /

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.