如何配置Prettier实现Cypress链式调用代码的理想格式化？

问题 #

使用Prettier格式化Cypress代码时，换行方式不符合预期：
当前格式化结果：

cy.contains("div[role='alert']", "Status alterado com sucesso!").should(
    "be.visible"
);

期望格式化结果：

cy.contains("div[role='alert']", "Status alterado com sucesso!")
    .should("be.visible");

当前settings.json配置：

"prettier.chainedCall": true,
"prettier.keepFunctionIndentation": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.printWidth": 80,
"prettier.arrowParens": "avoid",
"prettier.tabWidth": 4,
"editor.defaultFormatter": "esbenp.prettier-vscode",

解决方案 #

1. 替换废弃配置项 #

prettier.chainedCall是Prettier旧版的废弃选项，改用实验性选项experimentalChainedCalls来控制链式调用的换行逻辑。

2. 调整配置参数 #

修改settings.json为如下配置：

"prettier.experimentalChainedCalls": true,
"prettier.keepFunctionIndentation": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.printWidth": 70, // 缩小宽度阈值触发链式换行，可根据实际代码长度微调
"prettier.arrowParens": "avoid",
"prettier.tabWidth": 4,
"editor.defaultFormatter": "esbenp.prettier-vscode",

配置说明 #

• experimentalChainedCalls: 启用后，Prettier会优先在链式调用的.前换行，而非在函数参数内部换行
• printWidth: 缩小宽度阈值，确保你的Cypress链式调用行超过设定宽度，触发预期的换行逻辑

内容的提问来源于stack exchange，提问作者JVMatos