visual-studio-code - 如何在 stylelint 中使用 VSCode Prettier 3 格式

Question

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

我做的步骤:

安装 VSCode

已安装 Prettier插件

用几个文件(html，css)打开简单的项目

使用 npm install --save-dev stylelint 安装 stylelint

使用 npm install --save-dev stylelint-prettier prettier 安装 stylelint-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",
    }
}

您需要即用型配置吗？

没问题 - 你必须检查这个

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

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

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

没问题。您可以为选项 Fix all auto-fixable problems 定义键绑定(bind).例如:

{
    "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 选项都可用于自动修复(但大多数都可用)