如何配置Stylelint与Prettier格式化Stylus时强制保留花括号

问题核心 #

需要通过Stylelint+Prettier实现Stylus代码自动格式化，格式化过程中保留花括号，强制Stylus语法风格贴近原生CSS；当前执行.styl文件格式化时，文件内所有花括号会被自动移除。

现有Stylelint配置 #

module.exports = {
  extends: ['stylelint-stylus/standard', 'stylelint-config-prettier'],
  plugins: [
    'stylelint-stylus',
  ],
  overrides: [
    {
      files: [
        'utils/Alphapet/**/*.{css,styl,stylus}',
        'patterns/Alphapet/**/*.{css,styl,stylus}',
      ],
      customSyntax: 'postcss-styl',
    },
  ],
  rules: {
    'stylus/declaration-colon': 'always',
    'stylus/selector-list-comma': 'never',
    'stylus/semicolon': 'always',
    'stylus/single-line-comment': 'always',
    'stylus/single-line-comment-double-slash-space-after': 'always',
    'stylus/media-feature-colon': 'always',
    'no-missing-end-of-source-newline': true,
  },
}

现有项目依赖版本 #

{
  "dependencies": {
    "stylus": "^0.54.8"
  },
  "devDependencies": {
    "prettier": "^2.2.1",
    "stylelint": "^14.9.1",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-stylus": "^0.16.1"
  }
}

问题原因 #

花括号被自动移除的核心原因有两个：

• stylelint-stylus/standard 预设规则集中，stylus/braces 规则默认值为never，强制使用无花括号的缩进式Stylus语法，格式化时会主动删除花括号
• 未对Prettier做Stylus专属配置时，Prettier自带的Stylus解析逻辑默认输出缩进语法，也会移除花括号

配置修改步骤 #

• 修改Stylelint规则：在配置文件的rules字段中新增两条规则
  • 'stylus/braces': 'always'：强制所有代码块使用花括号包裹，禁止省略花括号
  • 'stylus/brace-style': '1tbs'：花括号风格对齐原生CSS，左花括号和选择器/规则名同行，右花括号单独占行
• 新增Prettier覆写配置：在项目Prettier配置文件中增加针对Stylus文件的专属配置，避免Prettier移除花括号，JS格式配置示例如下：

module.exports = {
  // 保留原有其他Prettier配置
  overrides: [
    {
      files: ['*.styl', '*.stylus'],
      options: {
        parser: 'stylus',
        stylusBraces: true
      }
    }
  ]
}

• 重启编辑器或本地格式化服务，重新执行格式化命令即可生效

修改后完整Stylelint配置参考 #

module.exports = {
  extends: ['stylelint-stylus/standard', 'stylelint-config-prettier'],
  plugins: [
    'stylelint-stylus',
  ],
  overrides: [
    {
      files: [
        'utils/Alphapet/**/*.{css,styl,stylus}',
        'patterns/Alphapet/**/*.{css,styl,stylus}',
      ],
      customSyntax: 'postcss-styl',
    },
  ],
  rules: {
    'stylus/braces': 'always',
    'stylus/brace-style': '1tbs',
    'stylus/declaration-colon': 'always',
    'stylus/selector-list-comma': 'never',
    'stylus/semicolon': 'always',
    'stylus/single-line-comment': 'always',
    'stylus/single-line-comment-double-slash-space-after': 'always',
    'stylus/media-feature-colon': 'always',
    'no-missing-end-of-source-newline': true,
  },
}

内容的提问来源于stack exchange，提问作者Андрій Павленко