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

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

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

Приклад:

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

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

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

Шукати Babel JavaScriptу коді VS:

https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel

Встановіть і command + /прокоментуйте jsx за допомогою{ /* */ }

У Visual Studio codeHit, Cmd + /якщо ви працюєте на mac або place

{/* Your Code */}

Дякую.

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

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' />
}

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

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

vscode-language-babel

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

Приклад:

{/* multi 
line 
comment 
*/}

{// single line comment
}

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

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

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

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

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

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

Перед: //

Після:

{/ * * /}

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

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

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