При работе над приложением React мелкие опечатки и ошибки могут привести к большим проблемам, если их не устранить должным образом во время разработки приложения. Когда дело доходит до линтинга и форматирования приложений React на базе JavaScript, ESlint и Prettier — это первый выбор разработчиков. Поэтому в этой статье мы будем настраивать Eslint и Prettier для приложения React.
1. Настройка абсолютного импорта
Относительные пути — это стандартное поведение для добавления импорта в React, которое приведет к тому, что проект будет выглядеть неорганизованным, когда он станет сложным. Вместо этого мы можем использовать абсолютные пути для добавления импорта, просто добавив новый файл jsconfig.json на корневом уровне вашего проекта, как показано ниже:
После добавления этого файла импорты могут быть реорганизованы следующим образом:
// Absolute Import
import HelloWorld from 'components/HelloWorld';
// Relative Import
import HelloWorld from '../../components/HelloWorld';
2. Установка зависимостей
Переходя к настройке ESLint и Prettier, мы должны добавить в наше приложение ряд зависимостей, таких как babel, eslint, eslint-config, import resolver и eslint plugins, используя команду, приведенную ниже.
npm install --save-dev @babel/core@7.18.6 @babel/eslint-parser@7.18.2 @babel/preset-react@7.18.6 eslint@8.1.0 eslint-config-prettier@8.5.0 eslint-import-resolver-jsconfig@1.1.0 eslint-plugin-import@2.26.0 eslint-plugin-prettier@4.2.1 eslint-plugin-react@7.30.1 prettier@2.7.1
Точная версия, которую следует использовать для конкретной зависимости, не упоминается, поскольку они зависят друг от друга для правильного функционирования, но если вы хотите немного поиграть с последними версиями, вы можете использовать эту команду для установки последних версий:
npm install --save-dev @babel/core @babel/eslint-parser @babel/preset-react eslint eslint-config-prettier eslint-import-resolver-jsconfig eslint-plugin-import eslint-plugin-prettier eslint-plugin-react prettier
3. Добавьте файл конфигурации ESLint
Конфиг ESLint может быть создан либо через командную строку с помощью команды eslint —init и ответов на несколько вопросов относительно соглашений в коде, которые необходимо соблюдать, либо с помощью существующей конфигурации, как в приведенном ниже примере. Эта конфигурация уже решает проблему конфликтующих правил между prettier и eslint для кавычек и отступов. Чтобы использовать эту конфигурацию, вам потребуется создать новый файл .eslintrc.json в корне вашего проекта.
Не стесняйтесь играть с правилами, определенными выше, или расширить некоторые из часто используемых конфигураций, таких как eslint-config-airbnb, eslint-config-google и т.д., чтобы понять, что лучше всего подходит для вашего проекта.
4. Обновление скриптов
Теперь, чтобы проверить команды линтинга, давайте обновим скрипты в нашем файле package.json, добавив команды, приведенные ниже:
"lint": "eslint . --max-warnings=0",
"lint:fix": "eslint . --max-warnings=0 --fix"
Флаг —max-warnings помогает убедиться, что разработанный код линтируется должным образом перед фиксацией кода с помощью проверок перед фиксацией без каких-либо предупреждений, в то время как флаг —fix автоматически исправляет ошибки/предупреждения. После этого мы готовы проверить конфигурацию ESLint, выполнив следующую команду, которая просканирует все файлы JavaScript в проекте.
npm run lint
5. Обновление настроек для VSCode
Мы можем обновить конфигурацию VSCode таким образом, чтобы она отображала ошибки линтинга и форматирования и исправляла автоисправляемые ошибки при сохранении файла. Для этого нам потребуется установить несколько расширений: ESLint и Prettier. Я также рекомендую установить Error Lens, которое помогает выделять ошибки/предупреждения в самом файле во время написания кода. После этого нам нужно добавить новый файл .vscode/settings.json в корень проекта, как показано ниже:
Заключение
После выполнения всех этих настроек ESLint и Prettier должны быть готовы к работе для линтинга и форматирования вашего проекта, как показано на прилагаемом снимке экрана:
Вот ссылка на полную конфигурацию на Github.
Спасибо за прочтение. Сообщите мне о своих мыслях по поводу настройки ESLint и Prettier для приложений React.
Хотите пообщаться? Свяжитесь со мной в Twitter, LinkedIn или в комментариях ниже!