如何使用 VSCode Prettier 3 格式化与 stylelint

Question

老实说，我看不懂文档，或者我错过了什么。这让我发疯

我执行的步骤：

已安装VSCode
已安装 Prettier 插件
打开了带有几个文件的简单项目（html、css）
使用 npm install --save-dev stylelint
使用 npm install --save-dev stylelint-prettier prettier
已创建内容为 .stylelintrc：

{
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true,
    "comment-empty-line-before": "always",
  }
}

然后呢？ VSCode 中的 Prettier 没有修复 css 文件中的任何内容或者也许我完全错了？

我正在 Windows 10 台机器上工作

Answer 1

你可以在github上查看这个问题的答案，我前段时间在那里打过票：

https://github.com/prettier/prettier-vscode/issues/1051

我现在有了在 VSCode 中使用 stylelint 的更好解决方案：

我有一个更好的选择来使用 stylelint，因为 stylelint 所有者已经创建了 官方 VSCode 插件！

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

该插件开箱即用几乎。您需要做的是设置。您可以在 VSCode 中只使用 settings.json。小例子：

"stylelint.config": {
    "rules": {
        "at-rule-name-case": "lower",
        "at-rule-name-space-after": "always-single-line",
        "at-rule-semicolon-newline-after": "always",
    }
}

您需要现成的配置吗？

没问题 - 你必须检查这个

您需要格式化选项 (Shift + Alt + F) 吗？

没问题。您可以为选项 Fix all auto-fixable problems 定义键绑定。例如：

{
    "key": "alt+shift+f",
    "command": "stylelint.executeAutofix",
    "when": "editorTextFocus && editorLangId == 'css'"
},
{
    "key": "alt+shift+f",
    "command": "stylelint.executeAutofix",
    "when": "editorTextFocus && editorLangId == 'scss'"
},
{
    "key": "alt+shift+f",
    "command": "stylelint.executeAutofix",
    "when": "editorTextFocus && editorLangId == 'less'"
}

请记住，并非所有 stylelint 选项都可用于自动修复（但大多数是）

如何使用 VSCode Prettier 3 格式化与 stylelint

How to use VSCode Prettier 3 formatting with stylelint

lint

visual-studio-code

stylelint

prettier

我现在有了在 VSCode 中使用 stylelint 的更好解决方案：

您需要现成的配置吗？

您需要格式化选项 (Shift + Alt + F) 吗？