VSCode의 .js 파일에서 JSX 코드를 주석 처리하는 방법은 무엇입니까?

Webstorm과 달리 .jsVisual Studio Code의 파일에서 JSX 코드를 주석 처리 할 수 ​​없습니다 .

{/ ** /}로 JSX를 주석 처리 할 수 ​​있습니다.

예 :

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

그런 다음 Component2는 주석 처리됩니다.

편집기의 동작을 변경할 수 있으므로 모든 플러그인을 비활성화하십시오. 예를 들어 사용하는 경우 바벨 ES6 / ES7의 플러그인, 에디터 코멘트 .jsx에 의해 구문 //대신 {/*. 여기 에서 문제를 볼 수 있습니다 .

Babel JavaScriptVS 코드에서 검색 :

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

command + /jsx를 설치하고 주석을 달 것입니다.{ /* */ }

에서 Visual Studio code히트 Cmd + /당신은 Mac 또는 장소에서 실행하는 경우

{/* Your Code */}

감사합니다.

키보드 명령 ...

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

... 이제 {/* */}선택한 줄 주위 에 추가하여 단일 줄 및 블록 코드에 대해 예상대로 작동 합니다.

이 수정되었습니다 최근에 비주얼 스튜디오 코드 빌드 내부자 및 다음 전체 버전에 그것을 만들 것입니다.

{/ * 작동하지만 한 줄만 * /}

파일 언어를 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 파일에서 고유 한 바로 가기 키 바인딩 조합을 매개 변수화 할 수 있습니다. / Preferences / Keyboard Shortcuts (또는 Ctrl + K + S)를 누른 다음 오른쪽 상단의 작은 파일 아이콘을 클릭하여 Open Keyboard Shortcuts wich opens 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.

효과가있다. 해피 코딩

=> 선택한 한 줄 또는 여러 줄에 주석 달기 의 코드에 :

들어 윈도우 또는 리눅스 컴퓨터 코드와 사용을 선택합니다 :

1. Ctrl + / 주석 패턴을 얻으려면 //
2. Ctrl + Shift + A 주석 패턴을 얻으려면 {/ * * /}

들어 맥 컴퓨터 코드와 사용을 선택합니다 :

1. Cmd + / 주석 패턴을 얻으려면 //
2. Cmd + Shift + A 주석 패턴을 얻으려면 {/ * * /}

=> 주석 처리 된 코드 줄의 주석 처리 를 제거 하려면 : 주석 처리에 사용한 단계를 반복하십시오.

SUBLIME BABEL JOSH PENG를 제거하면 작동합니다.

Befor : //

후:

{/ * * /}

React JavaScript와 함께 작동합니다 :-)

코드를 사용하여 자동으로 의견을하지 않는 분명히 대 ctrl + /또는 cmd + /우리가 쓰기에 그래서 jsx에 수동으로 {/ * 텍스트 * / 간다}

편집 : 제거 바벨 코드 대에서 확장하고 jsx 코멘트에 시작됩니다 ctrl + /또는cmd + /