visual-studio-code - 如何在 VSCode 中使用 Prettier 编辑 CSS/SCSS/LESS 的自动格式设置规则?

标签 visual-studio-code vscode-settings prettier stylelint

背景:

我正在使用 Prettier - Code formatter VSCode 的扩展以在保存时自动格式化我的代码。

问题:

我习惯于在我的 sass 文件中编写单行 block (其中只有一个属性),即
.some-class { background: #f00; }
问题是 Prettier扩展将其格式化为多行,即

.some-class {
    background: #f00;
}

似乎更漂亮地将 stylelint 用于 css/scss 文件,我发现可以通过在设置中启用它来覆盖这些设置:
"prettier.requireConfig": true并使用 .prettierrc.js 文件,但无法关闭单行 block 的 linting。如果这里有人对此有任何修复,将不胜感激。

谢谢

更新:

设置不能被 "prettier.requireConfig": true 覆盖. Prettier - Code formatter VSCode 的扩展没有从 VSCode 设置编辑样式表的选项。

但是,有一个选项可以启用 stylelint集成,但这需要 stylelint stylelint-prettier npm 模块 .

Prettier默认使用 standard stylelint configuration用于样式表检查和格式化。

在下面发布解决方案。

最佳答案

我不知道 vscode 有这个功能。一种简单的解决方案可能是指定 prettier-ignore ?

/* prettier-ignore */
.some-class { background: #f00; }

引用:
  • https://prettier.io/docs/en/ignore.html#css
  • 关于visual-studio-code - 如何在 VSCode 中使用 Prettier 编辑 CSS/SCSS/LESS 的自动格式设置规则?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54753495/

    相关文章:

    visual-studio-code - 当我在 MacOS 上并排安装常规 VS Code 时,如何运行 VS Code Insider 版本?

    visual-studio-code - VSCode 和 ES6 警告

    Vim for VSCode : Remap ctrl + e to go to end of line in insert mode

    vue.js - 模块构建失败(来自 ./node_modules/eslint-loader/index.js): Error: Cannot find module 'eslint/lib/formatters/stylish'

    javascript - 函数参数中每行的最大 jsx Prop

    typescript - 自行托管 Deno 库的正确方法是什么?

    visual-studio-code - 当 Zshell 主题存在时,终端开始表现不佳

    javascript - 更漂亮的 javascript 代码缩进配置

    visual-studio-code - 侧边栏增强扩展类似于 sublime 文本?

    visual-studio-code - 将 VSCode 中的 "Go to Symbol in Workspace"范围限定为整个工作区