ternary expression formatting raises an error in standard

[yanovich]

160   const paginator =
161     pageCount > 1 ? (
162       <div className='pagination'>
163         <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
164           {'<<'}
165         </button>{' '}
166         <button onClick={() => previousPage()} disabled={!canPreviousPage}>
167           {'<'}
168         </button>{' '}
169         <button onClick={() => nextPage()} disabled={!canNextPage}>
170           {'>'}
171         </button>{' '}
172         <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
173           {'>>'}
174         </button>{' '}
175         <span>
176           Page{' '}
177           <strong>
178             {pageIndex + 1} of {pageOptions.length}
179           </strong>{' '}
180         </span>
181         <span>
182           | Go to page:{' '}
183           <input
184             type='number'
185             defaultValue={pageIndex + 1}
186             onChange={e => {
187               const page = e.target.value ? Number(e.target.value) - 1 : 0
188               gotoPage(page)
189             }}
190             style={{ width: '100px' }}
191           />
192         </span>{' '}
193         <select
194           value={pageSize}
195           onChange={e => {
196             setPageSize(Number(e.target.value))
197           }}
198         >
199           {[10, 20, 30].map(pageSize => (
200             <option key={pageSize} value={pageSize}>
201               Show {pageSize}
202             </option>
203           ))}
204         </select>
205       </div>
206     ) : null

InstanceScreen.js:161:5: Expected newline between test and consequent of ternary expression.
InstanceScreen.js:161:21: Expected newline between consequent and alternate of ternary expression.

[louis-md]

+1

Hi! Having the same issue. This is somewhat related to https://github.com/sheerun/prettier-standard/issues/76, as it relates to ternary formatting, but does not imply that the ternary is nested into another.

In other terms: in JSX expressions, formatting multiline ternaries will fire the errors mentioned. For example, such a multiline ternary expression will be formatted as :

    <div>
      {condition ? (
        <div>
          This is a multiline div that will cause the formatter to wrongly
          format the ternary expression
        </div>
      ) : (
        "this one line string could be on the same line than ':', without parentheses"
      )}
    </div>

Whereas it should be formatted like this to be valid according to standard:

    <div>
      {condition
        ? (
          <div>
            This is a multiline string that will cause the formatter to wrongly
            format the ternary expression
          </div>
          )
        : (
            "this one line string could also be on the same line than ':', without parentheses"
          )}
    </div>

Note: I am also using the prettier-standard extension for vscode, which may be interfering with this.

Anyhow, thanks for this great package!

Louis

[sophia-ma]

+1

I am having the same issue as well and I can't use the package because of this, as it is interfering with the standard linter.