JSX 자동 줄 바꿈

Question

이것은 머리를 쓰고 있습니다! 아래의 행동을 일으키는 원인을 파악하고 빈칸을 계속 찾으려고 2 시간을 소비했습니다.

VSCode로 마이그레이션 중이며 React JSX 구성 요소가 여러 줄로 자동 포장됩니다. 구성 요소가 여러 특성을 가지고 있지만 일부 파일을 매우 길게 만들어서 읽을 수 없게 만들 때 유용합니다.

케이스 인 포인트 - 반응 라우터 경로가 정의 된 파일. 그것들은 모두 작고, 이상적으로, 한 줄에 하나씩 있으면 각 경로를 7 줄마다 정의하는 것이 아니라 앱의 경로를 매우 읽기 쉽게 만들어줍니다. 무엇 VS 코드 자동의

예에 파일을 포맷 :

<Authenticated 
    path="/new" 
    component={NewCorrespondence} 
    {...this.props} 
/> 
<Authenticated 
    path="/inbox" 
    component={Inbox} 
    {...this.props} 
/> 
<Authenticated 
    path="/sent" 
    component={Sent} 
    {...this.props} 
/> 

이

<Authenticated path="/new" component={NewCorrespondence} {...this.props} /> 
<Authenticated path="/inbox" component={Inbox} {...this.props} /> 
<Authenticated path="/sent" component={Sent} {...this.props} /> 

이 처리 VSCode 내에서 설정이 무엇입니까 같이해야합니까? x 문자보다 긴 경우에만이 줄을 감싸도록 구성 할 수 있습니까?

Answer 1

자, 그럼 내 질문에 답하십시오. 더 예쁜 패키지의 printWidth 설정이었습니다. prettierrc 설정 파일은 무시 당하고 있었지만, 너비를 직접 설정하면 VSCode가이를 수정했습니다.

여기에서 문제는 설정 파일을 설정하는 방법입니다 (다른 문제!).