配置 Prettier 以避免替换引号答案

【问题标题】：Configure Prettier to avoid replacing quotes配置 Prettier 以避免替换引号
【发布时间】：2021-11-13 21:13:19
【问题描述】：

背景

我尝试了几个关键字，但无法找到禁用 prettier 引号修改的解决方案。我正在做一个 Polymer Lit 项目，我已经尝试了很多东西，但是维护代码缩进真的很困难...... 所以 prettier 做得很好，但只有一个问题破坏了我的代码。

格式化前的代码

html`<div style="${'background-color: ' + this.bgColor }">
...
</div>`

格式化后的代码

html`<div style="${"background-color: " + this.bgColor}">...</div>`

是否有任何标志/属性我可以传递给 prettier 以忽略或避免引号，并且所有其他事情都应该解决...

如果没有任何人可以告诉我是否有任何其他 Formater 可以使用 lit 元素完成干净的工作..

【问题讨论】：

你有任何包含规则的配置文件吗？
不...我正在使用vs代码扩展...我认为通过配置文件支持所有设置...
如果你知道任何可以禁用引号的道具..让我知道我可以创建配置
希望你能找到你的回复here。
你为什么说这会“破坏”你的代码？您展示的两个 sn-ps 绝对等效，它们都应该可以工作。不过，如果您更喜欢 JS 字符串中的单引号而不是双引号，there's a prettier option for that

【解决方案1】：

这是我的 .prettierrc 用于我所有的 lit 项目：

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": false,
  "arrowParens": "always"
}

在标记中我使用的是这个（示例）：

<div class="wrapper ${this.animated ? 'active' : ''}" ${animate()}>

这对我有用，从来没有任何问题。

【讨论】：