반응형
VSCode에서 jsx 자동 들여쓰기 방법
VSCode가 Jsx에서 HTML 요소를 자동으로 들여쓰지 않는 것 같으십니까?
그것을 고칠 방법이 없을까?
업데이트:
Atom의 경우:
입력 시<div>
, 원자가 다음을 보여줄 것이다.
내가 누른 후에return
키, 결과는 다음과 같다(커서의 위치에 주의:
VSCode에 있는 동안:
언어 모드를 JavaScript Resact로 변경해 보십시오.
- 명령 팔레트를 여십시오.
- 유형
change language mode
- 누르다
- 유형
javascript react
- 누르다
이 작업이 완료되면 왼쪽 하단 모서리에 자바스크립트 리액션 모드가 나타난다.
해당 모드로 전환되면 문서를 다시 포맷하십시오.
언어를 다음으로 변경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
반응형
'Programing' 카테고리의 다른 글
Vue 중첩 v-for, 상위 인덱스 가져오기 (0) | 2022.03.06 |
---|---|
반응 JS - 검색되지 않은 TypeError: this.props.data.map은 함수가 아님 (0) | 2022.03.06 |
vue 구성 요소에서 양식을 제출할 때 값 라디오 버튼을 얻는 방법 (0) | 2022.03.06 |
객체를 jsx에 소품으로 전달 (0) | 2022.03.05 |
반응에서 clsx를 사용하는 방법 (0) | 2022.03.05 |