jsx 코드 형식이 올바르지 않은 이유는 무엇입니까?

jsx 코드 형식이 올바르지 않은 이유는 무엇입니까?

vscode제가 좋아하는 에디터인데 코드 포맷에 문제가 있어요.여기 제 것이 있습니다.jsx코드:

return <div className={panelHeadingClassName}>
    <h3 className={style.panelTitle}>
        <i className={iconStyle[iconClass]}></i>
        {title}
        <small className={style.panelSubTitle}>{subTitle}</small>
    </h3>
</div>

+ + 를 사용하여 포맷하면 다음과 같이 표시됩니다.

return <div className = {
  panelHeadingClassName
} >
<
h3 className = {
  style.panelTitle
} >
<
i className = {
  iconStyle[iconClass]
} > < /i> {
  title
} <
small className = {
  style.panelSubTitle
} > {
  subTitle
} < /small> <
/h3> <
/div>

분명히, 그것은 옳지 않다.

vscode버전 -v1.10.2코드 포맷 확장을 설치하지 마십시오.

따라서 코드 포맷 확장을 설치하고 싶지 않습니다만, 올바르게 하기 위한 설정이 있습니까?

-- update --

미안해요.내 내 내선번호가 설치되어 있는지 확인합니다.Beautify내선 번호하지만 i가 vscoode 코드 포맷을 사용하는 이유는Beautify?

보시는 바와 같이 아름다운 확장이 이 문제의 근본 원인입니다(이 문제를 참조하십시오).이 확장자는 format 명령을 실행할 때 VSCode가 실행되는 문서 포맷터를 제공합니다.

몇 가지 옵션:

• 확장 사용 안 함
• 를 삭제하여 js 파일에 대해서만 미화를 비활성화합니다.js로부터의 엔트리"beautify.language"설정
• 파일의 언어 모드가 다음과 같은지 확인합니다.javascriptreact이렇게 하면 파일에서 Beautify가 실행되지 않을 수 있습니다.

오른쪽 아래 구석에 있는 언어를 "JavaScript Respect"로 선택합니다.

그리고 더 좋은 방법은 그 이름을js파일링하다jsx.

.js와 .jsx를 모두 사용하고 계신 분은 이렇게 해결하겠습니다.

VSCode의 설정으로 이동하여 settings.json을 검색한 다음 settings.json 파일을 열 수 있습니다.

둘 다 가지고 있는지 확인하다

"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

타이프 스크립트도 마찬가지야 둘 다 가지고 있는지 확인해typescript그리고.typescriptreact상기와 같이 유효하게 합니다.

[예쁘게 설치(설치되지 않은 경우)]를 인스톨 해, 유저 또는 워크스페이스의 설정을 추가합니다.

"prettier.jsxBracketSameLine": true

반환된 JSX 식과 반환된 JSX 식 사이에 줄 바꿈을 넣지 마십시오.자동 포맷(Alt+Shift+F)을 트리거하고 가 작동하는지 확인합니다.

이는 vs 코드가 다음 언어를 인식하기 때문입니다..js파일명을 "JavaScript React"가 아닌 "JavaScript"로 지정하고 beautify는 코드와 비교하여 포맷 방법을 결정하는 언어를 사용합니다.

다른 답변에서 제안했듯이 vs 코드의 오른쪽 아래 구석에 있는 언어를 수동으로 "JavaScript Respect"로 선택하거나 각 파일 확장자의 이름을 다음과 같이 변경할 수 있습니다..jsx하지만 더 쉬운 것은 다음과 같습니다.

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

내 작업공간으로 settings.json파일.

이제 vs 코드가 모든 것을 자동으로 인식합니다..js파일 언어를 작업 공간에서 "JavaScript React"로 지정합니다.

이 파일에 액세스하는 방법을 모를 경우 이 사용자 및 작업영역 설정을 확인하십시오.

편집: 이 기능은 모든 네트워크와.js자바스크립트 리액트

기본 포맷터를 선택해야 합니다.

1. Ctrl+Shift+P(Win) 또는 Cmd+Shift+P(Mac)를 누릅니다.
2. 다음을 사용하여 문서 형식 지정...
3. 그런 다음 기본 포메터 구성...을 클릭합니다.리스트에서 선택합니다.

또는 Beautify 및 해결 방법을 대신 rc-beautify vscode 확장을 사용할 수 있습니다.이를 설치하고 CTRL+B를 눌러 JS, JSX 코드를 포맷합니다.

파일 이름을 쓰지 않았습니다. ".js" 파일인 경우 이름을 ".jsx"로 변경합니다.

포맷을 더 제어하고 싶다면 더 예쁜 것도 가능합니다.
" " 라는 ..prettierrc에 ( pretierrc)를 에 따라 (dot pretierrc).
를 들어, JSON에 다음 합니다..prettierrc 삭제:

{
 "singleQuote": true,
 "trailingComma": "none"
}

언급URL : https://stackoverflow.com/questions/42920590/why-does-jsx-code-formatting-not-correctly