предисловие

Я впервые пишу о Наггетс, пожалуйста, простите меня, если пишу плохо~

eslintНе говорите ничего об основах, просто скажите прямоpluginsа такжеextendsразница

плагины

Правила eslint можно настроить через rules, для относительно простого примера:

//	.eslintrc.js
module.exports = {
	rules: {
    'indent': 'off'
  }
}

Однако есть некоторые настройки для разных сценариев и разных спецификаций.eslintпроверить требования,eslintЕсли необязательных правил, предусмотренных по умолчанию, нет, в это время необходимо сделать некоторые расширения.

Плагин plugin в основном добавляет некоторые правила проверки для eslint, например:eslint-plugin-reactбудет правreactПроект сделал некоторые настройкиeslintПравила, следующий перехватeslint-plugin-reactсерединаjsx-boolean-valueУпрощение, вы можете сразу увидеть спецификуeslint-plugin-reactисходный код.

//	eslint-plugin-react
module.exports = {
  rules: {
    'jsx-boolean-value': {
      meta: {
        docs: {
          description: 'Enforce boolean attributes notation in JSX',
          category: 'Stylistic Issues',
          recommended: false,
          url: docsUrl('jsx-boolean-value')
        },
        fixable: 'code'
      },
      create(context) {}
    }
    // ...
  },
  configs: {
    // ...
    // 后面会说 和extends相关
  }
}

Вот увеличение для новых правил eslint-plugin-react, как его использовать в своих проектах, или к новым правилам выше пример

Первый шаг должен быть первымeslint-plugin-reactустановлены,yarn add eslint-plugin-react --dev.

Второй шаг это загрузка плагина, plugins просто загружает плагин, понятно что парсинг eslint данjsx-boolean-valueВозможность проверки правила, реальное открытие возможности проверки этого правила все еще необходимо настроить с помощью правил. (Часто в библиотеке плагинов есть десятки новых правил, и не каждое правило нужно включать. Сейчас самое время настроить соответствующие правила проверки в соответствии с вашими потребностями)

//	.eslintrc.js
module.exports = {
  plugins: [
    'eslint-plugin-react'
  ],
  rules: {
    'eslint-plugin-react/jsx-boolean-value': 2
  }
}

Такое новое правило eslint установлено.

расширяет интеграцию

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

Хотя говорят, что разные правила eslint необходимо настраивать в соответствии с разными требованиями, стилями и спецификациями, правила, которые необходимо настраивать для схожих проектов, часто схожи. Если каждый проект начнет поэтапно выбирать правила конфигурации, это будет менее гуманно, настало время, когда расширения сыграют свою роль.

Лично я предпочитаю понимать расширения как наилучшую практику для интеграции стиля eslint или плагинов eslint.Содержимое его конфигурации на самом деле является копией того, что настроили другие..eslintrc.js.

все еще как указано вышеeslint-plugin-reactНапример, он реализует десятки правил конфигурации, а для удобства других по умолчанию реализует две лучшие практики.allтак же какrecommened(Вы можете увидеть конкретное имя в конфигах)

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

module.export = {
	extends: [
    	'eslint-plugin-react/recommended'
    ]
}

В дополнение к использованию метода загрузки имени конфигурации в плагине, расширения также часто используютeslint-config-xxxxПакет с таким названием. В основном потому, что некоторые лучшие практики часто не требуют повторной реализации метода проверки правил сами по себе, а нуждаются только в экспорте конфигурации eslint.