Provide way to use single quotes in jsx
Problem
I read this comment saying that "I've never seen anyone write `<div className='a' />`". Well, here's someone 👋 The same way `trailingComma` accepts a string, we could let `singleQuote` do as well. - `'all'` would use single quotes in js as well as jsx - `'js'` (or `true`) would use single quotes in js but not in jsx - `'jsx'` would use single quotes in jsx but not in js
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Enhance Prettier to Support Single Quotes in JSX
Prettier currently does not allow for flexible single quote usage in JSX, limiting developers' ability to maintain consistent styling preferences across JavaScript and JSX files. The lack of an option to specify single quote usage separately for JSX leads to confusion and inconsistency in code formatting.
Awaiting Verification
Be the first to verify this fix
- 1
Modify Prettier Configuration
Update the Prettier configuration to accept a new option for single quotes. This option should allow users to specify their preference for single quotes in either JavaScript, JSX, or both.
javascriptmodule.exports = { singleQuote: 'jsx', // Use single quotes in JSX but not in JS }; - 2
Implement Logic for Single Quote Handling
In the Prettier codebase, implement the logic to handle the new singleQuote option. Ensure that the formatting respects the specified option when parsing JSX files.
javascript// Example logic to handle singleQuote option if (options.singleQuote === 'jsx') { // Apply single quotes in JSX } - 3
Update Documentation
Revise the Prettier documentation to include the new singleQuote option. Provide examples for each possible value: 'all', 'js', 'jsx'.
markdown### singleQuote - 'all': Use single quotes in both JS and JSX. - 'js': Use single quotes in JS only. - 'jsx': Use single quotes in JSX only. - 4
Run Tests to Validate Changes
Execute the existing test suite and add new tests to cover the scenarios for the new singleQuote option. Ensure that all tests pass to confirm the implementation works as intended.
javascripttest('should format JSX with single quotes', () => { const input = '<div className="a" />'; const output = '<div className='a' />'; expect(prettier.format(input, { singleQuote: 'jsx' })).toBe(output); });
Validation
To confirm the fix worked, run Prettier on a sample JSX file with the new configuration. Verify that single quotes are applied correctly based on the specified singleQuote option. Additionally, check the documentation for accuracy.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep