Правила настройки ESLint для оптимизации проверки кода

В рамках нашей цепочки инструментов React Native здесь, в Headway, мы используем популярный инструмент ESLint, чтобы обеспечить единообразие нашего стиля кода в команде. Это означает, что независимо от того, к какому проекту присоединяется разработчик, мы можем сократить время, необходимое для того, чтобы справиться с фоновыми проблемами приложения, и вместо этого сосредоточиться на предоставлении основных функций.

Для наших проектов React Native мы полагаемся на отличный базовый набор правил ESLint от Airbnb, а затем вносим для нас несколько конкретных изменений. Недавно мы столкнулись с рядом случаев, когда правило реагировать/предпочитать функцию без состояния приводило к тому, что наша команда переписывала компоненты между классами и чистыми функциями всякий раз, когда менялись потребности в локальном состоянии. Чтобы предотвратить изменение этого кода в тех частях нашего приложения, которым, как мы знаем, в будущем, скорее всего, потребуется локальное состояние, в первую очередь в наших умных контейнерах, использующих Redux, нам нужен был способ отключить это правило только для этих файлов.

Общие правила ESLint для начала работы

Чтобы это работало, мы должны сообщить ESLint, что файл конфигурации в каталоге нашего проекта следует считать корневой конфигурацией. Это предотвратит поиск ESLint дополнительных файлов конфигурации вверх по иерархии на диске или в каталоге пользователя.

Все, что здесь нужно, это добавить строку root: true к строке .eslintrc.js нашего проекта:

/* In our .eslintrc.js */
module.exports = {
  root: true,
  extends: "airbnb",
  rules: {
    /* Here's where we place our customizations to AirBnb's rules * Below are a few representative examples: */
    // Allow JSX in React Native JS files
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    // For React Native's image inclusion via require('../example.png')
    'global-require': 'off',
    /* ... */
  },
};

Конкретная настройка для папки

В нашей папке «контейнеры», которая содержит наши подключенные компоненты Redux, мы затем создаем еще один .eslintrc.js, чтобы переопределить унаследованные правила. При анализе файла ESLint сначала ищет файл конфигурации в том же каталоге, что и файл, а затем продвигается вверх по дереву, пока не наткнется на файл с root: true. Это упрощает переопределение определенных правил для каждого каталога по мере необходимости. Для отключения нашего правила react/prefer-stateless-function нам нужно следующее:

/* In app/containers/.eslintrc.js */
module.exports = {
  rules: {
    'react/prefer-stateless-function': 'off',
  },
};

Почему этот тип инструмента имеет значение

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

Линтинг особенно полезен в контексте проверки кода. Когда команды тратят время на систематизацию руководств по стилю и автоматизируют их соблюдение, обзоры кода почти мгновенно становятся местом, где обсуждаются содержание и правильность, а не новые строки и расстановка запятых.

Чтобы узнать больше о настройке среды разработки для более быстрой обратной связи, взгляните на один из наших веб-семинаров:

Первоначально опубликовано Ноем Сеттерстеном на headway.io.

Тебе понравилась эта статья?

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

Еще статьи от нашей команды

Правила настройки ESLint для оптимизации проверки кода