人生の中から、import、型のalias、props、objectの分割代入の順番を考えることを抹殺する方法

モチベーション

import styled from "styled-components";
import * as React from "react";

type HogeProps = {
  value: string;
  isActive: boolean;
  onPress?: () => void;
};

export const HogeComponent: React.FC<HogeProps> = ({value,isActive,onPress,children}) => {
  return <FugaComponent value={value} isActive={isActive} onPress={onPress}>{children}</HogeComponent>;
};

type FugaProps = {
  value: string;
  isActive: boolean;
  onPress?: () => void;
};

export const FugaComponent: React.FC<FugaProps> = ({value,isActive,onPress,children}) => {
  return <Container>{children}</Container>;
};

const Container = styled.div``;

上記のようなコンポーネントがあった場合、import、型のalias、props、objectの分割代入の順番が揃ってないと気持ち悪いけど順番を整えていること自体が人生の無駄感ある。

解決方法

順番へのこだわりを捨てる。（重要）

yarn add -D eslint-plugin-simple-import-sort eslint-plugin-sort-destructure-keys eslint-plugin-sort-keys-fix eslint-plugin-typescript-sort-keys

const OFF = 'off';
const WARN = 'warn';
const ERROR = 'error';

module.exports = {
  plugins: ["simple-import-sort", "typescript-sort-keys", "sort-keys-fix", "sort-destructure-keys"],
  rules: {
    "sort-keys-fix/sort-keys-fix": WARN,
    "sort-destructure-keys/sort-destructure-keys": WARN,
    "react/jsx-sort-props": [WARN, {
      "callbacksLast": false,
      "shorthandFirst": true,
      "ignoreCase": true,
      "noSortAlphabetically": false,
      "reservedFirst": true,
    }],
    "simple-import-sort/sort": WARN,
    "typescript-sort-keys/interface": WARN,
    "typescript-sort-keys/string-enum": WARN,
  },
};

結果

import * as React from "react";
import styled from "styled-components";

type HogeProps = {
  isActive: boolean;
  onPress?: () => void;
  value: string;
};

export const HogeComponent: React.FC<HogeProps> = ({ children, isActive, onPress, value }) => {
  return (
    <FugaComponent isActive={isActive} onPress={onPress} value={value}>
      {children}
    </FugaComponent>
  );
};

type FugaProps = {
  isActive: boolean;
  onPress?: () => void;
  value: string;
};

export const FugaComponent: React.FC<FugaProps> = ({ children, isActive, onPress, value }) => {
  return <Container>{children}</Container>;
};

const Container = styled.div``;

eslint --fixで適当にpropsなどを追加してもいい感じに並び替えてくれる。