如何使用Stylelint使用VSCode Prettier 3格式

Question

老实说，我听不懂文档，或者我错过了一些东西。这让我发疯了😑

我执行的步骤：

1. 已安装的VSCode
2. 已安装Prettier插件
3. 仅打开带有几个文件（html，css）的项目
4. 与npm install --save-dev stylelint一起安装stylelint
5. 已安装带有npm install --save-dev stylelint-prettier prettier的stylelint-prettier
6. 创建了带有内容的.stylelintrc：

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

现在呢？ VSCode中的漂亮没有修复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）？

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