Jak komentować kod JSX w plikach .js w VSCode?

W przeciwieństwie do burzy internetowej, nie mogę komentować kodu JSX w .jsplikach w Visual Studio Code.

Możesz skomentować JSX przez {/ ** /}

Przykład:

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

a następnie Component2 zostanie zakomentowany

Spróbuj wyłączyć wszystkie wtyczki, ponieważ mogą one zmienić zachowanie edytora. Na przykład, jeśli używasz wtyczki Babel ES6 / ES7 , .jsxskładnia komentarzy edytora przez //zamiast {/*. Widzisz problem tutaj .

Szukaj Babel JavaScriptw kodzie VS:

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

Zainstaluj i command + /skomentuje jsx z{ /* */ }

W Visual Studio codeHit, Cmd + /jeśli korzystasz z komputera Mac lub Place

{/* Your Code */}

Dziękuję Ci.

Polecenia klawiaturowe ...

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

... teraz działa zgodnie z oczekiwaniami dla kodu pojedynczego i blokowego, dodając {/* */}wokół wybranych wierszy.

Zostało to naprawione w najnowszych kompilacjach programu Visual Studio Code dla niejawnych testerów i trafi do następnej pełnej wersji.

{/ * to działa, ale tylko w jednej linii * /}

Miałem ten sam problem, dopóki nie przekonwertowałem języka pliku na Typescript React (Typescriptreact).

Jeśli chcesz skonfigurować ten język jako język dla wszystkich plików .js, dodaj go do swojego settings.json (globalnie lub na poziomie projektu w /.vscode/settings.json).

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

Jeśli chcesz skomentować blok składni JSX, możesz to zrobić

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

To też działa

{
  //this.props.user.profileImage
  //? <img
  //    src={ this.props.user.profileImage }!
  //    alt=""
  //  />
  //: <FontAwesome name='smile-o' />
}

Obecnie w kodzie Visual Studio można to zrobić, naciskając kombinację - Shift + Alt + A i komentując kod „jsx”, który generuje - {/ ** /} komentarze.

Jeśli wciśniemy cmd + /domyślnie, vs code zrobi jednowierszowe komentarze, których nie można zastosować do JSX. Wystarczy zainstalować poniższe rozszerzenie vs code, będzie dobrze.

vscode-language-babel

W Reakcie „{}” pozwala nam używać wyrażeń JavaScript, dzięki czemu możemy komentować tak, jak robimy to w JavaScript.

Przykład:

{/* multi 
line 
comment 
*/}

{// single line comment
}

Spędziłem kilka godzin nad tym problemem, a najłatwiejsze rozwiązanie, które znalazłem, jest następujące: Tak, problem pojawia się podczas instalacji rozszerzenia Babel ES6 / ES7, jak wielu zauważyło, a po odinstalowaniu lub dezaktywacji VScode odzyskuje normalne zachowanie: Ctrl + / => Przełącz komentarz linii dla linii lub bloku wybranych //za pomocą dla plików JS, JSX, ...; Shift + Alt + A => Przełącz komentarz blokowy dla linii lub bloku zaznaczonego między <!-- --> w plikach HTML, między /* */w wyrażeniach JS i między{/* */}w plikach JSX dla znaczników w renderowaniu / powrocie ... Więc jeśli chcesz, aby rozszerzenie Babel ES6 / ES7 było aktywne i nadal mieć takie zachowanie: Możesz sparametryzować własną kombinację klawiszy skrótu i ​​przypisań w pliku keybindings.json (Plik / Preferences / Keyboard Shortcuts (lub Ctrl + K + S), a następnie kliknij małą ikonę pliku w prawym górnym rogu, aby wybrać Otwórz skróty klawiaturowe, które otwierają keybindings.json), gdzie używasz wbudowanego polecenia VScode „editor.action.insertSnippet” w następujący sposób:

[
    {
    "key": "shift+alt+a",
    "command": "editor.action.insertSnippet",
    "args": {
        "snippet": "{/*\n ${TM_SELECTED_TEXT} \n*/}$0"
    },
    "when": "editorLangId == 'javascript' && editorTextFocus && !editorReadonly"
    }
]

Umieść żądane miejsce /nw wyrażeniu do przerywania linii i w $0celu ostatecznego umieszczenia kursora. Następnie zapisz i działa prosto :) tylko w plikach JS i JSX Jeśli chcesz określić inny język, po prostu zastąp 'javascript'w "when"wyrażeniu tym, który chcesz z listy Identyfikatorów języków VScode: https://code.visualstudio.com/docs / Languages ​​/ identifiers # _known-language-identifiers I oczywiście, jeśli chcesz zachować inne zachowanie fragmentu: po prostu zastąp {/*go tym, co chcesz w "args"wyrażeniu.

W systemie Linux dla jednej linii użyj Ctrl+ /.

W przypadku multilinii wybierz fragmenty w VSCode Po prostu naciśnij Ctrl+ Shift+ A.

To działa. Miłego kodowania

=> Aby skomentować wybraną pojedynczą linię lub wiele linii kodu:

W przypadku komputera z systemem Windows lub Linux wybierz kod i użyj:

1. Ctrl + / aby uzyskać wzór komentarza //
2. Ctrl + Shift + A aby uzyskać wzór komentarza {/ * * /}

W przypadku komputera Mac wybierz kod i użyj:

1. Cmd + / aby uzyskać wzór komentarza //
2. Cmd + Shift + A aby uzyskać wzór komentarza {/ * * /}

=> Aby odkomentować skomentowaną linię (y) kodu: Po prostu powtórz krok, który użyłeś do komentowania.

Odinstalowuję SUBLIME BABEL JOSH PENG i działa

Być dla: //

Po:

{/ * * /}

z React JavaScript i działa :-)

Najwyraźniej kod vs kod nie tworzy komentarzy automatycznie przy użyciu ctrl + /lub cmd + /na jsx, więc musimy napisać {/ * tekst jest tutaj * /} ręcznie

EDYCJA: Odinstaluj rozszerzenie Babel z vs code, a komentarze jsx zaczną się w dniu ctrl + /lubcmd + /