[英]How to Edit Auto-Formatting Rules for CSS/SCSS/LESS using Prettier in VSCode?
I'm using Prettier - Code formatter extension for VSCode to auto-format my code on save.我正在使用 Prettier - VSCode 的代码格式化程序扩展来在保存时自动格式化我的代码。
I'm used to writing single-line blocks in my sass files (where there's only a single property) ie我习惯于在我的 sass 文件中编写单行块(其中只有一个属性),即
.some-class { background: #f00; }
Problem is the Prettier extension formats it to multi-lines ie问题是Prettier扩展将其格式化为多行,即
.some-class {
background: #f00;
}
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:似乎更漂亮地将 stylelint 用于 css/scss 文件,我发现这些设置可以通过在设置中启用来覆盖:
"prettier.requireConfig": true
and using a .prettierrc.js file but haven't been able to turn-off linting for single-line blocks. "prettier.requireConfig": true
并使用.prettierrc.js文件,但无法关闭单行块的 linting。 Would appreciate, if anybody here has any fixes for this.如果这里有人对此有任何修复,将不胜感激。
Thanks谢谢
The settings can't be over-written by "prettier.requireConfig": true
.设置不能被
"prettier.requireConfig": true
覆盖。 The Prettier - Code formatter extension for VSCode doesn't have an option to edit stylesheets linting from VSCode Settings. Prettier - VSCode 的代码格式化程序扩展没有从 VSCode 设置编辑样式表 linting 的选项。
However, there is an option to enable stylelint integration but this requires stylelint and stylelint-prettier npm modules .但是,可以选择启用stylelint集成,但这需要stylelint和stylelint-prettier npm 模块。
Prettier by default uses standard stylelint configuration for stylesheet linting and formatting. Prettier默认使用标准 stylelint 配置进行样式表 linting 和格式化。
Posted the solution below.在下面发布解决方案。
In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:为了在 VSCode 中使用 Prettier - Code formatter extension 允许单行块,请执行以下步骤:
"prettier.stylelintIntegration": true
"prettier.stylelintIntegration": true
npm install stylelint stylelint-prettier --save-dev
{
"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
}
}
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 .我花了一些时间来了解如何配置这些选项,如果你是从 stylelint 开始的,我强烈建议你先阅读它的指南。
I haven't known that vscode have that feature.我不知道 vscode 有这个功能。 One simple solution probably by specifying
prettier-ignore
?一个简单的解决方案可能是指定
prettier-ignore
?
/* prettier-ignore */
.some-class { background: #f00; }
Reference:参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.