如何对基于缩进的 SASS 进行 lint？

Question

我正在尝试将 SugarSS 的 linting 添加到我的项目中。我在 package.json 中添加了 lint-staged 命令：

  "scripts": {
    "lint-staged": "$(yarn bin)/lint-staged"
  },
  "lint-staged": {
    ...
    "app/assets/styles/**/*.sass": [
      "prettier --write",
      "stylelint --fix --syntax sugarss",
      "git add"
    ]
  }

当我运行npm run lint-staged 时，它会输出

✖ prettier --write found some errors. Please fix them and try committing again.


[error] path/to/style.sass: SyntaxError: Unexpected token, expected ";" (3:16)
[error]   1 | h1.question
[error]   2 |   overflow: visible
[error] > 3 |   padding-right: 12px
[error]     |                ^
[error]   4 |   color: #333
[error]   5 |
[error]   6 | #questions h4
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my_project@1.0.0 lint-staged: `$(yarn bin)/lint-staged`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my_project@1.0.0 lint-staged script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

似乎 eslint 试图用新的 SASS 3 语法对我的 path/to/style.sass 进行 lint 处理

如何在 package.json 中为 SugarSS 语法设置 linting？谢谢

Answer 1

我能够使用以下设置为 SugarSS 设置 linting：

# .stylelintrc
{
  "extends": "stylelint-config-sugarss-recommended"
}

在 package.json 中

{
  "devDependencies": {
    "stylelint-config-sugarss-recommended": "^1.1.0"
    ...
  },
  "scripts": {
    "lint-staged": "$(yarn bin)/lint-staged"
  },
  "lint-staged": {
    "app/assets/styles/**/*.sass": [
      "stylelint --fix --syntax sugarss",
      "git add"
    ],
    ...
  },
  "pre-commit": [
    "lint-staged"
  ]
}