Programing

VSCode에서 jsx 자동 들여쓰기 방법

c10106 2022. 3. 6. 10:43
반응형

VSCode에서 jsx 자동 들여쓰기 방법

VSCode가 Jsx에서 HTML 요소를 자동으로 들여쓰지 않는 것 같으십니까?

여기에 이미지 설명을 입력하십시오.

그것을 고칠 방법이 없을까?


업데이트:

Atom의 경우:

입력 시<div>, 원자가 다음을 보여줄 것이다.

내가 누른 후에return키, 결과는 다음과 같다(커서의 위치에 주의:여기에 이미지 설명을 입력하십시오.

VSCode에 있는 동안:

여기에 이미지 설명을 입력하십시오.

여기에 이미지 설명을 입력하십시오.

언어 모드를 JavaScript Resact로 변경해 보십시오.

  1. 명령 팔레트를 여십시오.
  2. 유형change language mode
  3. 누르다
  4. 유형javascript react
  5. 누르다

이 작업이 완료되면 왼쪽 하단 모서리에 자바스크립트 리액션 모드가 나타난다.

JavaScript 대응 모드 확인

해당 모드로 전환되면 문서를 다시 포맷하십시오.

언어를 다음으로 변경Javascript React다음 명령을 사용하십시오.

alt + shift + f

Esben Petersen의 "Prettier - 코드 포맷터" 확장자를 사용하십시오.파일이 jsx 파일이라고 가정할 때 저장 시 자동 포맷된다.

1. 사용자 설정 추가 위치

"files.associations": {
    "*.js": "javascriptreact"
},

2. 플러그인 설치

Auto Install Tag

그리고 다시 로드.그것은 너의 문제를 해결할 것이다.

BTW, 지금 벌레가 있는 것 같아.부품 소품이 없으면 자동 들여쓰기가 잘 되지만, 소품만 있으면 지금은 안 된다.

<Component>Enter

===>

<Component>
    :
</Component> 

그렇지만

<Component someProps={10}}Enter

===>

<Component someProps={10}>
:</Component>

이것을 고칠 수 있는 사람은 나를 도와줘 :) 나는 맥에서 사용하고 있다.

참조URL: https://stackoverflow.com/questions/40498622/how-to-auto-indent-jsx-in-vscode

반응형