Add option for parentheses around JSX.
Problem
I think prettier should have an option ~for TypeScript~ to omit JSX parentheses. Instead of this: [code block] Expected behavior: [code block]
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Implement JSX Parentheses Omission Option in Prettier
Prettier currently formats JSX expressions with parentheses to ensure clarity and avoid ambiguity in the syntax. However, this can lead to unnecessary parentheses in certain cases, especially when the JSX is simple or when it is wrapped in a single expression. The lack of an option to omit these parentheses can be seen as a limitation for developers who prefer a cleaner syntax.
Awaiting Verification
Be the first to verify this fix
- 1
Add Configuration Option
Modify the Prettier configuration schema to include a new option 'jsxParentheses' that allows users to specify whether they want parentheses around JSX expressions.
javascriptmodule.exports = { jsxParentheses: true // default value }; - 2
Update Formatting Logic
In the Prettier formatting logic, check the value of the 'jsxParentheses' option. If it is set to false, modify the output to omit parentheses around JSX expressions where applicable.
javascriptif (!options.jsxParentheses) { // logic to omit parentheses } - 3
Add Tests for New Option
Create unit tests to ensure that the new 'jsxParentheses' option works correctly. Test both scenarios: with and without parentheses around JSX expressions.
javascripttest('omits parentheses when jsxParentheses is false', () => { const result = prettier.format('<Component />', { jsxParentheses: false }); expect(result).toBe('<Component />'); }); - 4
Update Documentation
Update the Prettier documentation to include the new 'jsxParentheses' option, explaining its purpose and how to use it in configuration files.
markdown### jsxParentheses - Type: `boolean` - Default: `true` - Description: If set to `false`, Prettier will omit parentheses around JSX expressions.
Validation
To confirm the fix worked, configure Prettier with 'jsxParentheses: false' and format a JSX file. Check that the output does not include unnecessary parentheses around JSX expressions. Run the unit tests created in step 3 to ensure all scenarios are covered.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep