Получите ESLint и Prettier Up & Running всего за 2 минуты
Одна из наиболее распространенных проблем при настройке нового проекта Express или React - это настройка ESLint и Prettier для совместной работы.
Если вам интересно, в чем разница между ними,
Prettier - это средство форматирования кода, которое заботится о том, как должен выглядеть ваш код. ESLint - это линтер, который делает больше, чем просто форматирование. Это также помогает находить ошибки кода, которые могут привести к ошибкам.
Это краткое руководство предназначено для бесчисленного множества новичков, которые ломают голову над этим же вопросом.
Примечание. В этом руководстве мы будем использовать VS Code, но он должен работать примерно так же для других популярных редакторов кода.
Шаг 1. Установка зависимостей Dev
Первый шаг - установить необходимые пакеты npm:
npm i eslint eslint-config-prettier eslint-plugin-prettier prettier --save-dev
Флаг --save-dev позволяет нам добавлять эти пакеты в качестве зависимостей разработки.
Шаг 2. Настройка ESLint
Теперь мы собираемся настроить ESLint для использования Prettier для форматирования. Создайте в корне папки проекта файл .eslintrc.json, который будет содержать все наши конфиги для ESLint.
Для настройки ESLint вы можете сделать больше - ознакомьтесь с документацией здесь.
Шаг 3. Настройка Prettier
Однако ESLint и Prettier могут расходиться во мнениях по ряду вопросов форматирования. Чтобы указать Prettier, какие именно параметры следует использовать, мы добавляем файл .prettierrc.json в нашу корневую папку.
Здесь я указал, какие стили форматирования следует использовать. Например, semi: true указывает Prettier добавлять точки с запятой после каждого оператора, а tabWidth: 2 указывает использовать 2 пробела для каждого уровня отступа.
Точно так же вы можете указать, какие параметры вы предпочитаете использовать. Полный список опций можно найти в документации Prettier здесь.
Шаг 4. Настройка автоформата в редакторе
Мы можем попросить VS Code форматировать наш код каждый раз, когда сохраняем файл. Нажмите Cmd + , в macOS или Ctrl + , в Windows, чтобы открыть панель настроек.
Найдите «Формат» в поле поиска и установите флажок «Редактор: форматировать при сохранении».
Вот и все, ребята!
Вот так! Настройка ESLint + Prettier всего за 4 простых шага! Попробуйте это в своем следующем проекте и создайте свою собственную конфигурацию и правила, используя .eslintrc.json и .prettierrc.json.
JavaScript на простом английском языке
Вы знали, что у нас четыре публикации и канал на YouTube? Найдите их все на plainenglish.io и подпишитесь на наш канал YouTube!
