PhpStorm 2021.3 Help

代码风格。CSS

使用此页面配置 CSS 文件的格式选项。当您更改这些设置时,“预览”窗格会显示这将如何影响您的代码。

制表符和缩进

使用制表符

  • 如果选中此复选框,则使用制表符:

    • 按键Tab

    • 用于缩进

    • 用于重新格式化代码

  • 如果清除该复选框,PhpStorm 将使用空格而不是制表符。

智能标签

缩进由两部分组成。一部分是嵌套代码块的结果,另一部分是由对齐决定的。

  • 如果选中此复选框,则嵌套生成的部分包含制表符和空格(如果需要),而对齐定义的部分仅包含空格。

  • 如果清除此复选框,则仅使用选项卡。这意味着在重新格式化适合指定制表符大小的一组空格后,会自动将其替换为制表符,这可能会导致精细对齐中断。

标签大小

在此字段中,指定适合制表符的空格数。

缩进

在此字段中,指定要为每个缩进级别插入的空格数。

继续缩进

在此字段中,指定要在属性值之间插入的空格数。

在空行上保留缩进

如果选中此复选框,PhpStorm 会在空行上保留缩进,就好像它们包含一些代码一样。如果清除该复选框,PhpStorm 将删除空行上的制表符和空格。

空行

使用此选项卡来定义您希望 PhpStorm 在重新格式化后保留和插入代码的位置和数量。结果显示在“预览”窗格中。

保留最大空白行

在此区域中,指定重新格式化后要保留的额外空白行数。

最少空行

在此区域中,配置是否在顶级块和嵌套选择器周围有额外的空行。在每个选项旁边的字段中,指定要留下的最少额外空行数。

其他

在此选项卡中,指定要在重新格式化时应用的对齐方式、大括号、空格和引号选项。

大括号放置

使用此列表指定 PhpStorm 应将选择器的左大括​​号放置在何处。可用的选项有:

  • 在行尾

  • 下一行

对齐值

使用此列表指定 PhpStorm 应如何对齐属性和值。可用的选项有:

  • 不对齐:选择此选项以指定属性名称的第一个字符对齐。

  • On value:选择此选项以指定属性值的第一个字符的对齐方式。

  • 在结肠

引号

在 CSS、SCSS 和 Less 上下文中,PhpStorm 默认为import语句和 URL 中生成的字符串文字使用双引号。要使用单引号,请从此列表中选择Single 。

要在重新格式化后将所选样式应用到整个文件,请选中列表下方的Enforce on format复选框。

将右大括号与属性对齐

如果选中此复选框,则选择器的右大括号将放置在属性列表下方。

如果未选中此复选框,则选择器的右大括号将放置在选择器下方。

保留单行块

如果选中此复选框,则具有单个属性的块将被限制为一行。

如果未选中此复选框,则每个属性将被放置到自己的行中。

空间

选中此区域中的复选框以在冒号分隔键和值之后和选择器的左大括​​号之前添加一个空格。

注释

使用此区域中的控件来配置行和块注释以及其中的空格的位置。

  • 在块注释周围添加空格:选中此复选框可在块注释中添加前导和尾随空格。

    默认情况下,当您将代码片段包含在块注释中时,文本会在开始/*字符之后开始,没有任何空格。在结束*/字符之前也没有插入空格。此默认代码样式可能与某些 linter 的规则冲突,例如 ESLint。

十六进制颜色

使用此区域配置十六进制颜色语法。您可以从以下检查选项中进行选择:

  • 将十六进制颜色转换为:选中此复选框以配置十六进制颜色字母大小写。您可以选择小写大写

  • 将十六进制颜色格式转换为:选中此复选框以配置十六进制颜色格式长度。您可以选择长格式短格式

在“预览”窗格中查看更改。

安排

在此选项卡中,启用默认关闭的 CSS 属性排序,然后选择排序顺序。

  • 要启用排序,请选中排序 CSS 属性复选框。

  • 选择按名称以使每个块中的所有 CSS 属性按字母顺序重新排序。PhpStorm 忽略特定于供应商的前缀,但为某个 CSS 属性保留多个特定于供应商的前缀 alpha-sorted。

    边框:1px 实心;-moz-边界半径:4px;-webkit-border-radius:4px;边框半径:4px;颜色:黑色;
  • 要定义您自己的排序策略,请选择自定义顺序选项并在其旁边的文本框中指定所需的排序顺序。

    使用逗号和空格作为分隔符并跳过特定于供应商的属性,因为 PhpStorm 总是将它们与不带前缀的对应属性分组。在这样的组中,属性按供应商前缀排序,无前缀的排在最后。

    自定义顺序列表中欢迎使用正则表达式,例如,.*匹配任何属性。

    PhpStorm 会记住修改后的自定义订单列表,如果您关闭自定义排序然后再次打开它,则会将其恢复。

对文件中的所有 CSS 属性进行排序

  • 从主菜单中,选择代码 | 重新排列代码

  • 或者,选择代码 | 从主菜单重新格式化文件,然后在打开的对话框中选择整个文件重新排列代码

对块内的 CSS 属性进行排序

  • 选择要排序的块,然后选择代码 | 从主菜单重新排列代码。

  • 或者,选择代码 | 在主菜单上重新格式化文件,然后在打开的对话框中选择重新排列代码

设置自

如果适用,该链接将显示在页面的右上角。单击此链接并选择要用作当前语言代码样式的基础的语言。

要返回到初始代码样式设置集并放弃更改,请单击重置

最后修改时间:2021 年 11 月 3 日