Это моя история о том, как мне удалось внедрить ESLint в мой проект VS Code.

Я очень хочу изучить ESLint, потому что я хочу, чтобы мой код был более последовательным, и я также хотел избежать уродливых ошибок.

У меня есть готовый код NPM и Visual Studio на моем ноутбуке, поэтому я установил расширение ESLint от Дирка Баумера.

Затем я обратился к руководству по началу работы с ESLint, открыл командную строку и запустил команду npm для установки пакета eslint.

$ npm install eslint --save-dev

Затем я выполнил команду ниже, чтобы открыть свой локальный проект:

$ code .

Я заметил несколько изменений в моем коде Visual Studio и в моем локальном проекте. Во-первых, в каталоге моего проекта появилась новая папка с именем «node_modules». Это произошло из-за команды npm, которую я запускал ранее. Во-вторых, я заметил, что внизу кода Visual Studio есть статус ESLint с восклицательным знаком.

Любопытно, я щелкнул статус ESLint и обнаружил ошибку:

В нем говорилось, что у меня нет файла конфигурации с именем .eslintrc.json.

После поиска ответов в Интернете я обнаружил, что мне нужно выполнить «eslint --init» в подпапке node_modules/eslint, которая содержит файл package.json.

Вернувшись в командную строку, я перешел в подпапку node_modules\eslint и выполнил приведенную ниже команду.

$ eslint --init

Важное примечание. Вы можете запустить эту команду непосредственно в подпапке node_modules\eslint, если вы уже установили eslint глобально.

// Install eslint globally
$ npm install eslint -g

Выполнение команды вызвало у меня ряд вопросов, требующих ответов. Это основа файла конфигурации .eslintrc.json, который будет создан.

Вот как я ответил на эти вопросы:

Я вернулся к своему коду VS и перезагрузил окно проекта, нажав CTRL + Alt + R. Я заметил, что моя подпапка node_modules\eslint теперь содержит файл .eslintrc.json.

Вот содержимое файла:

Однако, к сожалению, я все еще обнаружил проблему в своем статусе ESLint, как показано ниже:

В сообщении об ошибке по-прежнему говорится, что VS Code не может найти мой файл .eslintrc.json.

После дальнейшего поиска в Google я обнаружил, что мне нужно добавить следующие строки в мой файл settings.json в коде Visual Studio:

   "eslint.options": {
        "configFile": "node_modules/eslint/.eslintrc.json"
   }

Затем я нажал Ctrl + , чтобы открыть страницу настроек VS Code.

В поле поиска я набрал eslint.options для поиска параметра. Затем я щелкнул ссылку «Изменить в settings.json», чтобы открыть файл settings.json.

Затем я добавил фрагмент кода внизу моего файла settings.json на вкладке «Настройки пользователя», а затем сохранил его.

Я снова перезагрузил окно VS Code, нажав CTRL + Alt + R.

Когда я открыл файл JavaScript, я обнаружил, что восклицательный знак в статусе ESLint исчез (Ура!!!). Это означало, что я успешно включил ESLint в свой проект.

Что делать с ошибками?

Поскольку я установил расширение ESLint, я перешел в палитру команд VS Code, нажав Ctrl + Shift + P, а затем запустил ESLint: исправить все автоматически устраняемые проблемы. Эта команда применяет решения автоматического исправления ESLint ко всем устранимым проблемам. Вы можете проверить эту ссылку, чтобы просмотреть все правила, которые могут быть исправлены автоматически.

Затем я просмотрел все оставшиеся ошибки, которые обнаружил после запуска команды.

Как отключить некоторые правила ESLint?

Я активно использовал JQuery и другие плагины (например, Superslides) в своем проекте, поэтому ESLint выдает эти оставшиеся ошибки:

1. ‘$’ не определен. [no-undef]
2. ‘typed’ присваивается значение, но никогда не используется. [no-unused-vars]
3. «Типизированный» не определен. [без определения]

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

Я обнаружил, что могу исключить некоторые правила ESLint, добавив пару параметров в свой файл .eslintrc.json.

До:

После:

Я добавил «jquery»: true, чтобы система распознала наличие синтаксиса, связанного с JQuery (т. е. использование «$» для манипулирования DOM) в моем коде JavaScript.

Я также отключил правила no-undef и no-unused-vars, потому что ESLint помечает некоторые части моего кода как ошибочные, хотя этого не должно быть. Вы можете обратиться к этой ссылке для использования плагина Typed.js.

Затем я перезагрузил окно VS Code и обнаружил, что мой проект теперь очищен от проблем с ESLint.

Вот и все! Я надеюсь, что мой опыт поможет всем, кто планирует настроить ESLint в своих проектах в Visual Studio Code.