eslint-plugin-alephium-ui

Adhere code to Alephium UI coding style

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-alephium-ui:

npm install eslint-plugin-alephium-ui --save-dev

Usage

Add alephium-ui to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "alephium-ui"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "alephium-ui/rule-name": 2
    }
}

(2 means "error". You can also write "error".)

Supported Rules

styles-after-export

Not ok:

  const Component = () => <div>Hi</div>;
  
  const ThingStyled = styled.div`
    color: red;
  `;

  export default Component;

Ok:

  const Component = () => <div>Hi</div>;
  
  export default Component;
  
  const ThingStyled = styled.div`
    color: red;
  `;

avoid-dispatch-setstateaction

Not ok:

interface A {
  callback: Dispatch<SetStateAction<string>>;
}

Ok:

interface A {
  callback: (string) => void;
}

Note these are not equivalent. The full type of Dispatch<SetStateAction<T>> is:

(action: T | ((prevState: T) => T)) => void;

no-top-return

Not ok:

function a() { return 3; }

Ok:

const a = () => 3;

immediately-export-styled

Not ok:

// (or let A = ... or A = ...)
const A = styled.div`
  color: red;
`;

export default A;

Ok:

export default styled.div`
  color: red;
`;

className-as-last

Not ok:

interface A {
  thing: string;
  className?: string;
  hello: string;
}

Ok:

interface A {
  thing: string;
  hello: string;
  className?: string;
}