ProgramingTip

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

bestdevel 2020. 11. 14. 10:55
반응형

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


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


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

예 :

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

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


편집기의 동작을 활용하십시오. 예를 들어 사용하는 경우 바벨 ES6 / ES7의 플러그인, 기사 .jsx에 의해 구문 //대신 {/*. 여기 에서 문제를 볼 수 있습니다 .


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

{/* Your Code */}

감사합니다.


키보드 명령 ...

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

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

수정되었습니다

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


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


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"코드 {/ ** /} 주석을 실행할 수 있습니다.


React에서 "{}"를 사용하면 JavaScript에서 사용할 수 있으므로 JavaScript에서 사용하는 방식으로 주석을 달 수 있습니다.

예 :

{/* multi 
line 
comment 
*/}

{// single line comment
}

파일 언어를 Typescript React (typescriptreact)로 변환 할 때까지 동일한 문제가 발생했습니다.

모든 .js 파일의 언어로 구성 비용 설정 settings.json (전역 적으로 또는 /.vscode/settings.json의 프로젝트 수준에서)에 추가합니다.

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

cmd + /기본적으로 를 누르면 vs 코드는 JSX에 적용 할 수없는 한 줄 주석을 수행합니다. 아래 대 코드 확장을 설치하면 괜찮을 것입니다.

vscode-language-babel


Windows의 경우 :

선택한 줄에 주석 달기

편집> 줄 주석 전환 Ctrl + /또는 //줄 앞에 추가

산출: //Some Lines of Code here

선택한 블록에 주석 달기 :

편집> 블록 주석 토글 또는 Shift + Alt + A

출력 : /*Some Code here*/

주석 해제에 대해 동일한 작업 수행

참고 URL : https://stackoverflow.com/questions/38483225/how-to-comment-jsx-code-out-in-js-files-in-vscode

반응형