如何让Prettier不拆分JavaScript中querySelector相关代码？

嘿，我完全懂这种烦人的情况——明明一行就能写完的代码，Prettier非要给拆成好几行，看着特别不顺眼。针对你遇到的这个问题，我给你整理了几个实用的解决办法，你可以根据自己的需求选：

1. 调整全局行宽阈值 #

Prettier默认以80字符作为换行的临界点，当你的代码长度超过这个值时就会自动换行。你可以在项目根目录的.prettierrc（或.prettier.config.js）配置文件里把这个阈值调大，比如改成120：

{
  "printWidth": 120
}

不过要注意，这个配置是全局生效的，如果你在团队里开发，最好先和队友商量好统一的规则。

2. 用ES6模板字符串替代字符串拼接 #

你现在用的是'#current--' + activePlayer这种字符串拼接写法，Prettier对这种拼接操作的换行判断有时候会比较严格。换成模板字符串不仅代码更简洁，还能大概率避免被拆行：

document.querySelector(`#current--${activePlayer}`).textContent = roundScore;

这个方法是我个人最推荐的，既解决了换行问题，代码可读性也更高。

3. 临时禁用单行的Prettier格式化 #

如果你就想保留原来的字符串拼接写法，不想改全局配置也不想换模板字符串，可以在目标代码行上方加一个// prettier-ignore注释，让Prettier跳过这行的格式化：

// prettier-ignore
document.querySelector('#current--' + activePlayer).textContent = roundScore;

这个方法适合处理个别特殊代码行，不会影响项目里其他代码的格式化规则。

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