按字母顺序对属性进行排序

Question

在 WebStorm IDE 中给出以下 JS 代码或 CSS 代码：

const foo = {
  z: 'zip',
  a: 'zot'
}

或

.foo {
  z-index: 1;
  align-content: center;
}

有没有办法选择代码并按字母顺序重新排序属性名称？制作：

const foo = {
  a: 'zot',
  z: 'zip' 
}

或

.foo {
  align-content: center;
  z-index: 1;
}

Answer 1

对于 CSS，您可以在 设置 | 中启用 对 CSS 属性进行排序编辑|代码风格|样式表| CSS |排列，然后使用代码 > 重新排列代码

对于 JS，没有现成的选项。但您可以使用支持行排序的第三方字符串操作插件

Answer 2

要在 WebStorm 中对 CSS、SCSS、Less、Sass、JavaScript 或 TypeScript 中的属性进行排序，请按照以下步骤操作：

- 对于样式表（CSS、SCSS、Less、Sass）：

1. 使用 Ctrl + Alt + S 打开设置。
2. 导航至“编辑器|”代码 风格|样式表| CSS'.
3. 在“排列”选项卡中，选中“对 CSS 进行排序” 属性'。
4. 确保还选中“按名称”。对于 TS 和 JS，你可以遵循相同的步骤 - 我将使用我的案例， 打字稿：

- 对于 TypeScript 和 JavaScript：

1. 转到“编辑器|”代码风格|打字稿'.
2. 在排列选项卡中，查找匹配规则（第二个规则框）。
3. 双击选择要按名称排序的规则。
4. 最后会出现“订单：”选项；选择“按名称排序”。

我为所有规则选择了“按名称排序”，这是我的最终结果：

您可以自定义这些规则并根据需要创建您自己的规则。例如，您可以通过添加自定义规则来为 Angular 组件方法（如 ngOnInit 和 ngOnDestroy）设置特定的顺序。

如果您还有任何疑问，请随时询问

Answer 3

CSS = 样式

JS = 动画/逻辑，这确实改变了行为。

因此： 为此使用 JS。 在 Javascript 中按名字（按字母顺序）对数组进行排序

很乐意提供帮助