docs: add flat config configuration

[marcalexiei]

Greetings,
I noticed the README is currently missing reference to the flat config which has been supported on new version 4.1.0.

I added two new sections under "Installation" section:

• "Configuration (legacy: .eslintrc*)" contains the previous content of "Installation that was after installlation command
• "Configuration (new: eslint.config.js)" contains two simple examples (js and ts).
  They are both wrapped in a <details /> tag to avoid they take too much space.
  On the bottom of the section I added a link to reference the folder where all flat configs are present

---

I also added a few alert on the already present information to make them more visible (Github markdown reference)

---

Thanks for your work supporting the new config format!

[changeset-bot]

⚠️ No Changeset found

Latest commit: c7dae5b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[SukkaW]

LGTM, thanks!

[SukkaW]

@marcalexiei It seems that README doesn't pass the lint.

[marcalexiei]

Hi @SukkaW,
sorry I didn't notice the lint script in package.json 😅.
Now lint script checks should pass

[vuolter]

I think you have to add the settings config in the typescript example. It should be something like this:

import js from '@eslint/js'
import eslintPluginImportX from 'eslint-plugin-import-x'
import tsParser from '@typescript-eslint/parser'

export default [
  js.configs.recommended,
  eslintPluginImportX.flatConfigs.recommended,
  eslintPluginImportX.flatConfigs.typescript,
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      parser: tsParser,
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    ignores: ['eslint.config.js'],
    rules: {
      'no-unused-vars': 'off',
      'import/no-dynamic-require': 'warn',
      'import/no-nodejs-modules': 'warn',
    },
    settings: {
      'import-x/resolver': {
        typescript: true,
      },
    },
  },
]

[SukkaW]

I think you have to add the settings config in the typescript example.

IMHO they should be added to the typescript presets directly instead. Currently they are missing:

eslint-plugin-import-x/src/config/flat/typescript.ts

Lines 23 to 34 in 709f86f

	settings: {
	'import-x/extensions': allExtensions,
	'import-x/external-module-folders': ['node_modules', 'node_modules/@types'],
	'import-x/parsers': {
	'@typescript-eslint/parser': [...typeScriptExtensions],
	},
	'import-x/resolver': {
	node: {
	extensions: allExtensions,
	},
	},
	},

[marcalexiei]

Adding settings to the typescript config might throw an error after installing this plugin because eslint-import-resolver-typescript is not a dependency, nor a peer dependency.

I added settings to the typescript example with a note that instructs the user to install eslint-import-resolver-typescript

[SukkaW]

Adding settings to the typescript config might throw an error after installing this plugin because eslint-import-resolver-typescript is not a dependency, nor a peer dependency.

I added settings to the typescript example with a note that instructs the user to install eslint-import-resolver-typescript

When the typescript preset is enabled, we could assume they are lining a TypeScript project, which typescript-eslint might just be there already. Adding an instruction would be fine.

[marcalexiei]

@SukkaW would you like that I setup another PR adding:

settings: {
  'import-x/resolver': {
    typescript: true,
  },
},

to the two typescript configs?

[SukkaW]

@SukkaW would you like that I setup another PR adding:

settings: {
  'import-x/resolver': {
    typescript: true,
  },
},

to the two typescript configs?

Sure! Please do.