VSCode中配置Prettier保留嵌套选择器前空行的解决方案

我完全懂这种头疼的感觉——团队硬要求的代码格式和自己习惯用的Prettier默认行为打架，太闹心了。针对你提到的嵌套选择器前必须保留空行的需求，其实改改Prettier配置就能搞定，具体步骤如下：

1. 先确认Prettier版本 #

首先得确保你用的是Prettier v2.4.0及以上的版本，因为针对SCSS嵌套块的空行控制选项是在这个版本之后才加的。如果版本太低，先升级一波：

npm install prettier@latest --save-dev
# 用yarn的话就执行这个
yarn add prettier@latest --dev

2. 修改Prettier配置文件 #

在项目根目录下创建或者编辑Prettier的配置文件（比如.prettierrc.json、.prettierrc或者prettier.config.js都行），加上对应的SCSS配置项：

JSON格式配置示例 #

{
  "scssEmptyLineBetweenBlockChildren": true
}

JS格式配置示例 #

module.exports = {
  scssEmptyLineBetweenBlockChildren: true,
};

这个配置项会让Prettier在SCSS嵌套块的子元素之间（包括父块里第一个子元素的前面）保留空行，刚好匹配你项目的要求：

比如你期望的格式：

.about {

  &__inner {
    color: red;
  }
}

Prettier格式化之后会乖乖保留这个空行，不会再给你删掉了。

3. 要是项目还搭了ESLint的话 #

如果你的项目同时在用ESLint，记得要确保ESLint的Prettier插件（eslint-plugin-prettier）不会覆盖咱们刚设置的配置。检查一下你的.eslintrc里要有这些内容：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

这样ESLint就会直接用咱们定义的Prettier配置，不会搞出冲突来。

备选方案：实在不行就忽略（不推荐） #

如果因为某些原因没法升级Prettier或者用上面的配置，你可以在不想让Prettier格式化的代码块前后加/* prettier-ignore */注释，强制它跳过这部分：

/* prettier-ignore */
.about {

  &__inner {
    color: red;
  }
}

不过这种方法有点笨，会多一堆注释，还是优先用前面的配置方案更靠谱。

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