Break on multiple chained calls
Problem
I've mentioned this possibility in a few different issue (#1099, #1282, #1401), but I thought a separate issue might be appropriate. 😄 I'd like for prettier to break on multiple chained calls. I prefer a higher `printWidth` than 80 in most cases (such as strings, log statements, class declarations etc), but increasing it leads prettier to one-line a lot of chained expressions that were multi-lined. Eslint has a rule for this called `newline-per-chained-call`. It defaults to 3 chained calls should break, which sounds like a sane starting point. This rule is unfixable, unfortunately, but Prettier could fix it! 😀 Even for the default width of 80 some things are inlined which IMO are more readable expanded. I don't think there's any doubt which of these two are the easiest to read (especially considering the git diff scenario from eslint's docs): https://prettier.github.io/prettier/#%7B%22content%22%3A%22d3%5Cn%20%20.select(%5C%22body%5C%22)%5Cn%20%20.selectAll(%5C%22p%5C%22)%5Cn%20%20.data(%5B1%2C%202%5D)%5Cn%20%20.enter()%5Cn%20%20.style(%5C%22color%5C%22%2C%20%5C%22white%5C%22)%3B%5Cn%5Cnd3%5Cn%20%20.select(%5C%22body%5C%22)%5Cn%20%20.selectAll(%5C%22p%5C%22)%5Cn%20%20.data(%5B1%2C%202%2C%203%5D)%5Cn%20%20.enter()%5Cn%20%20.style(%5C%22color%5C%22%2C%20%5C%22white%5C%22)%3B%5Cn%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Afalse%2C%22trailingComma%22%3A%22none%22%2C%22bracketSpacing%22%3Atrue%2C%22jsxBracketSameLine%22%3Afalse%2
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Implement Chained Call Line Breaks in Prettier
Prettier currently does not support breaking chained calls into multiple lines when the print width exceeds a certain limit. This results in less readable code, especially when multiple chained calls are involved. The ESLint rule 'newline-per-chained-call' provides a guideline for breaking lines after a specified number of chained calls, which Prettier could adopt to enhance readability.
Awaiting Verification
Be the first to verify this fix
- 1
Review Prettier's Codebase
Examine the Prettier source code, specifically the formatting logic that handles function calls and chaining. Identify where the current line-breaking logic is implemented and how it can be modified to include a check for chained calls.
bashgit clone https://github.com/prettier/prettier.git cd prettier # Open the relevant files in your code editor - 2
Modify Line Breaking Logic
Implement a new condition in the line-breaking logic that checks the number of chained calls. If the number of chained calls exceeds a defined threshold (e.g., 3), insert line breaks accordingly.
javascriptif (chainedCalls.length > 3) { // Logic to insert line breaks } - 3
Add Unit Tests
Create unit tests to verify that the new line-breaking logic works as intended. Ensure that tests cover various scenarios with different numbers of chained calls.
javascripttest('breaks on multiple chained calls', () => { const input = 'd3.select("body").selectAll("p").data([1, 2, 3]).enter().style("color", "white");'; const output = 'd3.select("body") .selectAll("p") .data([1, 2, 3]) .enter() .style("color", "white");'; expect(prettier.format(input)).toBe(output); }); - 4
Test the Changes Locally
Run Prettier with the modified code on various JavaScript files that utilize chained calls. Verify that the output matches the expected formatting with line breaks for chained calls.
bashnpx prettier --check path/to/your/testfile.js - 5
Submit a Pull Request
Once the changes are verified and tests are passing, submit a pull request to the Prettier repository with a detailed description of the changes and the rationale behind them.
bashgit add . git commit -m 'Implement line breaks for chained calls' git push origin feature/line-breaks # Submit PR on GitHub
Validation
Confirm that the changes are reflected in the Prettier output by running it on various files. Check that chained calls are broken into multiple lines when exceeding the specified threshold. Review the unit test results to ensure all tests pass.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep