如何在 stylelint 中使用 VSCode Prettier 3 格式

Question

老实说，我无法理解文档，或者我错过了一些东西。它让我疯狂

我做的步骤：

1. 安装 VSCode
2. 安装Prettier插件
3. 用几个文件（html，css）打开简单的项目
4. 安装 stylelint npm install --save-dev stylelint
5. 安装 stylelint-prettier npm install --save-dev stylelint-prettier prettier
6. 创建 .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",
    }
}

您需要即用型配置吗？

没问题 - 你必须检查这个

• https://github.com/stylelint/stylelint-config-standard
• https://github.com/stylelint/stylelint-config-recommended

你需要格式化选项（Shift + Alt + F）吗？

没问题。您可以为 option 定义键绑定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 选项都可用于自动修复（但大多数都可用）