如何使用VSCode中的Prettier编辑CSS/SCSS/LESS的自动格式设置规则? [英] How to Edit Auto-Formatting Rules for CSS/SCSS/LESS using Prettier in VSCode?

问题描述

我正在使用用于VSCode的更漂亮的-代码格式化程序扩展保存时自动格式化我的代码.

I'm using Prettier - Code formatter extension for VSCode to auto-format my code on save.

我习惯于在sass文件(只有一个属性)中编写单行块，即

I'm used to writing single-line blocks in my sass files (where there's only a single property) i.e.

.some-class { background: #f00; }

问题是 Prettier 扩展程序将其格式化为多行，即

Problem is the Prettier extension formats it to multi-lines i.e.

.some-class {
    background: #f00;
}

似乎更漂亮的CSS/scss文件使用stylelint，我发现可以通过在设置中启用这些设置来覆盖这些设置:

It seems prettier uses stylelint for css/scss files and I've found these settings can be over-written by enabling this in the settings:

"prettier.requireConfig": true并使用 .prettierrc.js 文件，但无法关闭单行块的棉绒.如果有人在此有任何修复，将不胜感激.

"prettier.requireConfig": true and using a .prettierrc.js file but haven't been able to turn-off linting for single-line blocks. Would appreciate, if anybody here has any fixes for this.

谢谢

设置不能被"prettier.requireConfig": true覆盖. VSCode的 Prettier-代码格式化程序扩展名无法选择通过VSCode设置编辑样式表.

The settings can't be over-written by "prettier.requireConfig": true. The Prettier - Code formatter extension for VSCode doesn't have an option to edit stylesheets linting from VSCode Settings.

但是，有一个选项可以启用 stylelint 集成，但这需要 stylelint 和 stylelint更漂亮的npm模块.

However, there is an option to enable stylelint integration but this requires stylelint and stylelint-prettier npm modules.

更漂亮默认使用

Prettier by default uses standard stylelint configuration for stylesheet linting and formatting.

在下面发布了解决方案.

推荐答案

解决方案:

为了允许使用更漂亮-代码格式化程序扩展名，请执行以下步骤:

Solution:

In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:

1. 通过在VSCode设置(JSON)中添加以下代码来启用stylelint集成:"prettier.stylelintIntegration": true
在项目目录中
2. 安装 stylelint 和 stylelint-prettier npm模块. npm install stylelint, stylelint-prettier --save-dev
3. 使用以下代码在项目目录的根目录中添加一个 .stylelintrc.json 文件:

1. Enable stylelint integration by adding this in the VSCode Settings (JSON): "prettier.stylelintIntegration": true
2. Install stylelint and stylelint-prettier npm modules in your project directory. npm install stylelint, stylelint-prettier --save-dev
3. Add a .stylelintrc.json file at the root of your project directory with the following code:

    {
        "plugins": ["stylelint-prettier"],
        "rules": {
            "block-closing-brace-newline-after": "always-multi-line",
            "block-closing-brace-empty-line-before": "never",
            "block-closing-brace-space-before": "always",
            "block-opening-brace-space-after": "always",
            "block-opening-brace-space-before": "always",
            "block-closing-brace-newline-before": "always-multi-line",
            "block-opening-brace-newline-after": "always-multi-line",
            "indentation": 4
        }
    }

您可以添加/自定义更多stylelint规则，请参见此处有完整的规则列表.

You can add/customize more stylelint rules, see the entire list of rules here.

花点时间了解如何配置这些选项，如果您从stylelint开始，我强烈建议您

Took me a while to understand how to configure these options, if you're starting out with stylelint, I highly recommend you read its guidelines first.

这篇关于如何使用VSCode中的Prettier编辑CSS/SCSS/LESS的自动格式设置规则?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！