Как настроить плоскую конфигурацию ESLint с помощью Typescript в VSCode? (без FlatCompat)

Я боролся с этим пару часов, прежде чем нашел довольно чистое решение. Он не зависит от FlatCompat (который сохранит устаревшую конфигурацию), поэтому решил задокументировать это здесь для пользы других, столкнувшихся с той же проблемой:

Плоская конфигурация ESLint сильно отличается от предыдущего формата. Поначалу это сводило меня с ума, но на самом деле после щелчка все становится немного проще. Чтобы понять «плоскую конфигурацию», мне помогли следующие указатели:

• Конфиг — это не что иное, как массив объектов. Это проще, чем предыдущий формат, но поначалу может быть неочевидно.
• Каждый объект в массиве может определять любую конфигурацию ESLint, которую он хочет.
• Каждый объект может ориентироваться на определенные файлы, включая или игнорируя набор файлов (полезно, потому что .eslintignore больше не доступен)
• К каждому проверяемому файлу будут применены все соответствующие конфигурации - я верю в том порядке, в котором они появляются в массиве.

Настройка VSCode — на момент написания вам понадобится:

• Плагин ESlint v3.0.5 или выше (в настоящее время для этого требуется «переключиться на предварительную версию») на странице установки плагина.
• Добавьте "eslint.useFlatConfig": true к своему settings.json (ранее было eslint.experimental.useFlatConfig)

Установите следующие зависимости:

    yarn add --dev \
      eslint \
      @eslint/js \
      typescript-eslint \
      --

Для начала используйте следующий файл eslint.config.js (найдите его рядом с package.json). Это обеспечивает значения по умолчанию из https://typescript-eslint.io/getting-started/. Эта конфигурация дополнительно позволяет добавлять игнорируемые файлы, что полезно, поскольку .eslintignore больше не доступен. Обратите внимание, что конфигурация представляет собой «просто Javascript», поэтому вы можете вносить дополнительные изменения. Здесь используется module.exports, что позволяет избежать необходимости добавлять type: "module" к package.json:

    const eslint = require('@eslint/js');
    const tseslint = require('typescript-eslint');

    const ignores = [
      '**/*.js',
    ];

    module.exports = tseslint.config(
      {
        ...eslint.configs.recommended,
        ignores,
      },
      ...tseslint.configs.recommended.map((config) => ({
        ...config,
        ignores,
      })),
    );

Плюсы:

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

Против:

• Раньше я использовал конфигурацию AirBnB, но решил, что мне нужно ее сбросить, потому что она (пока) недоступна в формате плоской конфигурации.
• Применение другого набора правил линтинга означало множество (в основном простых) изменений в моей кодовой базе.

Надеюсь, это сэкономит вам время на выяснение того, как осуществить переход.