you have to config like this:

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
      eslintPluginPrettierRecommended
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "your-own",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "your-own",
          style: "kebab-case",
        },
      ],
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
      eslintPluginPrettierRecommended
    ],
    rules: {
      "prettier/prettier": [
        "error",
        {
          "parser": "angular"
        },
      ]
    },
  }
);
Answer from Mojtaba Nejad Poor Esmaeili on Stack Overflow
🌐
GitHub
github.com › prettier › eslint-config-prettier
GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier. · GitHub
ℹ️ Note: You might find guides on the Internet saying you should also extend stuff like "prettier/react". Since version 8.0.0 of eslint-config-prettier, all you need to extend is "prettier"! That includes all plugins. With flat config, you get to decide the plugin name!
Author   prettier
🌐
Medium
allalmohamedlamine.medium.com › flat-config-setting-up-eslint-and-prettier-with-eslint-prettier-plugin-7bd1ca453129
Flat config: Setting up Eslint and Prettier with eslint-prettier-plugin | by Mohamed Lamine Allal | Medium
November 27, 2023 - There is no flat config support ◌ you can check the doc. And you’ll find the old eslintrc config · { "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": ...
🌐
npm
npmjs.com › package › eslint-plugin-prettier
eslint-plugin-prettier - npm
Enable the eslint-config-prettier ... flat configuration, this plugin ships with an eslint-plugin-prettier/recommended config that sets up both eslint-plugin-prettier and eslint-config-prettier in one go....
      » npm install eslint-plugin-prettier
    
Published   Jan 14, 2026
Version   5.5.5
Author   Teddy Katz
🌐
GitHub
github.com › prettier › eslint-plugin-prettier
GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting · GitHub
Enable the eslint-config-prettier ... flat configuration, this plugin ships with an eslint-plugin-prettier/recommended config that sets up both eslint-plugin-prettier and eslint-config-prettier in one go....
Author   prettier
🌐
Reddit
reddit.com › r/angular2 › how to include prettier into "new" flat eslint.js config?
r/Angular2 on Reddit: How to include prettier into "new" flat eslint.js config?
July 24, 2024 -

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...

🌐
DEV Community
dev.to › dmnchzl › eslint-x-prettier-the-right-way-to-start-a-javascript-project-1hc1
ESLint x Prettier: The Right Way To Start A JavaScript Project - DEV Community
July 10, 2024 - In 2022, ESLint (v8.21.0) introduced a new configuration system nicknamed "Flat Config." This post... Tagged with javascript, eslint, prettier.
🌐
Medium
allalmohamedlamine.medium.com › eslint-flat-config-and-new-system-an-ultimate-deep-dive-2023-46aa151cbf2b
Eslint flat config and new system an ultimate deep dive 2023 | by Mohamed Lamine Allal | Medium
November 27, 2023 - Three ways to use prettier with Eslint ✨ eslint-config-prettier + prettier run separately - - eslint-config-prettier=> disable eslint conflicting rules with prettier => So you can use prettier separately along. ✨ Using Eslint plugin: eslint-plugin-prettier (Full eslint integration) - - Provides formatting with Eslint, and lining (seeing red lines) ✨ Using prettier-eslint (Not recommended) - - Details in article above
Find elsewhere
🌐
Prettier
prettier.io › docs › integrating-with-linters.html
Integrating with Linters · Prettier
eslint-config-prettier · Check out the above links for instructions on how to install and set things up. When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances. First, we have plugins that let you run Prettier as if it was a linter rule: eslint-plugin-prettier ·
🌐
GitHub
github.com › prettier › eslint-plugin-prettier › issues › 591
Support ESLint flat config · Issue #591 · prettier/eslint-plugin-prettier
August 9, 2023 - Hey! Thanks for a useful plugin. Right now, only eslintrc format is supported. In ESLint v9, the new flat format will be the default: https://eslint.org/blog/2023/10/flat-config-rollout-plans/ More and more projects are migrating to flat...
Published   Oct 18, 2023
🌐
Expo Documentation
docs.expo.dev › integrations › tools › using eslint and prettier
Using ESLint and Prettier - Expo Documentation
2 weeks ago - Learn more about customizing Prettier configuration. If you're using VS Code, install the ESLint extension to lint your code as you type. You can try restarting the ESLint server by running the command ESLint: Restart ESLint Server from the command palette. ESLint can be slow to run on large projects. The easiest way to speed up the process is to lint fewer files. Add a .eslintignore file to your project root to ignore certain files and directories such as: ... Note: Flat config is supported in Expo SDK 53 and later.
🌐
Medium
medium.com › @contactmanoharbatra › eslint-and-prettier-configuration-f0259ebeb58b
Eslint and Prettier configuration | by Manohar Batra | Medium
September 10, 2025 - Add a prettier.config.js (or .prettierrc): export default { semi: false, singleQuote: true, trailingComma: "all", printWidth: 100, tabWidth: 2, } old style · { semi: false, singleQuote: true, trailingComma: "all", printWidth: 100, tabWidth: 2, } Here’s the updated flat config: (this is optional) // eslint.config.js import globals from "globals" import js from "@eslint/js" import pluginReact from "eslint-plugin-react" import pluginReactHooks from "eslint-plugin-react-hooks" import pluginJsxA11y from "eslint-plugin-jsx-a11y" import pluginImport from "eslint-plugin-import" import pluginPrettie
🌐
npm
npmjs.com › package › eslint-config-prettier
eslint-config-prettier - npm
Add eslint-config-prettier to your ESLint configuration – either to eslintrc or to eslint.config.js (flat config).
      » npm install eslint-config-prettier
    
Published   Jul 18, 2025
Version   10.1.8
Author   Simon Lydell
🌐
DEV Community
dev.to › psychosynthesis › new-eslint-flat-config-file-format-example-217c
New ESLint flat config file format example - DEV Community
April 12, 2024 - npm install --save-dev eslint-plugin-prettier eslint-config-prettier npm install --save-dev --save-exact prettier · Yes, and besides, you will once again have to correct the linter config. Here's the final version: import path from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; import pluginJs from "@eslint/js"; import prettierConfig from 'eslint-config-prettier'; import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const comp
🌐
The Guild
the-guild.dev › graphql › eslint › docs › usage › prettier
Usage with eslint-plugin-prettier | GraphQL-ESLint
/** * Legacy config example, should be run with `ESLINT_USE_FLAT_CONFIG=false` environment variable in ESLint 9 */ module.exports = { root: true, overrides: [ { files: ['*.js'], processor: '@graphql-eslint/graphql', extends: ['eslint:recommended', 'plugin:prettier/recommended'], env: { es2022: true, }, parserOptions: { sourceType: 'module', }, }, { files: ['*.graphql'], parser: '@graphql-eslint/eslint-plugin', plugins: ['@graphql-eslint'], rules: { 'prettier/prettier': 'error', }, }, ], };
🌐
Advancedfrontends
advancedfrontends.com › eslint-flat-config-typescript-javascript
Modern Linting in 2025: ESLint Flat Config with TypeScript and JavaScript - Advanced Frontends.com
April 9, 2025 - The new flat config eliminates legacy concepts like "extends" chains and config merging, replacing them with a single JavaScript file (eslint.config.js) that gives you full control over: ... The following will demonstrate how to use rulesets ...
🌐
Reddit
reddit.com › r/nextjs › eslint flat config + prettier
Eslint flat config + prettier : r/nextjs
February 6, 2023 - { "extends":["standard", "next/core-web-vitals", "prettier"], "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint", "prettier", "simple-import-sort"], "rules": { "prettier/prettier": "error", "react/react-in-jsx-scope": "off", "simple-import-sort/imports": "error", "simple-import-sort/exports": "error", "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "error" }, "overrides": [ // override "simple-import-sort" config { "files": ["*.js", "*.jsx", "*.ts", "*.tsx"], "rules": { "simple-import-sort/imports": [ "error", { "groups": [ // Packages `react` related packages come first.
Top answer
1 of 2
18
  1. Install eslint:
    npm i --save-dev eslint
    
  2. Init eslint:
    npx eslint --init
    
    For some options you need choose next:
    • How would you like to use ESLint?
    • To check syntax and find problems
    • What format do you want your config file to be in?
    • JavaScript
  3. Install prettier:
    npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier 
    
  4. Create .prettierrc config file:
     {
         "printWidth": 80,
         "singleQuote": true,
         "trailingComma": "es5"
     }
    

At now you can check style with eslint and fix style with prettier from comand line.

For VSCode integration with eslint and prettier you need to install one of:

  1. esbenp.prettier-vscode.
  2. dbaeumer.vscode-eslint;

After that you need to set this extension as default formatter:

  1. Open command pallette ctrl+shift+p;
  2. Select Format Document With...;
  3. Select Configure Document With...;
  4. Select Prettier - Code Formatter or ESLint based on your preferences.

Now, eslint will work as linter and prettier as formatter:

VSCode problem tab:

eslint output

If I save file all prettier problems will be fixed (Autoformat on save should be turned on)

Eslint plugin does not apply automatically changes in settings located in .prettierrc. See issue on github. To fix this you can:

  • move .prettierrc content in .eslint (not recommended because prettier plugins sometimes do not read this file);
  • run from command pallette in VSCode ESLint: Restart ESLint server after edit .prettierrc file.
2 of 2
16

in eslint config, change


  extends: ["prettier"],

to


  extends: ['plugin:prettier/recommended'],

🌐
DEV Community
dev.to › joshuanr5 › eslint-typescript-prettier-flat-config-1bmb
EsLint + TypeScript + Prettier (Flat Config) - DEV Community
June 8, 2024 - Una vez instalado vamos a comenzar con la configuración de EsLint y Prettier. Vamos a crear el archivo eslint.config.msj. ... Voy a explicar a gran escala en que consiste el codigo previo, aunque igual recomiendo que lean la documentación oficial del Eslint. Como podemos ver al inicio estan los imports el cual importamos las librerias @eslint/js que cuenta con la configuración para JavaScript, typescript-eslint que como pueden adiviar cuenta con la configuración de TypeScript, eslint-plugin-prettier que es un plugin de eslint para mostrar errores de Prettier y eslint-config-prettier debido a que prettier y eslint pueden tener reglas similares esta libreria nos ayuda a evitar problemas con estas librerias y que todo funcione de manera esperada.
🌐
ANGULARarchitects
angulararchitects.io › home › blog › ng best practices: prettier & eslint
NG Best Practices: Prettier & ESLint - ANGULARarchitects
August 9, 2025 - Download this ESLint config. To ensure that your code is always formatted and linted correctly, integrate Prettier and ESLint into your development workflow: I run Prettier automatically on every save. That works charmingly in Cursor, VS Code and Webstorm (even NeoVIM, I guess).