I am working on a project that uses eslint + prettier (and plugins to running both coupled)

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "pre-commit": "^1.2.2",
    "prettier": "^3.2.5",
    "pretty-quick": "^4.0.0",
     "typescript": "^5.1.3"
}

And respectively .prettierrc & .eslintrc.js cfg files (in project root), the prettier one with common formatting rules, and the eslint with the prettier integration plugins

module.exports = {
//...
  plugins: ['@typescript-eslint/eslint-plugin'],
    extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
//...
};

My problem is: neither prettier or eslint both installed through Mason they do not recognize .prettierrc/eslintrc.js config files in cwd. Why the hell is javascript ecosystem the most confusing thing in the world?

I've rtfm (lazyvim) about formatters and linters, but I'm really lost. I also read in some topics that the installation of both coupled is not recommended and requires additional configuration (but I'm just workin in, is not my decision). Please, could you recommend content to understand how to configure it?

I created an angular project with NX 18 and that version unfortunately comes with flat eslint.js config which kind of makes my previous custom eslintrc.json configs obsolete.

(Since there is no eslint subreddit and I already asked on stackoverflow (https://stackoverflow.com/questions/79248446/converting-old-eslint-json-to-flat-eslint-js-for-custom-eslint-rules) I'm asking here now..)

It looks like this (with some custom eslint rules I added there, 4 extra rules for ts and 2 rules for html)

const nx = require('@nx/eslint-plugin');

module.exports = [
  ...nx.configs['flat/base'],
  ...nx.configs['flat/typescript'],
  ...nx.configs['flat/javascript'],
  {
    ignores: ['**/dist'],
  },
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
    // Override or add rules here
    rules: {},
  },
  ...nx.configs['flat/angular'],
  ...nx.configs['flat/angular-template'],
  {
    files: ['**/*.ts'],
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        {
          type: 'attribute',
          prefix: 'app',
          style: 'camelCase',
        },
      ],
      '@angular-eslint/component-selector': [
        'error',
        {
          type: 'element',
          prefix: 'app',
          style: 'kebab-case',
        },
      ],
      '@typescript-eslint/member-ordering': 'error',
      '@typescript-eslint/naming-convention': 'error',
      'default-case': 'error',
      'default-case-last': 'error',
    },
  },
  {
    files: ['**/*.html'],
    // Override or add rules here
    rules: {
      '@angular-eslint/template/attributes-order': ['error'], 
      '@angular-eslint/template/no-duplicate-attributes': ['error'],
    },
  },
];

How do I include prettier in there with the eslint-plugin-prettier library? (that apparently combines linter and formatter). I really can't find a solution anywhere! Like wtf, why enforce a new config out of nowhere when the doc is bad...