eslint-plugin-wnfx v0.0.17

eslint-plugin-wnfx

eslint-wnfx-plugin (react)

Установка

Вам нужно сперва установить ESLint:

npm i eslint --save-dev

Далее, установите eslint-plugin-wnfx:

npm install eslint-plugin-wnfx --save-dev

Использование

Добавьте в plugins wnfx в ваш .eslintrc конфигурационный файл.:

{
    "plugins": ["wnfx"]
}

Добавьте в rules название правила, например wnfx/img-alt-required.

{
    "wnfx/img-alt-required": "error",
}

Дальше нужно перезапустить среду разработки или перезагрузить Restart ESLint-Server

Для того чтобы убедиться что линтер подключен, и правило отрабатывает, добавьте в ваш .tsx-файлв папке src следующий код:

<img />

линтер должен выдавать ошибку "Укажите alt для изображения"

если нет, пробуйте перезагрузить среду разработки.

Правила линтера

img-alt-required - линтер проверяет на обязательное задание alt атрибута для изображений

Пример использования

<img />

В теге img без атрибута alt линтер выдаст ошибку - "Укажите alt для изображения"

Решение

Передать атрибут alt

<img alt="alt"/>

Опции

нет

picture-tag-required - проверяет задание тега img с использованием тега picture

пример использования

<img alt="alt"/>

В теге img без без использования тега picture линтер выдаст ошибку - "Изображение нужно задавать через тег picture"

Решение

img обернуть в picture

<picture>
    <img alt="alt"/>
</picture>

Опции

нет

max-line-length - максимальное кол-во строк в файле не должно быть превышенно 500 строк

Пример использования

Если длина строк в фалйе будет превышать 500 строк линтер выдаст ошибку - "Максимальное количество строк в файле превышено"

Решение

Декомпозировать файл на функции/компоненты

Опции

нет

required-key - проверяет наличие атрибута key при итерации по массиву

Пример использования

[1, 2, 3, 4].map((el) => {
    return <span>{el}</span>
})

В отсутствии атрибута key в итерации по массиву линтер выдаст ошибку - "Не задан обязательный key в массиве"

Решение

Добавить атрибут key

[1, 2, 3, 4].map((el) => {
    return <span key={el}>{el}</span>
})

Опции

нет

style-attr-no - не должно быть атрибута style для тегов (задание инлайн стилей)

Пример использования

<div style="width: 100px" ></div>

При наличии атрибута style линтер выдаст ошибку - "Нельзя использовать инлайн-стили в атрибутах"

Решение

Не использовать атрибут style

<div style="width: 100px" ></div>

Опции

нет

style-module-classname - стандартизация задания в css-module именование переменных cls, styles и задание классов в camel-lower-case

Пример использования

import classes from "./style-module-classname.module.css"

export const styleModuleClassname = () => {

    return (
        <div className={classes.block}>
            
        </div>
    )
}

Называть переменные для css-module можно либо styles, либо cls, иначе линтер выдаст ошибку - "В модулях css допустимые разрешения для переменных cls и styles"

Решение

Назвать переменную для импорта css-module - styles или cls

import styles from "./style-module-classname.module.css"

export const styleModuleClassname = () => {

    return (
        <div className={styles.block}>
            
        </div>
    )
}

Второй кейс

import styles from "./style-module-classname.module.css"

export const styleModuleClassname = () => {

    return (
        <div className={styles.product__block}>
            
        </div>
    )
}

Линтер выдаст ошибку "В модулях классы должны называться lowerCamelCase"

Решение

Назвать класс в lowerCamelCase

import styles from "./style-module-classname.module.css"

export const styleModuleClassname = () => {
    return (
        <div className={styles.productBlock}>
            
        </div>
    )
}

Опции

нет

FSD

public-api - все что нужно вынести из модуля наружу, выносим через public-api (index.ts)

Пример использования

import {SearchTicket} from '@/features/SearchTickets/ui/SearchTickets'

В данном случае мы импортируем модуль не через единую точку входа для модуля SearchTicket, - "Нельзя использовать инлайн-стили в атрибутах"

Ссылки

Документация про public api

Дополнительная информация

Решение

Экспортировать наружу из модуля только через public api (index.ts), тем самым соблюдаеются инкапсуляция модулей

index.ts

export {SearchTicket} from '../SearchTickets/ui/SearchTickets'

import {SearchTicket} from '@/features/SearchTickets'

Опции

В опциях для этого правило можно передать алиас для импорта путей в .eslintrc

В массив rules для правила

'wnfx/public-api': ['error', { alias: '@' }],

import-overliying-layer - нельзя импортировать из выше лежащих слоев

Пример использования

Импорт из вышележащего слоя запрещается методологией, следует соблюдать однонаправленный поток данные. В слое feature мы не можем импортировать из слоя widgets.

Ссылки

Документация методологии

Дополнительная информация

Нарушение: В файле /features/SearchTickets/ui/SearchTickets' импортируем из слойя widgets

import {SearchTicket} from '@/widgets/SearchTicketForm/ui/SearchTicketForm '

Решение

Импортировать из модуля только из нижележащих слоев

Опции

В опциях для этого правило можно передать алиас для импорта путей в .eslintrc

В массив rules для правила

'wnfx/import-overliying-layer': ['error', { alias: '@' }],

absolute-path-inside-module - абсолютный импорт внутри модуля