--- source: crates/rome_formatter_test/src/snapshot_builder.rs info: test_file: jsx/attributes.jsx --- # Input ```jsx <CodeEditor value={formatted_code} language={language} placeholder="Rome Output" style={{ fontSize: 12, height: "40vh", overflowY: "scroll", fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", }} />; <CodeEditor value={formatWithPrettier(code, { lineWidth, indentStyle, indentWidth, language: isTypeScript ? "ts" : "js", quoteStyle, })} key={ code + lineWidth + indentStyle + indentWidth + language + quoteStyle } language={language} placeholder="Prettier Output" style={{ fontSize: 12, height: "50vh", overflowY: "scroll", fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", }} />; let a = <test aVeryLongAttributeName={"WithAVeryLongValuethat exceeds the line width, what happens with ithis"} />; <test {...WithAVeryLongFunctionthat_exceeds_the_line_width_what_happens_with_ithis()} />; <div {...["Chungking Express", "Fallen Angels", "In the Mood for Love", "Days of Living Wild", "Happy Together"]}/>; // https://github.com/rome/tools/issues/2944 <div className={asdf asdf} />; <div className={asdf /* comment */ asdf } />; // Wrapping JSX in attribute const a = <Popconfirm title={ ( <span className="popconfirm-test"> Are you sure delete this task? let </span> ) } okText="Yes" cancelText="No" mouseEnterDelay={0} mouseLeaveDelay={0} onVisibleChange={onVisibleChange} > <span>Delete</span> </Popconfirm> ; <OtherComponent value={ new Set(veryLongConditionZzzzzzzzzzzzzzzzzveryLongConditionZzzzzzzzzzzzzzzzzveryLongConditionZzzzzzzzzzzzzzzzz) } /> ``` ============================= # Outputs ## Output 1 ----- Indent style: Tab Line width: 80 Quote style: Double Quotes Quote properties: As needed Trailing comma: All Semicolons: Always ----- ```jsx <CodeEditor value={formatted_code} language={language} placeholder="Rome Output" style={{ fontSize: 12, height: "40vh", overflowY: "scroll", fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", }} />; <CodeEditor value={formatWithPrettier(code, { lineWidth, indentStyle, indentWidth, language: isTypeScript ? "ts" : "js", quoteStyle, })} key={code + lineWidth + indentStyle + indentWidth + language + quoteStyle} language={language} placeholder="Prettier Output" style={{ fontSize: 12, height: "50vh", overflowY: "scroll", fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", }} />; let a = ( <test aVeryLongAttributeName={ "WithAVeryLongValuethat exceeds the line width, what happens with ithis" } /> ); <test {...WithAVeryLongFunctionthat_exceeds_the_line_width_what_happens_with_ithis()} />; <div {...[ "Chungking Express", "Fallen Angels", "In the Mood for Love", "Days of Living Wild", "Happy Together", ]} />; // https://github.com/rome/tools/issues/2944 <div className={asdf asdf} />; <div className={ asdf /* comment */ asdf } />; // Wrapping JSX in attribute const a = ( <Popconfirm title={ <span className="popconfirm-test"> Are you sure delete this task? let </span> } okText="Yes" cancelText="No" mouseEnterDelay={0} mouseLeaveDelay={0} onVisibleChange={onVisibleChange} > <span>Delete</span> </Popconfirm> ); <OtherComponent value={ new Set( veryLongConditionZzzzzzzzzzzzzzzzzveryLongConditionZzzzzzzzzzzzzzzzzveryLongConditionZzzzzzzzzzzzzzzzz, ) } />; ``` ## Unimplemented nodes/tokens " asd" => 1130..1134 "\tasd" => 1182..1186 # Lines exceeding max width of 80 characters ``` 10: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", 30: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", 85: veryLongConditionZzzzzzzzzzzzzzzzzveryLongConditionZzzzzzzzzzzzzzzzzveryLongConditionZzzzzzzzzzzzzzzzz, ```