Почему не работает ESLint в react проекте?

Question

[Niksak]

Создал проект с помощью npm create vite@latest, выбрал React на JavaScript. Проект создается без ничего, т.е. нет ESLint файла, нет prettier.
Я работаю на VSCode, у меня поставлены расширения: ESLint ( от Microsoft ) и Prettier.
Я даже установил через npm eslint, прописал npx eslint --init, поотвечал на вопросы в терминале ( на вопросе зачем мне eslint выбрал check syntax and find problems )
Короче, поработал по этому видосу: https://www.youtube.com/watch?v=lTeza7Vxo8c

Но все равно у меня не работает ESLint, а именно не отображаются ошибки в синтаксисе.
Т.е. на скрине видно что у меня не импортирован компонент и хук useState но об этом никаких предупреждений нет, ничего не выделяется и об этом можно узнать только из консоли браузера:(


ESLint который сгенерился:

Расширения есть:


Важная оговорка: когда создаю проект на vite, но выбираю TypeScript то все работает отлично емае

Comments

[WbICHA]

Т.е. на скрине видно что у меня не импортирован компонент и хук useState но об этом никаких предупреждений нет, ничего не выделяется и об этом можно узнать только из консоли браузера:(

Потому что еслинт не отвечает за это.

когда создаю проект на vite, но выбираю TypeScript то все работает отлично

Потому что тайпскрипт отвечает за это.

Answer 1

[Владислав Андреев]

Я тоже помаялся изрядно с этим недавно, у меня в репозитории есть инструкция

Возможно придется отключить само расширение ESLint.
Отпиши, помогло или нет.

Изменено: инструкция паленая, надо ее подкорректировать.

Comments

[WbICHA]

А зачем ты запихнул конфиг преттиера в пекедж джейсон?

[Владислав Андреев]

WbICHA, конфликт был между несколькими правилами. Если есть способ получше, то было бы интересно узнать.

[WbICHA]

'semi': ['error', 'always', { 'omitLastInOneLineBlock': false}],
		'comma-dangle': ['error', 'never'],
		quotes: ['error', 'single'],

Зачем тебе эти правила в еслинте, если у тебя преттиер стоит?

[Владислав Андреев]

WbICHA, отсюда prettier и берет правила, насколько я могу понимать.

[WbICHA]

Владислав Андреев, а каким образом помещение конфига в пекедж решает конфликты?

[Владислав Андреев]

WbICHA, как я понял, eslint-prettier берет правила сначала из package, далее по уменьшению иерархии смотрит правила в конфигурации. Правила, что я вписал в package почему-то не мог распознать конфиг. А они нужны были, иначе возникал конфликт, когда prettier просил одинарные кавычки, а eslint двойные (я точно уже не вспомню, но что-то такое было), пришлось вписывать эти правила в package.
Я сам не до конца разобрался, как это настраивать адекватно, к сожалению.

[WbICHA]

Владислав Андреев, преттиер берёт правила из конфига еслинта, а не из своего конфига?

[Владислав Андреев]

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

[WbICHA]

Владислав Андреев, так, давай начнём с начала. У преттиера есть СВОЙ конфиг, у еслинта СВОЙ конфиг и эти конфиги друг друга никаким образом не касаются, потому что это два разных "приложения" от разных "производителей".
Конфликты у тебя были, потому что ты настроил еслинт, а преттиер оставил с дефолтным конфигом. Именно для этого есть такой замечательный конфиг, как eslint-config-prettier, который нужен лишь для одной цели: отключить правила еслинта, которые пересекаются с тем, за что отвечает преттиер.

И prettier-eslint нафиг ненужен, чтобы преттиер был дефолтным форматтером достаточно его выбрать как дефолтный:

"editor.defaultFormatter": "esbenp.prettier-vscode",

А чтобы еслинт на сейв тоже работал, просто добавляешь его (и всё, что надо) в экшены:

"editor.codeActionsOnSave": {
    "source.organizeImports": "never",
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },

И, чтобы он не проганял все правила, выбираешь те, что надо:

"eslint.codeActionsOnSave.mode": "all",
  "eslint.codeActionsOnSave.rules": [
    "import/*",
    "no-relative-import-paths/*",
    "@typescript-eslint/consistent-type-imports",
    "unused-imports/no-unused-imports",
    "sort-exports/sort-exports"
  ],

Ну и в .prettierrc правила перенести, конечно, а не держать их там, где им не место.

[Niksak]

Ребята, я просто переустановил vs code ахах)

[Владислав Андреев]

WbICHA, понял, спасибо! Вот так вот даже не задавая вопросы я получил инструкцию, ну наконец-то)