你如何在保存时按字母顺序格式化 React Component 道具？

Question

如何在保存时按字母顺序格式化 props 和 typescript 定义？理想情况下，它是整个项目的一些配置，而不是 VSCode 插件（尽管此时我也打开了一个插件）。

// the items inside ButtonProps should be sorted alphabetically
type ButtonProps = {
    name: string;
    id: string;
    onPress: () => void;
    disabled: boolean;
}

const Button = (props: ButtonProps) => {
    // this should also be sorted alphabetically
    const {name, id, onPress, disabled} = props;

    return <>My Prop</>
}

我试过 react/sort-prop-types and sort-keys 但我真的不知道我在用 eslint 做什么。保存时它仍然没有按字母顺序格式化。我的 eslint 配置如下：

// .eslintrc.json
{
  // ...
  "rules": {
    "react/sort-prop-types": [
      2,
        {
            "callbacksLast": true,
            "shorthandFirst": true,
            "ignoreCase": false,
            "noSortAlphabetically": false,
            "reservedFirst": true
        }
    ],
    "sort-keys": ["error", "asc", {"caseSensitive": true, "natural": false, "minKeys": 2}], 
  }

Answer 1

您可以使用名为 Sort lines 的 VSCode 扩展。虽然它不会在保存时执行，但您所要做的就是突出显示您的道具，按 cmd + shift + p 以获得 Mac 或 ctrl + shift + p Windows 打开命令面板和 select Sort lines.

你如何在保存时按字母顺序格式化 React Component 道具？

How do you format React Component props alphabetically on save?

javascript

format

reactjs

eslint

prettier