Как прокомментировать код JSX в файлах .js в VSCode?

В отличие от webstorm, я не могу комментировать JSX-код в .jsфайлах в Visual Studio Code.

Вы можете закомментировать JSX до {/ ** /}

Пример :

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

а затем Component2 будет закомментирован

Попробуйте отключить все плагины, потому что они могут изменить поведение редактора. Например, если вы используете плагин Babel ES6 / ES7 , .jsxсинтаксис комментариев редактора //вместо {/*. Вы видите здесь проблему .

Искать Babel JavaScriptв VS Code:

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

Установите и command + /закомментируйте jsx с помощью{ /* */ }

В Visual Studio codeHit, Cmd + /если вы работаете на Mac или размещаете

{/* Your Code */}

Спасибо.

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

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

... теперь работают должным образом для однострочного и блочного кода, добавляя {/* */}вокруг выбранных строк.

Он был исправлен в последних сборках Visual Studio Code для инсайдеров и войдет в следующий полный выпуск.

{/ * это работает, но только в одну строку * /}

У меня была такая же проблема, пока я не преобразовал язык файлов в Typescript React (typescriptreact).

Если вы хотите настроить это как язык для всех файлов .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 (File / Preferences / Keyboard Shortcuts (или Ctrl + K + S), а затем щелкните маленький значок файла в правом верхнем углу для выбора Open Keyboard Shortcuts, который открывает 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 # идентификаторы-неизвестного-языка И, конечно, если вам нужно другое поведение сниппета: просто замените в {/*выражении на то, что вы хотите "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 code не делает комментарии автоматически с использованием ctrl + /или cmd + /на jsx, поэтому нам нужно писать {/ * текст здесь * /} вручную

РЕДАКТИРОВАТЬ: удалите расширение Babel из кода vs, и комментарии jsx начнутся ctrl + /илиcmd + /