Sublime 3의 JsPrettier는 작은 따옴표를 사용하지 않습니다. className

Question

Javascript 및 JSX 코드의 형식을 지정하려면 JSPrettier와 함께 Sublime Text 3을 사용하고 있습니다.

나는 내 JSPrettier 구성에서 설정 한 다음 한 :

에도 그와

// If true, will use single instead of double quotes 
"singleQuote": true 

, 여전히 같은 클래스 이름 및 기타 JSX 속성에 따옴표를 넣어 주장 JSPrettier 코드 포맷 할 때 :

<div className="uxm-details-header-buttons"> 

을

또는

<Icon name="refresh" /> 

정말 기대 모든 작은 따옴표로 특별한 경우를 위해 이중 따옴표를 유지합니다.

해결 방법에 대한 힌트가 있습니까?

Answer 1

현재로서는 더 예쁘지 않습니다. Quotes in JSX will always be double and prettier will ignore this setting.

이 결정의 동기를 이해하려면 GitHub thread을 읽어보십시오. JSX 따옴표를 두 배로 유지하는 논쟁 요지는 커뮤니티 전체에 스타일을 적용하는 것이고 더 적은 수의 구성 옵션이 더 좋습니다.

해결 방법에 대한 힌트가 있습니까?

prettier-eslint을 통해 코드를 실행할 수 있습니다. 이렇게하면 코드를 더 예쁘게 형식화 한 다음 그 결과를 eslint --fix으로 전달합니다. 이 방법을 사용하면 뛰어난 스타일링 기능의 장점을 얻을 수 있지만 eslint의 구성 기능을 활용할 수도 있습니다.