Lintowania stan, czyli pokemony na linterach

Wchodzę w tematykę Eslinta. Uczę się go używać bardziej świadomie. Robić własne wtyczki i takie tam.

A zaczęło się niewinnie. Od prób samodzielnej konfiguracji eslinta pod Reacta. Nie zastanawiałem się nad tym wcześniej, jeśli jakieś lintery były w projekcie, to były. Ale cholera, chcę robić dobrze, chcę robić profesjonalnie. Więc zacząłem rozkminiać konfigurację i co teraz polecają.

Sprawdziłem eslint-plugin-react - chuja to sprawdza. No może tak się nie powinno pisać na poważnym blogu, ale takie moje pierwsze wrażenie, może mylne.

A eslint-config-react-app lepszy? No nie, też nic to specjalnie nie sprawdza raczej.

Sprawdziłem też AirBnB (reguły "airbnb", "airbnb/hooks"), ale tamtejsze reguły to już kompletnie są odklejone (i ostro krytykowane przez społeczność swoją drogą). Czepiają się o niemające znaczenia formatowanie, a taki kod uważają za poprawny w komponencie reactowym:

export function Foo() {
  const [state, setState] = React.useState({ c: 1 });
  state.c += 1;
  setState({ c: 2 });
  //... reszta komponentu

Ten kod jest wadliwy, bo mutuje stan bezpośrednio oraz wywołuje setState bezpośrednio w funkcji renderującej. To proszenie się o problemy. Mimo, że w moim configu mam ileś tych presetów poinstalowanych:

{
  "extends": ["next/core-web-vitals", "react-app", "plugin:react-hooks/recommended", "airbnb", "airbnb/hooks"]
}

To co one wykrywają? Albo mi coś nie działa, bo nie umiałem tego zainstalować i skonfigurować, albo to jest bezsensu 😆 nawet ChatGPT rozumie, co z tym kodem jest nie tak i daje sensowne rozwiązania. A linter nie potrafi. Tylko nie sądzę, żeby to była kwestia tego, że to taki trudny problem, że tylko AI sobie może poradzić. Kwestia raczej odpowiedniej wtyczki.

Znacie więc jakieś dobre presety eslintowe do Reacta? Albo jakiś inny lepszy linter? Może nie zainstalowałem odpowiednich paczek z npm albo nieodpowiednio je pokonfigurowałem, chociaż próbowałem na różne sposoby, stworzyłem kilka testowych projektów, na różne sposoby (część po swojemu, część z Next.js, część w JS, część w TS) i na razie nie doszedłem do niczego konkretnego.

Wobec tego uznaję, że czas zrobić własną wtyczkę do Eslinta, która będzie sprawdzać faktyczne problemy, a nie jakieś fikcyjne problemy typu:

Expected indentation of 2 space characters but found 4.eslintreact/jsx-indent
Missing parentheses around multilines JSXeslintreact/jsx-wrap-multilines

Jak widzę takie reguły, to się zastanawiam, czy to żart. To jakiś absurd. Pokemony na linterach.

A ja po prostu chcę wtyczkę, która sprawdzi:

1. czy nie ma bezpośredniej mutacji stanu
2. czy nie ma efektów ubocznych tam, gdzie ich nie powinno być
3. czy ma to sens pod kątem aktualnych zaleceń dokumentacji Reacta, jak coś powinno być używane
4. czy kod jest zgodny z modelem koncepcyjnym Reacta (np. manipulacje bezpośrednio elementami DOM. Czasem jest uzasadnione, ale w niektórych przypadkach może świadczyć, że kod jest napisany niezgodnie z filozofią Reacta i może być problematyczny)
5. zapewne przy pisaniu w Next.js też by się coś znalazło, ale na razie to jest temat do eksploracji
6. wymuszenie określonego stylu - np. nazewnictwo getterów/setterów (counter, setCounter), ostrzeżenia o inline handlerach zdarzeń (np. onClick={e => {....}}, czy inne reguły, które ludzie często stosują. Tutaj widzę, że w którejś wtyczce to jest https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/hook-use-state.md. oraz https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md. Chociaż nie udało mi się i tak tego odpalić, ale przynajmniej wg dokumentacji to jest. To już coś. W swojej wtyczce też tak zrobię.

Przy czym myślę, że w 100% nie da się tego wszystkiego sprawdzić, ale jeśli przynajmniej najbardziej oczywiste przypadki się wykryje, to już będzie jakiś sukces. Tj. najbardziej oczywiste do wykrycia przez linter, natomiast nie znaczy to, że zawsze będą oczywiste dla programisty. Szczególnie, że wiele osób dopiero się uczy Reacta, więc niekoniecznie od razu wykryją błąd. Linter powinien pokazywać drogę i edukować (niech przykładem będzie kompilator Rusta, który nie tylko pokazuje błędy, ale tłumaczy, dlaczego one wystąpiły i co możesz zrobić, żeby naprawić).

Niestety mam wrażenie, że dla wielu osób linter to ma tylko pokazywać, ile spacji ma być i gdzie. Bo to jest najważniejsze. Nieważne, że kod nie działa, ważne, że ma 2 spacje... Tutaj aż się prosi o emotkę śmiechu, ale staram się ograniczać emotki na blogu, bo to poważny blog o poważnym programowaniu.